heitu 1.0.2 → 1.0.3

package/dist/canvas/constant/index.d.ts

@@ -1,12 +0,0 @@
-export type EventType = 'mouseleave' | 'mouseenter' | 'mousemove' | 'mousedown' | 'mouseup' | 'click';
-export type OnEventType = `on${EventType}`;
-export declare const dpr: number;
-export type EventParameter = {
-    target: any;
-    x: number;
-    y: number;
-    dx?: number;
-    dy?: number;
-    nativeEvent?: MouseEvent;
-};
-export declare const eventStageList: OnEventType[];

package/dist/canvas/constant/index.js

@@ -1,4 +1,21 @@
 // import { IShape } from '../type';
+// export type EventType = 'mouseleave' | 'mouseenter' | 'mousemove' | 'mousedown' | 'mouseup' | 'click'
+// export type OnEventType = `on${EventType}`
 
-export var dpr = window.devicePixelRatio;
-export var eventStageList = ['onmouseleave', 'onmouseenter', 'onmousemove', 'onmousedown', 'onmouseup', 'onclick'];
+// export const dpr = window.devicePixelRatio;
+// export type EventParameter = {
+//   target: any;
+//   x: number;
+//   y: number;
+//   dx?: number;
+//   dy?: number;
+//   nativeEvent?: MouseEvent;
+// };
+// export const eventStageList: OnEventType[] = [
+//   'onmouseleave',
+//   'onmouseenter',
+//   'onmousemove',
+//   'onmousedown',
+//   'onmouseup',
+//   'onclick',
+// ];

package/dist/canvas/element/circle.d.ts

@@ -0,0 +1,15 @@
+export interface ICircle {
+    x?: number;
+    y?: number;
+    radius?: number;
+    lineWidth?: number;
+    fillStyle?: string;
+    strokeStyle?: string;
+    arc?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    innerRadius?: number;
+    border: 0 | 1 | 2;
+}
+declare const Circle: (props: ICircle) => null;
+export default Circle;

package/dist/canvas/element/{Circle.js → circle.js}

@@ -4,35 +4,28 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useContext, useLayoutEffect, useRef } from 'react';
-import { Circle as _Circle } from "../instance/circle";
-import { Context } from "../store";
-import { usePropertyChange } from "../utils/hooks/usePropertyChange";
-// import { usePropertyChange } from '../utils/hooks/usePropertyChange';
-
-var defaultProps = {
+import { useLayoutEffect, useRef } from 'react';
+import { v4 } from 'uuid';
+import { Store } from "../store";
+var defaultCircledata = {
   x: 10,
   y: 10,
   radius: 8,
-  fillStyle: 'black'
+  fillStyle: 'black',
+  strokeStyle: '',
+  lineWidth: 1,
+  startAngle: 0,
+  endAngle: 360,
+  border: 0,
+  innerRadius: 0
 };
 var Circle = function Circle(props) {
-  var mergeProps = _objectSpread(_objectSpread({}, defaultProps), props);
-  var parent = useContext(Context);
-  var circle = new _Circle(mergeProps);
-  var circleRef = useRef(circle);
-  usePropertyChange(mergeProps, 'radius', circleRef.current);
-  usePropertyChange(mergeProps, 'x', circleRef.current);
-  usePropertyChange(mergeProps, 'y', circleRef.current);
-  usePropertyChange(mergeProps, 'fillStyle', circleRef.current);
-  usePropertyChange(mergeProps, 'strokeStyle', circleRef.current);
-  usePropertyChange(mergeProps, 'lineWidth', circleRef.current);
+  var _Store$useContainer = Store.useContainer(),
+    appendChild = _Store$useContainer.common.appendChild;
+  var ref = useRef(v4());
   useLayoutEffect(function () {
-    parent.appendChild(circleRef.current);
-    return function () {
-      // rectRef.current.remove();
-    };
-  }, []);
+    appendChild('Circle', _objectSpread(_objectSpread({}, defaultCircledata), props), ref.current);
+  }, [props]);
   return null;
 };
 export default Circle;

