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.strokeStyle = 'rgba(0,0,0,0.85)';
|
||||||
groundCtx.lineWidth = 3;
|
groundCtx.lineWidth = 3;
|
||||||
groundCtx.font = 'bold 40px sans-serif';
|
groundCtx.font = 'bold 40px sans-serif';
|
||||||
// Helper: draw a horizontally-mirrored label at (x, y).
|
// Labels in normal (non-mirrored) orientation so the user can
|
||||||
function mirrorLabel(text, x, y, align) {
|
// read them. The image content itself is X-flipped (NS-mirror)
|
||||||
groundCtx.save();
|
// for the corridor orientation; the labels are drawn on top
|
||||||
groundCtx.translate(x, y);
|
// in normal orientation for legibility.
|
||||||
groundCtx.scale(-1, 1);
|
groundCtx.font = 'bold 40px sans-serif';
|
||||||
groundCtx.textAlign = align;
|
groundCtx.textAlign = 'left';
|
||||||
groundCtx.strokeText(text, 0, 0);
|
// N at top-left of tile area (image north is at canvas top)
|
||||||
groundCtx.fillText(text, 0, 0);
|
groundCtx.strokeText('N', canvasX + 12, canvasY + 44);
|
||||||
groundCtx.restore();
|
groundCtx.fillText('N', canvasX + 12, canvasY + 44);
|
||||||
}
|
// S at bottom-left
|
||||||
// S at top-left, textAlign 'right' so the text's right edge
|
groundCtx.strokeText('S', canvasX + 12, canvasY + 244);
|
||||||
// is at the anchor (text extends into the tile from the left
|
groundCtx.fillText('S', canvasX + 12, canvasY + 244);
|
||||||
// edge of the tile area).
|
// Tile coordinates
|
||||||
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
|
|
||||||
groundCtx.font = 'bold 18px monospace';
|
groundCtx.font = 'bold 18px monospace';
|
||||||
// y at top-right, textAlign 'left' so text extends into the
|
groundCtx.textAlign = 'right';
|
||||||
// tile from the right edge.
|
// y at top-right
|
||||||
mirrorLabel('y=' + tileY, canvasX + GROUND_TILE_SIZE - 12, canvasY + 28, 'left');
|
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
|
// 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;
|
return true;
|
||||||
}).catch(function() {
|
}).catch(function() {
|
||||||
|
|||||||
Reference in new issue
Block a user