'firstSubmit'

mh-two-thousand-and-two

2024-03-25 b8c93990f3fa5e50a8aca16bdc9c2758168aa0fd

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
/**
 * 椭圆形状
 */
 
import Path, { PathProps } from '../Path';
 
export class EllipseShape {
    cx = 0
    cy = 0
    rx = 0
    ry = 0
}
 
export interface EllipseProps extends PathProps {
    shape?: Partial<EllipseShape>
}
class Ellipse extends Path<EllipseProps> {
 
    shape: EllipseShape
 
    constructor(opts?: EllipseProps) {
        super(opts);
    }
 
    getDefaultShape() {
        return new EllipseShape();
    }
 
    buildPath(ctx: CanvasRenderingContext2D, shape: EllipseShape) {
        const k = 0.5522848;
        const x = shape.cx;
        const y = shape.cy;
        const a = shape.rx;
        const b = shape.ry;
        const ox = a * k; // 水平控制点偏移量
        const oy = b * k; // 垂直控制点偏移量
        // 从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
        ctx.moveTo(x - a, y);
        ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
        ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
        ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
        ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
        ctx.closePath();
    }
}
 
Ellipse.prototype.type = 'ellipse';
 
export default Ellipse;