package/dist/canvas/element/line.d.ts

@@ -0,0 +1,14 @@
+export interface ILine {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    cornerRadius?: number;
+    fillStyle?: string;
+    lineWidth?: number;
+    strokeStyle?: string;
+    border: 0 | 1 | 2;
+    shortLength?: number;
+}
+declare const Line: (props: ILine) => null;
+export default Line;

package/dist/canvas/element/{Line.js → line.js}

@@ -4,42 +4,29 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useContext, useLayoutEffect, useRef } from 'react';
-import { Line as _Line } from "../instance/line";
-import { Context } from "../store";
-// import { usePropertyChange } from '../utils/hooks/usePropertyChange';
-
-var defaultProps = {
-  // @ts-ignore
-  points: [10, 10, 100, 100],
+import { useLayoutEffect, useRef } from 'react';
+import { v4 } from 'uuid';
+import { Store } from "../store";
+var defaultLinedata = {
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 100,
+  fillStyle: 'black',
   strokeStyle: 'black',
-  start: {
-    x: 0,
-    y: 0
-  },
-  end: {
-    x: 100,
-    y: 100
-  }
+  cornerRadius: 0,
+  lineWidth: 1,
+  border: 0
 };
 var Line = function Line(props) {
-  var mergeProps = _objectSpread(_objectSpread({}, defaultProps), props);
-  var parent = useContext(Context);
-  var line = new _Line(mergeProps);
-  var lineRef = useRef(line);
-
-  // usePropertyChange(mergeProps, 'width', rectRef.current);
-  // usePropertyChange(mergeProps, 'height', rectRef.current);
-  // usePropertyChange(mergeProps, 'x', rectRef.current);
-  // usePropertyChange(mergeProps, 'y', rectRef.current);
-  // usePropertyChange(mergeProps, 'fillStyle', rectRef.current);
-
+  var _Store$useContainer = Store.useContainer(),
+    appendChild = _Store$useContainer.common.appendChild;
+  var ref = useRef(v4());
   useLayoutEffect(function () {
-    parent.appendChild(lineRef.current);
-    return function () {
-      // rectRef.current.remove();
-    };
-  }, []);
+    appendChild('Line', _objectSpread(_objectSpread(_objectSpread({}, defaultLinedata), props), {}, {
+      shortLength: props.shortLength ? props.shortLength : props.width
+    }), ref.current);
+  }, [props]);
   return null;
 };
 export default Line;

package/dist/canvas/element/rect.d.ts

@@ -0,0 +1,14 @@
+export interface IRect {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    cornerRadius?: number;
+    fillStyle?: string;
+    lineWidth?: number;
+    strokeStyle?: string;
+    border: 0 | 1 | 2;
+    shortLength?: number;
+}
+declare const Rect: (props: IRect) => null;
+export default Rect;

package/dist/canvas/element/{Rect.js → rect.js}

@@ -4,34 +4,29 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useContext, useLayoutEffect, useRef } from 'react';
-import { Rect as _Rect } from "../instance/rect";
-import { Context } from "../store";
-import { usePropertyChange } from "../utils/hooks/usePropertyChange";
-var defaultProps = {
+import { useLayoutEffect, useRef } from 'react';
+import { v4 } from 'uuid';
+import { Store } from "../store";
+var defaultRectdata = {
   x: 0,
   y: 0,
   width: 100,
   height: 100,
-  fillStyle: 'black'
+  fillStyle: 'black',
+  strokeStyle: 'black',
+  cornerRadius: 0,
+  lineWidth: 1,
+  border: 0
 };
 var Rect = function Rect(props) {
-  var mergeProps = _objectSpread(_objectSpread({}, defaultProps), props);
-  var parent = useContext(Context);
-  var rect = new _Rect(mergeProps);
-  var rectRef = useRef(rect);
-  console.log(mergeProps.fillStyle);
-  usePropertyChange(mergeProps, 'width', rectRef.current);
-  usePropertyChange(mergeProps, 'height', rectRef.current);
-  usePropertyChange(mergeProps, 'x', rectRef.current);
-  usePropertyChange(mergeProps, 'y', rectRef.current);
-  usePropertyChange(mergeProps, 'fillStyle', rectRef.current);
+  var _Store$useContainer = Store.useContainer(),
+    appendChild = _Store$useContainer.common.appendChild;
+  var ref = useRef(v4());
   useLayoutEffect(function () {
-    parent.appendChild(rectRef.current);
-    return function () {
-      // rectRef.current.remove();
-    };
-  }, []);
+    appendChild('Rect', _objectSpread(_objectSpread(_objectSpread({}, defaultRectdata), props), {}, {
+      shortLength: props.shortLength ? props.shortLength : props.width
+    }), ref.current);
+  }, [props]);
   return null;
 };
 export default Rect;

