Droplet.ts
1.04 KB
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
/**
* 水滴形状
*/
import Path, { PathProps } from '../Path';
export class DropletShape {
cx = 0
cy = 0
width = 0
height = 0
}
export interface DropletProps extends PathProps {
shape?: Partial<DropletShape>
}
class Droplet extends Path<DropletProps> {
shape: DropletShape
constructor(opts?: DropletProps) {
super(opts);
}
getDefaultShape() {
return new DropletShape();
}
buildPath(ctx: CanvasRenderingContext2D, shape: DropletShape) {
const x = shape.cx;
const y = shape.cy;
const a = shape.width;
const b = shape.height;
ctx.moveTo(x, y + a);
ctx.bezierCurveTo(
x + a,
y + a,
x + a * 3 / 2,
y - a / 3,
x,
y - b
);
ctx.bezierCurveTo(
x - a * 3 / 2,
y - a / 3,
x - a,
y + a,
x,
y + a
);
ctx.closePath();
}
}
Droplet.prototype.type = 'droplet';
export default Droplet;