traffic-laser/src/graphic/Geometry/Img.js

import { coordinate } from "../Coordinate.js";
import { mathUtil } from "../Util/MathUtil.js";
import VectorType from "../enum/VectorType.js";
import Geometry from "./Geometry";
import { api } from "@/store/sync.ts";

export default class Img extends Geometry {
  constructor(src, vectorId) {
    super();
    this.src = null;
    this.angle = 0;
    this.display = true;
    this.center = null;
    this.imageData = null;
    this.bounding = null;
    this.geoType = VectorType.Img;
    this.setId(vectorId);
    this.setSrc(src);
  }

  setAngle(value) {
    this.angle = value;
  }

  setSrc(src) {
    this.src = src;
  }

  setImageData() {
    return new Promise(async (resolve, reject) => {
      this.imageData = new Image();
      this.imageData.src = await api.getFile(this.src);
      this.imageData.onload = function () {
        resolve();
      };
      this.imageData.onerror = function () {
        reject();
      };
    });
  }

  setBounding() {
    const width = this.imageData.width * coordinate.ratio;
    const height = this.imageData.height * coordinate.ratio;
    this.bounding = [];
    this.bounding[0] = {
      x: this.center.x - width / 2,
      y: this.center.y + height / 2,
    };
    this.bounding[1] = {
      x: this.center.x + width / 2,
      y: this.center.y + height / 2,
    };
    this.bounding[2] = {
      x: this.center.x + width / 2,
      y: this.center.y - height / 2,
    };
    this.bounding[3] = {
      x: this.center.x - width / 2,
      y: this.center.y - height / 2,
    };
  }
}