traffic-laser/src/graphic/Coordinate.js

import Constant from "./Constant";
import { dataService } from "./Service/DataService";

const defaultZoom = 100;
const defaultRes = 0.1;
const minAdsorbPix = 15;

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

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

  setRes(res) {
    if (res) {
      this.res = res;
    } else {
      this.res = defaultRes;
    }
  }

  getRes() {
    return this.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.ratio - this.width / 2) * defaultZoom) /
        this.zoom +
      this.center.x;
    point.y =
      ((this.height / 2 - screenPoint.y * this.ratio) * defaultZoom) /
        this.zoom +
      this.center.y;
    return point;
  }

  getXYFromScreenNotRatio(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: 0,
        y: 0,
      };
    }
  }

  updateForCanvas(canvas) {
    if (canvas) {
      console.log(canvas.offsetWidth, canvas.offsetHeight);
      canvas.width = canvas.offsetWidth * this.ratio;
      canvas.height = canvas.offsetHeight * this.ratio;
      this.width = canvas.width;
      this.height = canvas.height;
    }
    this.zoom = defaultZoom;
    this.setCenter(canvas);
    Constant.minAdsorbPix = minAdsorbPix * this.ratio;
  }

  updateZoom(screenPosition, zoom) {
    let position = this.getXYFromScreen(screenPosition);
    this.zoom = zoom;
    this.center.x =
      position.x -
      ((screenPosition.x * this.ratio - this.width / 2) * defaultZoom) /
        this.zoom;

    this.center.y =
      position.y -
      ((this.height / 2 - screenPosition.y * this.ratio) * defaultZoom) /
        this.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.zoom = defaultZoom;
    this.center = {
      x: 0,
      y: 0,
    };
    dataService.initGrid();
  }

  updateForRotate(angle) {}

  clear() {
    this.center = null;
    this.zoom = defaultZoom;
    this.res = defaultRes;
    this.ratio = defaultRes;
  }
}

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