@ue-too/board / index / drawRuler
関数: drawRuler()
drawRuler(
context,topLeftCorner,topRightCorner,bottomLeftCorner,alignCoordinateSystem,cameraZoomLevel):void
定義: packages/board/src/utils/drawing.ts:174
Draws calibrated rulers along the edges of the viewport.
パラメータ
context
CanvasRenderingContext2D
The canvas 2D rendering context
topLeftCorner
Point
Top-left corner of viewport in world coordinates
topRightCorner
Point
Top-right corner of viewport in world coordinates
bottomLeftCorner
Point
Bottom-left corner of viewport in world coordinates
alignCoordinateSystem
boolean
Whether coordinates align with canvas (y-down) or are mathematical (y-up)
cameraZoomLevel
number
Current camera zoom level
戻り値
void
Remarks
This function draws rulers with three levels of tick marks:
- Major ticks: At powers of 10 (1, 10, 100, etc.) with large labels
- Half ticks: At half-steps (5, 50, 500, etc.) with small labels
- Minor ticks: At 1/10 steps with no labels
The ruler automatically adapts to the zoom level by calculating appropriate tick spacing using calculateOrderOfMagnitude and calculateTickValues.
Rulers are drawn along:
- Top edge (horizontal ruler, red)
- Left edge (vertical ruler, green)
Tick positions are calibrated to align with round numbers in world space, making it easy to read coordinates at any zoom level.
例
const ctx = canvas.getContext('2d');
const zoom = 2.0;
// Viewport corners in world space
const topLeft = { x: -100, y: 100 };
const topRight = { x: 100, y: 100 };
const bottomLeft = { x: -100, y: -100 };
drawRuler(ctx, topLeft, topRight, bottomLeft, false, zoom);
// Draws rulers with ticks at -100, -50, 0, 50, 100参照
- calculateTickValues for tick calculation logic
- calculateOrderOfMagnitude for order of magnitude calculation