package/dist/canvas/element/{Stage.d.ts → stage/index.d.ts}

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-interface StageProps extends CSSProperties {
+export interface StageProps extends CSSProperties {
     children?: any;
     width?: number | string;
     height?: number;
@@ -7,5 +7,5 @@ interface StageProps extends CSSProperties {
     background?: string;
     margin?: string | number;
 }
-declare const Stage: (props: StageProps) => React.JSX.Element;
-export default Stage;
+declare const ContextStage: (props: StageProps) => React.JSX.Element;
+export default ContextStage;

package/dist/canvas/element/stage/index.js

@@ -0,0 +1,8 @@
+import { Store } from "../../store";
+import React, { useEffect } from 'react';
+import Stage from "./stage";
+var ContextStage = function ContextStage(props) {
+  useEffect(function () {}, []);
+  return /*#__PURE__*/React.createElement(Store.Provider, null, /*#__PURE__*/React.createElement(Stage, props), props.children);
+};
+export default ContextStage;

package/dist/canvas/element/stage/stage.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StageProps } from '.';
+declare const Stage: (props: StageProps) => React.JSX.Element;
+export default Stage;

package/dist/canvas/element/{Stage.js → stage/stage.js}

@@ -5,8 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useLayoutEffect, useRef } from 'react';
-import { Stage as _Stage } from "../instance/stage";
-import { Context } from "../store";
+import { Store } from "../../store";
 var defaultProps = {
   width: '100%',
   height: 400,
@@ -14,27 +13,16 @@ var defaultProps = {
   margin: '0 auto'
 };
 var Stage = function Stage(props) {
-  var containerRef = useRef(null);
-  var stageRef = useRef(new _Stage());
+  var store = Store.useContainer();
+  var ref = useRef(null);
   var mergeProps = _objectSpread(_objectSpread({}, defaultProps), props);
+  var initStage = store.stage.initStage;
   useLayoutEffect(function () {
-    stageRef.current.mount({
-      container: containerRef.current
-    });
+    if (ref.current) initStage(ref.current);
   }, []);
-  // 递归 遍历子元素 获取 tag name
-  // React.Children.forEach(props.children, (child) => {
-  //   if (React.isValidElement(child)) {
-  //     const tagName =
-  //       typeof child.type === 'string' ? child.type : child.type.name;
-  //     console.log('Child tag name:', tagName);
-  //   }
-  // });
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: stageRef.current
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
     style: mergeProps
-  }), props.children);
+  });
 };
 export default Stage;

package/dist/canvas/element/text.d.ts

@@ -0,0 +1,11 @@
+export interface IText {
+    x?: number;
+    y?: number;
+    content?: string;
+    fillStyle?: string;
+    fontSize?: number;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+}
+declare const Text: (props: IText) => null;
+export default Text;

package/dist/canvas/element/text.js

