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
|
const drawSquircle = (ctx, geom, radius, smooth, lineWidth, color) => {
const defaultFill = color;
const lineWidthOffset = lineWidth / 2;
// OPEN LEFT-TOP CORNER
ctx.beginPath();
ctx.lineTo(radius, lineWidthOffset);
// TOP-RIGHT CORNER
ctx.lineTo(geom.width - radius, lineWidthOffset);
ctx.bezierCurveTo(
geom.width - radius / smooth,
lineWidthOffset, // first bezier point
geom.width - lineWidthOffset,
radius / smooth, // second bezier point
geom.width - lineWidthOffset,
radius // last connect point
);
// BOTTOM-RIGHT CORNER
ctx.lineTo(geom.width - lineWidthOffset, geom.height - radius);
ctx.bezierCurveTo(
geom.width - lineWidthOffset,
geom.height - radius / smooth, // first bezier point
geom.width - radius / smooth,
geom.height - lineWidthOffset, // second bezier point
geom.width - radius,
geom.height - lineWidthOffset // last connect point
);
// BOTTOM-LEFT CORNER
ctx.lineTo(radius, geom.height - lineWidthOffset);
ctx.bezierCurveTo(
radius / smooth,
geom.height - lineWidthOffset, // first bezier point
lineWidthOffset,
geom.height - radius / smooth, // second bezier point
lineWidthOffset,
geom.height - radius // last connect point
);
// CLOSE LEFT-TOP CORNER
ctx.lineTo(lineWidthOffset, radius);
ctx.bezierCurveTo(
lineWidthOffset,
radius / smooth, // first bezier point
radius / smooth,
lineWidthOffset, // second bezier point
radius,
lineWidthOffset // last connect point
);
ctx.closePath();
if (lineWidth) {
// console.log(lineWidth);
ctx.strokeStyle = defaultFill;
ctx.lineWidth = lineWidth;
ctx.stroke();
} else {
ctx.fillStyle = defaultFill;
ctx.fill();
}
};
if (typeof registerPaint !== "undefined") {
class SquircleClass {
static get contextOptions() {
return { alpha: true };
}
static get inputProperties() {
return [
"--squircle-radius",
"--squircle-smooth",
"--squircle-outline",
"--squircle-fill",
"--squircle-ratio",
];
}
paint(ctx, geom, properties) {
const customRatio = properties.get("--squircle-ratio");
const smoothRatio = 10;
const distanceRatio = parseFloat(customRatio)
? parseFloat(customRatio)
: 1.8;
const squircleSmooth = parseFloat(
properties.get("--squircle-smooth") * smoothRatio
);
const squircleRadius =
parseInt(properties.get("--squircle-radius"), 10) * distanceRatio;
const squrcleOutline = parseFloat(
properties.get("--squircle-outline"),
10
);
const squrcleColor = properties
.get("--squircle-fill")
.toString()
.replace(/\s/g, "");
const isSmooth = () => {
if (typeof properties.get("--squircle-smooth")[0] !== "undefined") {
if (squircleSmooth === 0) {
return 1;
}
return squircleSmooth;
} else {
return 10;
}
};
const isOutline = () => {
if (squrcleOutline) {
return squrcleOutline;
} else {
return 0;
}
};
const isColor = () => {
if (squrcleColor) {
return squrcleColor;
} else {
return "#f45";
}
};
if (squircleRadius < geom.width / 2 && squircleRadius < geom.height / 2) {
drawSquircle(
ctx,
geom,
squircleRadius,
isSmooth(),
isOutline(),
isColor()
);
} else {
drawSquircle(
ctx,
geom,
Math.min(geom.width / 2, geom.height / 2),
isSmooth(),
isOutline(),
isColor()
);
}
}
}
// eslint-disable-next-line no-undef
registerPaint("squircle", SquircleClass);
}
|
