From 20faa0d4b954ecf721822974847801c81dee1ddc Mon Sep 17 00:00:00 2001
From: unanmed <1319491857@qq.com>
Date: Thu, 28 Nov 2024 19:50:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84graphics=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/render/preset/graphics.ts | 118 +++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)

diff --git a/src/core/render/preset/graphics.ts b/src/core/render/preset/graphics.ts
index b1948e8..997e881 100644
--- a/src/core/render/preset/graphics.ts
+++ b/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,