-
Notifications
You must be signed in to change notification settings - Fork 229
/
arrow.js
83 lines (68 loc) · 1.88 KB
/
arrow.js
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
/*eslint no-unused-vars: 0*/
import FabricCanvasTool from './fabrictool'
const fabric = require('fabric').fabric;
class Arrow extends FabricCanvasTool {
configureCanvas(props) {
let canvas = this._canvas;
canvas.isDrawingMode = canvas.selection = false;
canvas.forEachObject((o) => o.selectable = o.evented = false);
this._width = props.lineWidth;
this._color = props.lineColor;
}
doMouseDown(o) {
this.isDown = true;
let canvas = this._canvas;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
this.line = new fabric.Line(points, {
strokeWidth: this._width,
fill: this._color,
stroke: this._color,
originX: 'center',
originY: 'center',
selectable: false,
evented: false
});
this.head = new fabric.Triangle({
fill: this._color,
left: pointer.x,
top: pointer.y,
originX: 'center',
originY: 'center',
height: 3 * this._width,
width: 3 * this._width,
selectable: false,
evented: false,
angle: 90
});
canvas.add(this.line);
canvas.add(this.head);
}
doMouseMove(o) {
if (!this.isDown) return;
let canvas = this._canvas;
var pointer = canvas.getPointer(o.e);
this.line.set({ x2: pointer.x, y2: pointer.y });
this.line.setCoords();
let x_delta = pointer.x - this.line.x1;
let y_delta = pointer.y - this.line.y1;
this.head.set({
left: pointer.x,
top: pointer.y,
angle: 90 + Math.atan2(y_delta, x_delta) * 180/Math.PI
});
canvas.renderAll();
}
doMouseUp(o) {
this.isDown = false;
let canvas = this._canvas;
canvas.remove(this.line);
canvas.remove(this.head);
let arrow = new fabric.Group([this.line, this.head]);
canvas.add(arrow);
}
doMouseOut(o) {
this.isDown = false;
}
}
export default Arrow;