examSystem-Anxin/src/app/working-area/model/grid2D.ts

import { Configuration, gridSpacing, viewBounds } from './configuration';
import { EVENT_CHANGED } from './events';
import { Graphics } from 'pixi.js';
import { Vector2 } from 'three';
import { Dimensioning } from './dimensioning';

const GRID_SIZE = 10000;

export class Grid2D extends Graphics {

    canvas;
    options;
    size;
    gridScale;
    constructor(canvas, options) {
        super();
        // this.drawRect(0, 0, GRID_SIZE, GRID_SIZE);
        this.canvas = canvas;
        this.options = options;
        this.size = new Vector2(GRID_SIZE, GRID_SIZE);
        this.gridScale = 1.0;
        this.width = this.size.x;
        this.height = this.size.y;
        this.drawRect(0, 0, GRID_SIZE, GRID_SIZE);
        this.pivot.x = this.pivot.y = 0.5;
        Configuration.getInstance().addEventListener(EVENT_CHANGED, (evt) => this.updateGrid());
        this.updateGrid();
    }

    updateGrid() {
        let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
        let spacingCMS = Configuration.getNumericValue(gridSpacing);
        let spacing = Dimensioning.cmToPixel(spacingCMS);
        let totalLines = gridSize / spacing;
        let halfSize = gridSize * 0.5;
        let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数
        let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数
        let normalColor = 0xE0E0E0;
        let highlightColor = 0xD0D0D0;
        const cellSize = 5;
        this.clear();
        for (let i = 0; i <= totalLines; i++) {
            let co = (i * spacing) - halfSize;
            if (i % cellSize === 0) {
                this.lineStyle(highlightLineWidth, highlightColor).moveTo(-halfSize, co).lineTo(halfSize, co);
                this.lineStyle(highlightLineWidth, highlightColor).moveTo(co, -halfSize).lineTo(co, halfSize);
            } else {
                this.lineStyle(linewidth, normalColor).moveTo(-halfSize, co).lineTo(halfSize, co);
                this.lineStyle(linewidth, normalColor).moveTo(co, -halfSize).lineTo(co, halfSize);
            }
        }
        this.endFill();

        this.beginFill(0xFF0000, 1.0);
        this.drawCircle(-halfSize, -halfSize, 5);
        this.drawCircle(halfSize, -halfSize, 5);
        this.drawCircle(halfSize, halfSize, 5);
        this.drawCircle(-halfSize, halfSize, 5);
        this.drawCircle(0, 0, 5);
        this.endFill();
    }

    getGridScale() {
        return this.gridScale;
    }

    setGridScale(value) {
        this.gridScale = value;
        this.updateGrid();
    }

    configurationUpdate(evt) {
        if (evt.key === gridSpacing) {
            this.updateGrid();
        }
    }
    getCellCoordinates(x, y) {
        let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
        let spacingCMS = Configuration.getNumericValue(gridSpacing);
        let spacing = Dimensioning.cmToPixel(spacingCMS);
        let halfSize = gridSize * 0.5;
        return {
            x: Math.floor((x - -halfSize) / spacing),
            y: Math.floor((y - -halfSize) / spacing),
        };
    }
}