feat: 完善graphics接口

src/core/render/preset/graphics.ts

@@ -25,6 +25,8 @@ interface IGraphicProperty extends ILineProperty {
     fill: CanvasStyle;
     /** 描边样式 */
     stroke: CanvasStyle;
+    /** 填充算法 */
+    fillRule: CanvasFillRule;
 }
 
 export const enum GraphicMode {
@@ -49,6 +51,7 @@ export abstract class GraphicItemBase
     lineJoin: CanvasLineJoin = 'bevel';
     lineCap: CanvasLineCap = 'butt';
     miterLimit: number = 10;
+    fillRule: CanvasFillRule = 'nonzero';
 
     /**
      * 设置描边绘制的信息
@@ -101,11 +104,28 @@ export class Rect extends GraphicItemBase {
 }
 
 export class Circle extends GraphicItemBase {
+    radius: number = 10;
+    start: number = 0;
+    end: number = Math.PI * 2;
+
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
     ): void {}
 
+    /**
+     * 设置圆的半径
+     * @param radius 半径
+     */
+    setRadius(radius: number) {}
+
+    /**
+     * 设置圆的起始与终止角度
+     * @param start 起始角度
+     * @param end 终止角度
+     */
+    setAngle(start: number, end: number) {}
+
     patchProp(
         key: string,
         prevValue: any,
@@ -120,11 +140,30 @@ export class Circle extends GraphicItemBase {
 }
 
 export class Ellipse extends GraphicItemBase {
+    radiusX: number = 10;
+    radiusY: number = 10;
+    start: number = 0;
+    end: number = Math.PI * 2;
+
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
     ): void {}
 
+    /**
+     * 设置椭圆的横纵轴长度
+     * @param x 横轴长度
+     * @param y 纵轴长度
+     */
+    setRadius(x: number, y: number) {}
+
+    /**
+     * 设置椭圆的起始与终止角度
+     * @param start 起始角度
+     * @param end 终止角度
+     */
+    setAngle(start: number, end: number) {}
+
     patchProp(
         key: string,
         prevValue: any,
@@ -139,11 +178,26 @@ export class Ellipse extends GraphicItemBase {
 }
 
 export class Line extends GraphicItemBase {
+    x1: number = 0;
+    y1: number = 0;
+    x2: number = 0;
+    y2: number = 0;
+
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
     ): void {}
 
+    /**
+     * 设置第一个点的横纵坐标
+     */
+    setPoint1(x: number, y: number) {}
+
+    /**
+     * 设置第二个点的横纵坐标
+     */
+    setPoint2(x: number, y: number) {}
+
     patchProp(
         key: string,
         prevValue: any,
@@ -158,11 +212,40 @@ export class Line extends GraphicItemBase {
 }
 
 export class BezierCurve extends GraphicItemBase {
+    sx: number = 0;
+    sy: number = 0;
+    cp1x: number = 0;
+    cp1y: number = 0;
+    cp2x: number = 0;
+    cp2y: number = 0;
+    ex: number = 0;
+    ey: number = 0;
+
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
     ): void {}
 
+    /**
+     * 设置起始点坐标
+     */
+    setStart(x: number, y: number) {}
+
+    /**
+     * 设置控制点1坐标
+     */
+    setControl1(x: number, y: number) {}
+
+    /**
+     * 设置控制点2坐标
+     */
+    setControl2(x: number, y: number) {}
+
+    /**
+     * 设置终点坐标
+     */
+    setEnd(x: number, y: number) {}
+
     patchProp(
         key: string,
         prevValue: any,
@@ -177,11 +260,33 @@ export class BezierCurve extends GraphicItemBase {
 }
 
 export class QuadraticCurve extends GraphicItemBase {
+    sx: number = 0;
+    sy: number = 0;
+    cpx: number = 0;
+    cpy: number = 0;
+    ex: number = 0;
+    ey: number = 0;
+
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
     ): void {}
 
+    /**
+     * 设置起始点坐标
+     */
+    setStart(x: number, y: number) {}
+
+    /**
+     * 设置控制点坐标
+     */
+    setControl(x: number, y: number) {}
+
+    /**
+     * 设置终点坐标
+     */
+    setEnd(x: number, y: number) {}
+
     patchProp(
         key: string,
         prevValue: any,
@@ -204,6 +309,19 @@ export class Path extends GraphicItemBase {
         transform: Transform
     ): void {}
 
+    /**
+     * 获取当前路径
+     */
+    getPath() {
+        return this.path;
+    }
+
+    /**
+     * 为路径添加路径
+     * @param path 要添加的路径
+     */
+    addPath(path: Path2D) {}
+
     patchProp(
         key: string,
         prevValue: any,