@@ -0,0 +1,25 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useLayoutEffect, useRef } from 'react';
+import { v4 } from 'uuid';
+import { Store } from "../store";
+var defaultTextdata = {
+  fillStyle: '#333',
+  fontSize: 14,
+  textAlign: 'left',
+  textBaseline: 'top'
+};
+var Text = function Text(props) {
+  var _Store$useContainer = Store.useContainer(),
+    appendChild = _Store$useContainer.common.appendChild;
+  var ref = useRef(v4());
+  useLayoutEffect(function () {
+    appendChild('Text', _objectSpread(_objectSpread({}, defaultTextdata), props), ref.current);
+  }, [props]);
+  return null;
+};
+export default Text;

package/dist/canvas/index.d.ts

@@ -1,7 +1,6 @@
-import Circle from './element/Circle';
-import Line from './element/Line';
-import Rect from './element/Rect';
-import Sector from './element/Sector';
-import Stage from './element/Stage';
-import Trapezoid from './element/Trapezoid';
-export { Circle, Line, Rect, Sector, Stage, Trapezoid };
+import Circle from './element/circle';
+import Line from './element/line';
+import Rect from './element/rect';
+import Stage from './element/stage';
+import Text from './element/text';
+export { Circle, Line, Rect, Stage, Text };

package/dist/canvas/index.js

@@ -1,7 +1,6 @@
-import Circle from "./element/Circle";
-import Line from "./element/Line";
-import Rect from "./element/Rect";
-import Sector from "./element/Sector";
-import Stage from "./element/Stage";
-import Trapezoid from "./element/Trapezoid";
-export { Circle, Line, Rect, Sector, Stage, Trapezoid };
+import Circle from "./element/circle";
+import Line from "./element/line";
+import Rect from "./element/rect";
+import Stage from "./element/stage";
+import Text from "./element/text";
+export { Circle, Line, Rect, Stage, Text };

package/dist/canvas/store/index.d.ts

@@ -1,3 +1,21 @@
-/// <reference types="react" />
-import { Stage as _Stage } from '../instance/stage';
-export declare const Context: import("react").Context<_Stage>;
+import { IShape, IShapeType } from '../type';
+interface Child {
+    id: string;
+    data: IShape;
+    type: IShapeType;
+}
+export interface StageState {
+    ctx: CanvasRenderingContext2D | null;
+    children: Child[] | [];
+    element: HTMLCanvasElement | null;
+}
+export declare const Store: import("unstated-next").Container<{
+    stage: {
+        initStage: (canvasContainer: HTMLDivElement) => void;
+        refreshDraw: () => void;
+    };
+    common: {
+        appendChild: (type: IShapeType, data: IShape, id: string) => void;
+    };
+}, void>;
+export {};

package/dist/canvas/store/index.js

@@ -1,2 +1,66 @@
-import { createContext } from 'react';
-export var Context = /*#__PURE__*/createContext({});
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useRef } from 'react';
+import { createContainer } from 'unstated-next';
+import { drawShape } from "../utils/drawShape";
+import { createCanvas } from "../utils/stage";
+var useStore = function useStore() {
+  var stageRef = useRef({
+    children: [],
+    ctx: null,
+    element: null
+  });
+  var initStage = function initStage(canvasContainer) {
+    var offsetWidth = canvasContainer.offsetWidth,
+      offsetHeight = canvasContainer.offsetHeight;
+    var _createCanvas = createCanvas(offsetWidth, offsetHeight),
+      canvasElement = _createCanvas.canvasElement,
+      ctx = _createCanvas.ctx;
+    canvasContainer.append(canvasElement);
+    stageRef.current.ctx = ctx;
+    stageRef.current.element = canvasElement;
+  };
+  var appendChild = function appendChild(type, data, id) {
+    if (!stageRef.current.ctx || !stageRef.current.element) return;
+    var children = stageRef.current.children;
+    var curChildren = _toConsumableArray(children);
+    if (children.some(function (child) {
+      return child.id === id;
+    })) {
+      curChildren = children.map(function (child) {
+        if (child.id === id) {
+          return {
+            id: id,
+            data: data,
+            type: type
+          };
+        }
+        return child;
+      });
+    } else {
+      curChildren.push({
+        id: id,
+        data: data,
+        type: type
+      });
+    }
+    stageRef.current.children = curChildren;
+    drawShape(stageRef.current);
+  };
+  var refreshDraw = function refreshDraw() {};
+  return {
+    stage: {
+      initStage: initStage,
+      // clearStage,
+      refreshDraw: refreshDraw
+    },
+    common: {
+      appendChild: appendChild
+    }
+  };
+};
+export var Store = createContainer(useStore);

