zoneCanv1.js
1.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { fabric } from 'fabric'
export class zoneInfo {
constructor(id, points){
this.eid = id;
this.fabricCanvas = null;
this.target = null;
this.initFabr();
this.points = points;
}
initFabr(id){
if(!this.fabricCanvas) {
this.fabricCanvas = new fabric.Canvas(id);
this.eventMouse()
} else {
this.fabricCanvas.clear();
}
}
//绘制点
drawPoint(px, py, id, are){
let {x, y} = this.setXY(px, py)
var fabObject = new fabric.Circle({//绘制圆形
radius: 10,
id:id,
fill: '#039BE5',
top: y,
left: x,
strokeWidth: 0,
});
fabObject.hasControls = fabObject.hasBorders = false;
fabObject.lockMovementX =true;
fabObject.lockMovementY = true;
fabObject.on("mouseover", function(ev) {
console.log(ev)
})
this.fabricCanvas.add(fabObject);
}
//碰撞判断
setXY(x,y){
let {width,height} = document.getElementById(this.eid)
let px = (x / 100 * width).toFixed(2);
let py = (y / 100 * height).toFixed(2);
console.log(px, py)
return {
x: px,
y: py
}
}
//鼠标移动监听
eventMouse(){
const _this = this;
this.fabricCanvas.on({
"mouse:move": (e) => {
if(e.target){
e.target.set('fill', '#e4393c');
this.target = e.target;
this.fabricCanvas.renderAll();
} else {
if(this.target) {
this.target.set('fill', '#039BE5');
this.fabricCanvas.renderAll();
this.target = null;
}
}
}
})
}
//信息展示
showInfo(){
}
}