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
/**
* 绘制网格
* @param color 网格颜色
* @param w canvas画布宽
* @param h canvas画布高
* @param pen canvas 画笔
* @param status 默认true，保存画布状态
*/
export function drawGrid(
color: string,
w: number,
h: number,
pen: any,
status = true
) {
const step = 100;
const w_l = w / step;
const h_l = h / step;
if (status) {
pen.save();
}
// 横着的线
for (let i = 0; i <= h_l; i++) {
pen.beginPath();
pen.strokeStyle = color;
pen.moveTo(0, i * step);
pen.lineTo(w, i * step);
pen.stroke();
}
// 竖着的线
for (let i = 0; i <= w_l; i++) {
pen.beginPath();
pen.moveTo(i * step, 0);
pen.lineTo(i * step, h);
pen.stroke();
}
if (status) {
pen.restore();
}
}
/**
* canvas旋转中心偏移值
* @param width canvas宽
* @param center 中心坐标点 center:{x:100,y:100}
* @param arc 旋转的弧度值
*/
export function rotateOriginOffset(
width: number,
center: { x: number; y: number },
arc: any
) {
const r1 = width - center.x;
const xRes1 = Math.cos(arc) * r1;
const yRes1 = Math.sin(arc) * r1;
const x1 = center.x + xRes1;
const y1 = center.y + yRes1;
const x0 = width;
const y0 = center.y;
const c0 = Math.sqrt(Math.pow(x0, 2) + Math.pow(y0, 2));
const arc0 = Math.atan2(y0, x0);
const arc_0 = arc0 + arc;
const y2 = Math.sin(arc_0) * c0;
const x2 = y2 / Math.tan(arc_0);
const xLength = x1 - x2;
const yLength = y1 - y2;
return {
x: xLength,
y: yLength,
};
}
/**
* 角度值转弧度值
* @param degree 角度值
*/
export function toArc(degree: number) {
return (degree * Math.PI) / 180;
}