package/dist/canvas/type.d.ts

@@ -1,7 +1,20 @@
 // import { BoxHidden, Circle, Group, Line, Rect, Text } from './shape'
 
-// export type IShape = Group | BoxHidden | Circle | Rect | Line | Text
-export type IShapeType = 'Line' | 'Rect' | 'Trapezoid' | 'Circle' | 'Text' | 'Group' | 'BoxHidden' | 'Stage'
+import { ICircle } from './element/circle';
+import { IRect } from './element/rect';
+import { IText } from './element/text';
+
+export type IShape = IRect | ICircle | IText;
+// |Group | BoxHidden | Circle | Line | Text;
+export type IShapeType =
+  | 'Line'
+  | 'Rect'
+  | 'Trapezoid'
+  | 'Circle'
+  | 'Text'
+  | 'Group'
+  | 'BoxHidden'
+  | 'Stage';
 
 export type ICursor =
   | 'url'
@@ -20,6 +33,6 @@ export type ICursor =
   | 'w-resize'
   | 'text'
   | 'wait'
-  | 'help'
+  | 'help';
 
-export type ICoord = { x: number; y: number }
+export type ICoord = { x: number; y: number };

package/dist/canvas/utils/constant.d.ts

@@ -0,0 +1 @@
+export declare const dpr: number;

package/dist/canvas/utils/constant.js

@@ -0,0 +1 @@
+export var dpr = window.devicePixelRatio;

package/dist/canvas/utils/{renderShape/renderCircle.d.ts → drawShape/circle.d.ts}

@@ -1,8 +1,7 @@
-import { Circle } from "../../instance/circle";
+import { ICircle } from "../../element/circle";
 export declare function deg2rad(deg: number): number;
-export declare function rad2deg(radian: number): number;
 export declare function getPointOnArc(x0: number, y0: number, r: number, deg: number): {
     x: number;
     y: number;
 };
-export declare function setCirclePath2D(elementItem: Circle): void;
+export declare const drawCircle: (ctx: CanvasRenderingContext2D, props: ICircle) => void;

package/dist/canvas/utils/drawShape/circle.js

