zoneCanv.js

import { fabric } from 'fabric'
export class zoneInfo {
  constructor(id, points){
    this.eid = id;
    const canvas = document.getElementById(id);
    canvas.mousemove  = function(e){
      this.eventMouse(e);
    }
    this.ctx = canvas.getContext('2d');
    this.points = {x:0,y:0}
  }
  //绘制点
  drawPoint(px, py, id, are){
   let {x, y} =  this.setXY(px, py)
   this.ctx.beginPath();
   this.ctx.arc(x,y,5,0,2*Math.PI);
   this.ctx.strokeStyle = 'red';
   this.ctx.fillStyle="#ff0";//设置填充颜色
   this.ctx.lineWidth = 1
   this.ctx.fill();//开始填充
   this.ctx.stroke();
   this.points.x = x;
   this.points.y = y;
  }
  //坐标转换
  setXY(x,y) {
    let {width,height} = document.getElementById(this.eid)
    let px = (x / 100 * width).toFixed(2);
    let py = (y / 100 * height).toFixed(2);
    return {
      x: px,
      y: py
    }
  }
  //鼠标移动监听
  eventMouse(e){
    if (this.points) {
      var x = this.points.x
      var y = this.points.y
      console.log(e)
  }
}
  //信息展示
  showInfo(){
  }

}