-
Notifications
You must be signed in to change notification settings - Fork 0
/
mask.js
77 lines (69 loc) · 2 KB
/
mask.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function cornerObj(width, height) {
return {
topLeft: [0, 0],
topRight: [width, 0],
bottomLeft: [0, height ],
bottomRight: [width, height],
}
}
function bottomLeft(ctx, width, height, radius) {
const { bottomLeft, bottomRight, topLeft } = cornerObj(width, height)
ctx.moveTo(...topLeft)
ctx.arcTo(...bottomLeft, ...bottomRight, radius)
ctx.lineTo(...bottomLeft)
ctx.lineTo(...topLeft)
}
function bottomRight(ctx, width, height, radius) {
const { bottomLeft, bottomRight, topRight } = cornerObj(width, height)
ctx.moveTo(...topRight)
ctx.arcTo(...bottomRight, ...bottomLeft, radius)
ctx.lineTo(...bottomRight)
ctx.lineTo(...topRight)
}
function topLeft(ctx, width, height, radius) {
const { bottomLeft, topLeft, topRight } = cornerObj(width, height)
ctx.moveTo(...bottomLeft)
ctx.arcTo(...topLeft, ...topRight, radius)
ctx.lineTo(...topLeft)
ctx.lineTo(...bottomLeft)
}
function topRight(ctx, width, height, radius) {
const { bottomRight, topLeft, topRight } = cornerObj(width, height)
ctx.moveTo(...bottomRight)
ctx.arcTo(...topRight, ...topLeft, radius)
ctx.lineTo(...topRight)
ctx.lineTo(...bottomRight)
}
registerPaint('inverse-radius', class {
static get inputProperties() {
return [
'--inverse-radius',
'--inverse-radius-direction'
]
}
paint(ctx, sizes, props) {
const height = sizes.height
const width = sizes.width
const radius = parseInt(props.get('--inverse-radius').toString());
const direction = props.get('--inverse-radius-direction').toString()
ctx.beginPath()
ctx.lineWidth = 0
switch (direction) {
case 'top-left':
topLeft(ctx, width, height, radius)
break
case 'top-right':
topRight(ctx, width, height, radius)
break
case 'bottom-left':
bottomLeft(ctx, width, height, radius)
break
case 'bottom-right':
bottomRight(ctx, width, height, radius)
break
}
ctx.fill()
ctx.stroke()
ctx.closePath()
}
})