Labels in normal orientation (not X-mirrored)
User wanted the image to be X-mirrored (NS-mirror, so place names on a map are correctly mirrored for the corridor orientation), but the text labels to be readable normally. Now labels are drawn in normal orientation: - N at top-left - S at bottom-left - y at top-right - x at bottom-right The text is no longer reversed. With the corridor's X-swap arrangement, this means: - screen left = west tiles (low x) - screen right = east tiles (high x) - within each tile, the image is X-mirrored, but the text inside is readable
This commit is contained in:
1 parent
2128220b39
commit
e33598476a
1 file changed
+19
-21
Vendored
+19
-21
@@ -370,29 +370,27 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
|
||||
groundCtx.strokeStyle = 'rgba(0,0,0,0.85)';
|
||||
groundCtx.lineWidth = 3;
|
||||
groundCtx.font = 'bold 40px sans-serif';
|
||||
// Helper: draw a horizontally-mirrored label at (x, y).
|
||||
function mirrorLabel(text, x, y, align) {
|
||||
groundCtx.save();
|
||||
groundCtx.translate(x, y);
|
||||
groundCtx.scale(-1, 1);
|
||||
groundCtx.textAlign = align;
|
||||
groundCtx.strokeText(text, 0, 0);
|
||||
groundCtx.fillText(text, 0, 0);
|
||||
groundCtx.restore();
|
||||
}
|
||||
// S at top-left, textAlign 'right' so the text's right edge
|
||||
// is at the anchor (text extends into the tile from the left
|
||||
// edge of the tile area).
|
||||
mirrorLabel('S', canvasX + 12, canvasY + 44, 'right');
|
||||
// N at bottom-left
|
||||
mirrorLabel('N', canvasX + 12, canvasY + 244, 'right');
|
||||
// Tile coordinates, top-right and bottom-right corners
|
||||
// Labels in normal (non-mirrored) orientation so the user can
|
||||
// read them. The image content itself is X-flipped (NS-mirror)
|
||||
// for the corridor orientation; the labels are drawn on top
|
||||
// in normal orientation for legibility.
|
||||
groundCtx.font = 'bold 40px sans-serif';
|
||||
groundCtx.textAlign = 'left';
|
||||
// N at top-left of tile area (image north is at canvas top)
|
||||
groundCtx.strokeText('N', canvasX + 12, canvasY + 44);
|
||||
groundCtx.fillText('N', canvasX + 12, canvasY + 44);
|
||||
// S at bottom-left
|
||||
groundCtx.strokeText('S', canvasX + 12, canvasY + 244);
|
||||
groundCtx.fillText('S', canvasX + 12, canvasY + 244);
|
||||
// Tile coordinates
|
||||
groundCtx.font = 'bold 18px monospace';
|
||||
// y at top-right, textAlign 'left' so text extends into the
|
||||
// tile from the right edge.
|
||||
mirrorLabel('y=' + tileY, canvasX + GROUND_TILE_SIZE - 12, canvasY + 28, 'left');
|
||||
groundCtx.textAlign = 'right';
|
||||
// y at top-right
|
||||
groundCtx.strokeText('y=' + tileY, canvasX + GROUND_TILE_SIZE - 12, canvasY + 28);
|
||||
groundCtx.fillText('y=' + tileY, canvasX + GROUND_TILE_SIZE - 12, canvasY + 28);
|
||||
// x at bottom-right
|
||||
mirrorLabel('x=' + tileX, canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12, 'left');
|
||||
groundCtx.strokeText('x=' + tileX, canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12);
|
||||
groundCtx.fillText('x=' + tileX, canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12);
|
||||
|
||||
return true;
|
||||
}).catch(function() {
|
||||
|
||||
Reference in new issue
Block a user