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;
|
|
