traffic-laser/src/graphic/Coordinate.js

import { dataService } from "./Service/DataService.js";
import { floorplanData } from "./VectorData.js";
import { mathUtil } from "./Util/MathUtil.js/index.js";
import Constant from "./Constant";

const defaultZoom = 100;
export default class Coordinate {
  constructor() {
    this.center = null; // 世界坐标，中心点
    this.zoom = defaultZoom; // 当前缩放比例，不会改变世界坐标系的坐标，只是改变渲染时转换的屏幕坐标
    this.res = 80; //比例尺。实际尺寸与屏幕像素的比例，用于测量。与之前的绘制不同，目前存储的数据与像素的比例是1：1，只是最后测量值再除以这个比例
    this.ratio = 1; //不同硬件设备，像素率不同

    this.width == null;
    this.height == null;
  }

  // 初始化
  init(canvas) {
    this.updateForCanvas(canvas);
  }

  setRes(res) {
    this.res = res;
  }

  // 世界坐标转换成屏幕坐标
  getScreenXY(point) {
    if (this.width == null || this.height == null) {
      return null;
    }

    let pt = {
      x: point.x,
      y: point.y,
    };

    let x = this.width / 2 + ((pt.x - this.center.x) * this.zoom) / defaultZoom;
    let y =
      this.height / 2 - ((pt.y - this.center.y) * this.zoom) / defaultZoom;

    x *= this.ratio;
    y *= this.ratio;

    x = (0.5 + x) << 0;
    y = (0.5 + y) << 0;
    return {
      x: Math.floor(x),
      y: Math.floor(y),
    };
  }

  // 屏幕坐标转换成世界坐标
  getXYFromScreen(screenPoint) {
    const point = {};
    point.x =
      ((screenPoint.x - this.width / 2) * defaultZoom) / this.zoom +
      this.center.x;
    point.y =
      ((this.height / 2 - screenPoint.y) * defaultZoom) / this.zoom +
      this.center.y;
    return point;
  }

  getPointForRevRotate(point, angle) {}

  getVectorForRotate(point, angle) {}

  updateCenterForRotate(angle) {}

  setCenter(canvas) {
    if (canvas) {
      this.center = {
        x: canvas.clientWidth / 2,
        y: canvas.clientHeight / 2,
      };
    }
  }

  updateForCanvas(canvas) {
    if (canvas) {
      this.width = canvas.clientWidth;
      this.height = canvas.clientHeight;
    }
    this.setCenter(canvas);
  }

  updateZoom(zoom) {
    this.zoom = zoom;
  }

  moveTo(zoom, screenPosition) {
    const position = this.getXYFromScreen(screenPosition);
    this.zoom = zoom;
    const dx = (screenPosition.x * defaultZoom) / this.zoom - this.width / 2;
    const dy = this.height / 2 - (screenPosition.y * defaultZoom) / this.zoom;
    this.center.x = position.x - dx;
    this.center.y = position.y - dy;
  }

  getPixelRatio(context) {
    var backingStore =
      context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio ||
      1;
    return (window.devicePixelRatio || 1) / backingStore;
  }

  reSet(canvas) {
    this.updateForCanvas(canvas);
    this.zoom = defaultZoom;
  }

  updateForRotate(angle) {}

  clear() {
    this.center = null;
    this.zoom = 100;
    this.res = 80;
    this.ratio = 1;
  }
}

const coordinate = new Coordinate();
export { coordinate };