@woosh/meep-engine/src/engine/animation/curve/editor/canvas2dDrawWorldAxisLabels.js

Pure JavaScript game engine. Fully featured and production ready.

import {canvas2d_draw_label} from "../../../graphics/canvas/canvas2d_draw_label.js";
import {formatTruncDecimal} from "./formatTruncDecimal.js";
import {v2_length} from "../../../../core/geom/vec2/v2_length.js";

/**
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} position_x0
 * @param {number} position_y0
 * @param {number} position_x1
 * @param {number} position_y1
 * @param {number} spacing
 * @param {number} value_0
 * @param {number} value_1
 * @param {number} valueStep
 */
export function canvas2dDrawWorldAxisLabels({
                                               ctx,
                                               position_x0, position_y0,
                                               position_x1, position_y1,
                                               spacing = 10,
                                               value_0, value_1,
                                               valueStep
                                           }) {

    if (spacing <= 0) {
        throw new Error(`Spacing must be greater than 0`);
    }

    // compute direction vector
    const delta_x = position_x1 - position_x0;
    const delta_y = position_y1 - position_y0;

    const distance = v2_length(delta_x, delta_y);

    if (distance === 0) {
        throw new Error(`Distance must be greater than 0`);
    }

    const direction_x = delta_x / distance;
    const direction_y = delta_y / distance;

    // number of marks
    const mark_count = Math.ceil(distance / spacing);

    for (let i = 0; i <= mark_count; i++) {
        const offset = spacing * i;

        const point_x = position_x0 + direction_x * offset;
        const point_y = position_y0 + direction_y * offset;

        // compute label value based on valueStep
        const value = value_0 + i * valueStep;

        canvas2d_draw_label({
            ctx,
            text: formatTruncDecimal(value),
            x: point_x,
            y: point_y
        });
    }

}