|
1 | 1 | class SmoothCornersPainter {
|
2 | 2 | static get inputProperties() {
|
3 |
| - return ["--smooth-corners"]; |
| 3 | + return ['--smooth-corners'] |
4 | 4 | }
|
5 | 5 |
|
6 | 6 | superellipse(a, b, nX = 4, nY) {
|
7 |
| - if (Number.isNaN(nX)) nX = 4; |
8 |
| - if (typeof nY === "undefined" || Number.isNaN(nY)) nY = nX; |
9 |
| - if (nX > 100) nX = 100; |
10 |
| - if (nY > 100) nY = 100; |
11 |
| - if (nX < 0.00000000001) nX = 0.00000000001; |
12 |
| - if (nY < 0.00000000001) nY = 0.00000000001; |
13 |
| - |
14 |
| - const nX2 = 2 / nX; |
15 |
| - const nY2 = nY ? 2 / nY : nX2; |
16 |
| - const steps = 360; |
17 |
| - const step = (2 * Math.PI) / steps; |
| 7 | + if (Number.isNaN(nX)) nX = 4 |
| 8 | + if (typeof nY === 'undefined' || Number.isNaN(nY)) nY = nX |
| 9 | + if (nX > 100) nX = 100 |
| 10 | + if (nY > 100) nY = 100 |
| 11 | + if (nX < 0.00000000001) nX = 0.00000000001 |
| 12 | + if (nY < 0.00000000001) nY = 0.00000000001 |
| 13 | + |
| 14 | + const nX2 = 2 / nX |
| 15 | + const nY2 = nY ? 2 / nY : nX2 |
| 16 | + const steps = 360 |
| 17 | + const step = (2 * Math.PI) / steps |
18 | 18 | const points = t => {
|
19 |
| - const cosT = Math.cos(t); |
20 |
| - const sinT = Math.sin(t); |
| 19 | + const cosT = Math.cos(t) |
| 20 | + const sinT = Math.sin(t) |
21 | 21 | return {
|
22 | 22 | x: Math.abs(cosT) ** nX2 * a * Math.sign(cosT),
|
23 | 23 | y: Math.abs(sinT) ** nY2 * b * Math.sign(sinT)
|
24 |
| - }; |
25 |
| - }; |
26 |
| - return Array.from({ length: steps }, (_, i) => points(i * step)); |
| 24 | + } |
| 25 | + } |
| 26 | + return Array.from({ length: steps }, (_, i) => points(i * step)) |
27 | 27 | }
|
28 | 28 |
|
29 | 29 | paint(ctx, geom, properties) {
|
30 | 30 | const [nX, nY] = properties
|
31 |
| - .get("--smooth-corners") |
| 31 | + .get('--smooth-corners') |
32 | 32 | .toString()
|
33 |
| - .replace(/ /g, "") |
34 |
| - .split(","); |
| 33 | + .replace(/ /g, '') |
| 34 | + .split(',') |
35 | 35 |
|
36 |
| - const width = geom.width / 2; |
37 |
| - const height = geom.height / 2; |
| 36 | + const width = geom.width / 2 |
| 37 | + const height = geom.height / 2 |
38 | 38 | const smooth = this.superellipse(
|
39 | 39 | width,
|
40 | 40 | height,
|
41 | 41 | parseFloat(nX),
|
42 | 42 | parseFloat(nY)
|
43 |
| - ); |
| 43 | + ) |
44 | 44 |
|
45 |
| - ctx.fillStyle = "#000"; |
46 |
| - ctx.setTransform(1, 0, 0, 1, width, height); |
47 |
| - ctx.beginPath(); |
| 45 | + ctx.fillStyle = '#000' |
| 46 | + ctx.setTransform(1, 0, 0, 1, width, height) |
| 47 | + ctx.beginPath() |
48 | 48 |
|
49 | 49 | for (let i = 0; i < smooth.length; i++) {
|
50 |
| - const { x, y } = smooth[i]; |
51 |
| - if (i === 0) ctx.moveTo(x, y); |
52 |
| - else ctx.lineTo(x, y); |
| 50 | + const { x, y } = smooth[i] |
| 51 | + if (i === 0) ctx.moveTo(x, y) |
| 52 | + else ctx.lineTo(x, y) |
53 | 53 | }
|
54 | 54 |
|
55 |
| - ctx.closePath(); |
56 |
| - ctx.fill(); |
| 55 | + ctx.closePath() |
| 56 | + ctx.fill() |
57 | 57 | }
|
58 | 58 | }
|
59 | 59 |
|
60 | 60 | // eslint-disable-next-line no-undef
|
61 |
| -registerPaint("smooth-corners", SmoothCornersPainter); |
| 61 | +registerPaint('smooth-corners', SmoothCornersPainter) |
0 commit comments