-
Notifications
You must be signed in to change notification settings - Fork 8
/
UI.js
59 lines (44 loc) · 1.45 KB
/
UI.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
class UI {
constructor(ctx, canvas) {
this.ctx = ctx;
this.canvas = canvas;
this.scale = 1.0;
this.xOffset = 0;
this.yOffset = 0;
this.outline = 0;
this.width = globalW;
this.height = globalH;
}
scaleX(x) {
return this.xOffset + this.outline + x * (800 / globalW);
}
scaleY(y) {
return this.yOffset + this.outline + y * (600 / globalH);
}
drawPicker(x, y) {
this.ctx.beginPath();
this.ctx.arc(this.scaleX(x), this.scaleY(y), 5, 0, 2 * Math.PI, false);
this.ctx.fillStyle = 'red';
this.ctx.fill();
}
drawAligmentLinesVertical(x, p) {
this.ctx.beginPath();
p += 2;
this.ctx.strokeStyle = "#ff0000";
this.ctx.setLineDash([15, 15, 12, 12, 10, 10, 8, 8, 6, 6, 4, 4].slice(p * 2 - 2, p * 2));
this.ctx.moveTo(this.scaleX(x), this.scaleY(0));
this.ctx.lineTo(this.scaleX(x), this.scaleY(globalH));
this.ctx.stroke();
this.ctx.setLineDash([]);
}
drawAligmentLinesHorizontal(y, p) {
this.ctx.beginPath();
p += 2;
this.ctx.strokeStyle = "#ff0000";
this.ctx.setLineDash([15, 15, 12, 12, 10, 10, 8, 8, 6, 6, 4, 4].slice(p * 2 - 2, p * 2));
this.ctx.moveTo(this.scaleX(0), this.scaleY(y));
this.ctx.lineTo(this.scaleX(globalW), this.scaleY(y));
this.ctx.stroke();
this.ctx.setLineDash([]);
}
}