draw.js
4.24 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/**
* fabric绘图
* fab --fabric实例
* shape --绘制的图形
* type -- 绘制类型
*/
import { fabric } from "fabric"
class draw {
constructor(el, type) {
this.el = el;
this.type = type;
this.fab = null;
this.drawingObject = null; //当前绘制对象
this.mouseFrom = {} //绘制启点
this.mouseTo = {} //绘制移动点
this.doDrawing = false; //绘图状态
this.selectionColor = "rgba(0,0,0,0.05)";
this.color = red;
this.doDrawing = false;
this.deleteIcon =
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
this.img = document.createElement("img");
}
/**
* 初始化
*/
initFavCanvas() {
let { el } = this;
this.fab = new new fabric.Canvas(el, {})
}
/**设置绘图类型 */
setDrawType(type) {
this.type = type;
}
/**
* 初始化绘图动作
*/
initEvent() {
this.fab.on("mouse:down", this.mousedownEvent)
this.fab.on("mouse:move", this.mousemoveEvent);
this.fab.on("mouse:up", this.mouseupEvent);
}
/**
* 鼠标按下动作
*/
mousedownEvent(e) {
let { mouseFrom, doDrawing, drawing } = this;
//鼠标按下坐标
var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
doDrawing = true;
fabdrawing(e);
}
/**
* 鼠标移动
*/
mousemoveEvent(e) {
}
/**
* 鼠标抬起
*/
mouseupEvent(e) {
}
/**
* fabdrawing
* 绘制图形
*/
fabdrawing(e) {
let { fab, mouseFrom, mouseTo, type, drawingObject } = this;
if (drawingObject) {
fab.remove(drawingObject);
}
var canvasObject = null;
var left = mouseFrom.x,
top = mouseFrom.y;
switch (type) {
case "arrow":
canvasObject = this.drawArrow(e);
break;
case "rectangle":
canvasObject = this.drawReacangle(e);
break;
default:
break;
}
}
/**
* 坐标转换
*/
transformMouse(mouseX, mouseY) {
return { x: mouseX / 1, y: mouseY / 1 };
}
/**绘制箭头 */
drawArrow(e) {
let { mouseFrom, mouseTo } = this;
var x1 = mouseFrom.x,
x2 = mouseTo.x,
y1 = mouseFrom.y,
y2 = mouseTo.y;
var w = x2 - x1,
h = y2 - y1,
sh = Math.cos(Math.PI / 4) * 16;
var sin = h / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
var cos = w / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
var w1 = (16 * sin) / 4,
h1 = (16 * cos) / 4,
centerx = sh * cos,
centery = sh * sin;
/**
* centerx,centery 表示起始点，终点连线与箭头尖端等边三角形交点相对x，y
* w1 ，h1用于确定四个点
*/
var path = " M " + x1 + " " + y1;
path += " L " + (x2 - centerx + w1) + " " + (y2 - centery - h1);
path +=
" L " + (x2 - centerx + w1 * 2) + " " + (y2 - centery - h1 * 2);
path += " L " + x2 + " " + y2;
path +=
" L " + (x2 - centerx - w1 * 2) + " " + (y2 - centery + h1 * 2);
path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1);
path += " Z";
return new fabric.Path(path, {
stroke: this.color,
fill: this.color,
strokeWidth: this.drawWidth
});
}
/**
*绘制方形
*/
drawReacangle(e){
let { mouseFrom, mouseTo } = this;
return new fabric.Rect({
left: left,
top: top,
width: mouseTo.x - left, //矩形的宽度
height: mouseTo.y - top, //矩形的高度
fill: "rgba(0,0,0,.3)", //填充的颜色
stroke: "orange", // 边框原色
strokeWidth: 1 // 边框大小
});
}
}