@@ -0,0 +1,80 @@
+// 角度转弧度
+export function deg2rad(deg) {
+  return deg * Math.PI / 180;
+}
+// 获取圆弧上的点 圆心 半径 角度: 60°
+export function getPointOnArc(x0, y0, r, deg) {
+  var alpha = deg2rad(deg);
+  var x = x0 + r * Math.cos(alpha); // Math.cos 传入弧度
+  var y = y0 + r * Math.sin(alpha);
+  return {
+    x: x,
+    y: y
+  };
+}
+var calcRingD = function calcRingD(outerRadius, innerRadius, startAngle, endAngle, centerX, centerY, isWholeArc) {
+  function calcWholeRingD() {
+    var outerM_y = centerY - outerRadius;
+    var outerM = "M ".concat(centerX, " ").concat(outerM_y);
+    var outerA = "A ".concat(outerRadius, " ").concat(outerRadius, " 0 1 1 ").concat(centerX - 0.01, " ").concat(outerM_y);
+    var innerM_y = centerY - innerRadius;
+    var innerM = "M ".concat(centerX, " ").concat(innerM_y);
+    var innerA = "A ".concat(innerRadius, " ").concat(innerRadius, " 0 1 0 ").concat(centerX + 0.01, " ").concat(innerM_y);
+    return "".concat(outerM, " ").concat(outerA, " ").concat(innerM, " ").concat(innerA, " Z");
+  }
+  function calcRingSectorD() {
+    var outerStart = getPointOnArc(centerX, centerY, outerRadius, startAngle);
+    var outerEnd = getPointOnArc(centerX, centerY, outerRadius, endAngle);
+    var largeArcFlag = endAngle - startAngle >= 180 ? 1 : 0;
+    var outerM = "M ".concat(outerStart.x, " ").concat(outerStart.y);
+    var outerA = "A ".concat(outerRadius, " ").concat(outerRadius, " 0 ").concat(largeArcFlag, " 1 ").concat(outerEnd.x, " ").concat(outerEnd.y);
+    var innerStart = getPointOnArc(centerX, centerY, innerRadius, startAngle);
+    var innerEnd = getPointOnArc(centerX, centerY, innerRadius, endAngle);
+    var moveL = "L".concat(innerEnd.x, " ").concat(innerEnd.y);
+    var innerA = "A ".concat(innerRadius, " ").concat(innerRadius, " 0 ").concat(largeArcFlag, " 0 ").concat(innerStart.x, " ").concat(innerStart.y);
+    return "".concat(outerM, " ").concat(outerA, " ").concat(moveL, " ").concat(innerA, " Z");
+  }
+  return isWholeArc ? calcWholeRingD() : calcRingSectorD();
+};
+export var drawCircle = function drawCircle(ctx, props) {
+  var _props$x = props.x,
+    x = _props$x === void 0 ? 10 : _props$x,
+    _props$y = props.y,
+    y = _props$y === void 0 ? 10 : _props$y,
+    _props$radius = props.radius,
+    radius = _props$radius === void 0 ? 10 : _props$radius,
+    _props$startAngle = props.startAngle,
+    startAngle = _props$startAngle === void 0 ? 0 : _props$startAngle,
+    _props$endAngle = props.endAngle,
+    endAngle = _props$endAngle === void 0 ? 360 : _props$endAngle,
+    fillStyle = props.fillStyle,
+    strokeStyle = props.strokeStyle,
+    _props$lineWidth = props.lineWidth,
+    lineWidth = _props$lineWidth === void 0 ? 1 : _props$lineWidth,
+    _props$innerRadius = props.innerRadius,
+    innerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
+    border = props.border;
+  var isWholeArc = startAngle === 0 && endAngle === 360; // 是否是整圆
+  if (border === 0) {
+    var circlePath = new Path2D();
+    circlePath.arc(x, y, radius, startAngle, endAngle);
+    // 设置绘制样式
+    if (fillStyle) ctx.fillStyle = fillStyle; // 填充颜色
+    if (lineWidth) ctx.lineWidth = lineWidth; // 描边宽度
+    ctx.fill(circlePath);
+  } else if (border === 1) {
+    var d = calcRingD(radius, innerRadius, startAngle, endAngle, x, y, isWholeArc);
+    var _circlePath = new Path2D(d);
+    ctx.lineWidth = lineWidth;
+    ctx.stroke(_circlePath);
+  } else if (border === 2) {
+    var _d = calcRingD(radius, innerRadius, startAngle, endAngle, x, y, isWholeArc);
+    var _circlePath2 = new Path2D(_d);
+    // 设置绘制样式
+    if (fillStyle) ctx.fillStyle = fillStyle; // 填充颜色
+    if (strokeStyle) ctx.strokeStyle = strokeStyle; // 描边颜色
+    if (lineWidth) ctx.lineWidth = lineWidth; // 描边宽度
+    ctx.stroke(_circlePath2);
+    ctx.fill(_circlePath2);
+  }
+};

package/dist/canvas/utils/drawShape/index.d.ts

@@ -0,0 +1,2 @@
+import { StageState } from "../../store";
+export declare const drawShape: (stageState: StageState) => void;