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
| import PathProxy from '../../core/PathProxy';
|
| export function buildPath(ctx: CanvasRenderingContext2D | PathProxy, shape: {
| x: number
| y: number
| width: number
| height: number
| r?: number | number[]
| }) {
| let x = shape.x;
| let y = shape.y;
| let width = shape.width;
| let height = shape.height;
| let r = shape.r;
| let r1;
| let r2;
| let r3;
| let r4;
|
| // Convert width and height to positive for better borderRadius
| if (width < 0) {
| x = x + width;
| width = -width;
| }
| if (height < 0) {
| y = y + height;
| height = -height;
| }
|
| if (typeof r === 'number') {
| r1 = r2 = r3 = r4 = r;
| }
| else if (r instanceof Array) {
| if (r.length === 1) {
| r1 = r2 = r3 = r4 = r[0];
| }
| else if (r.length === 2) {
| r1 = r3 = r[0];
| r2 = r4 = r[1];
| }
| else if (r.length === 3) {
| r1 = r[0];
| r2 = r4 = r[1];
| r3 = r[2];
| }
| else {
| r1 = r[0];
| r2 = r[1];
| r3 = r[2];
| r4 = r[3];
| }
| }
| else {
| r1 = r2 = r3 = r4 = 0;
| }
|
| let total;
| if (r1 + r2 > width) {
| total = r1 + r2;
| r1 *= width / total;
| r2 *= width / total;
| }
| if (r3 + r4 > width) {
| total = r3 + r4;
| r3 *= width / total;
| r4 *= width / total;
| }
| if (r2 + r3 > height) {
| total = r2 + r3;
| r2 *= height / total;
| r3 *= height / total;
| }
| if (r1 + r4 > height) {
| total = r1 + r4;
| r1 *= height / total;
| r4 *= height / total;
| }
| ctx.moveTo(x + r1, y);
| ctx.lineTo(x + width - r2, y);
| r2 !== 0 && ctx.arc(x + width - r2, y + r2, r2, -Math.PI / 2, 0);
| ctx.lineTo(x + width, y + height - r3);
| r3 !== 0 && ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI / 2);
| ctx.lineTo(x + r4, y + height);
| r4 !== 0 && ctx.arc(x + r4, y + height - r4, r4, Math.PI / 2, Math.PI);
| ctx.lineTo(x, y + r1);
| r1 !== 0 && ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
| }
|
|
