feat: edit ShapeCoreType.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-drawing",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "auto-drawing based zrender",
   "types": "dist/index.d.ts",
   "module": "dist/auto-drawing.esm.js",

src/core/ellipse.ts

@@ -2,14 +2,14 @@ import { Ellipse, EllipseShape } from 'zrender'
 import { BaseShape } from '../index'
 import { getCommonParams } from '../utils/getCommonParams'
 
-export type IDropletOptions = BaseShape<EllipseShape>
+export type IEllipseOptions = BaseShape<EllipseShape>
 
 /**
  *  创建椭圆
  * @param options
  * @returns
  */
-function createEllipse(options?: IDropletOptions): Ellipse {
+function createEllipse(options?: IEllipseOptions): Ellipse {
   const { common, other } = getCommonParams(options)
   const { cx = 0, cy = 0, rx = 0, ry = 0, ...rest } = other
   const shape = new Ellipse({

src/core/rose.ts

@@ -5,7 +5,7 @@ import { getCommonParams } from '../utils/getCommonParams'
 export type IRoseOptions = BaseShape<RoseShape>
 
 /**
- *  玫瑰线
+ *  创建玫瑰线
  * @param options
  * @returns
  */

src/index.ts

@@ -19,7 +19,6 @@ import createSector from './core/sector'
 import createImage from './core/image'
 import createDroplet from './core/droplet'
 import createEllipse from './core/ellipse'
-
 import createHeart from './core/heart'
 import createIsogon from './core/isogon'
 import createRose from './core/rose'
@@ -113,7 +112,6 @@ export function createGroup(options?: GroupProps): ZRenderGroup {
  * @param item
  */
 export function generateShape(item: ShapeCoreType, _index?: number): AllShape {
-  // console.log(index)
   const {
     type,
     x1,
@@ -172,31 +170,31 @@ export function generateShape(item: ShapeCoreType, _index?: number): AllShape {
       shape = createText({ x, y, text, ...options } as any)
       break
     case 'sector':
-      shape = createSector({ cx, cy, r: r as number, r0, startAngle, endAngle, ...options } as any)
+      shape = createSector({ cx, cy, r: r as number, r0, startAngle, endAngle, ...options })
       break
     case 'image':
-      shape = createImage({ x, y, width, height, image, ...options } as any)
+      shape = createImage({ x, y, width, height, image, ...options })
       break
     case 'droplet':
-      shape = createDroplet({ cx, cy, width, height, ...options } as any)
+      shape = createDroplet({ cx, cy, width, height, ...options })
       break
     case 'ellipse':
-      shape = createEllipse({ cx, cy, rx, ry, ...options } as any)
+      shape = createEllipse({ cx, cy, rx, ry, ...options })
       break
     case 'heart':
-      shape = createHeart({ cx, cy, width, height, ...options } as any)
+      shape = createHeart({ cx, cy, width, height, ...options })
       break
     case 'isogon':
-      shape = createIsogon({ x, y, r: r as number, n, ...options } as any)
+      shape = createIsogon({ x, y, r: r as number, n, ...options })
       break
     case 'rose':
-      shape = createRose({ cx, cy, n, r: r as number[], k, ...options } as any)
+      shape = createRose({ cx, cy, n, r: r as number[], k, ...options })
       break
     case 'star':
-      shape = createStar({ cx, cy, n, r: r as number, r0, ...options } as any)
+      shape = createStar({ cx, cy, n, r: r as number, r0, ...options })
       break
     case 'compoundPath':
-      shape = createCompoundPath({ paths, ...options } as any)
+      shape = createCompoundPath({ paths: paths as any, ...options })
       break
     case 'bezierCurve':
       shape = createBezierCurve({

src/types/index.ts

@@ -147,6 +147,7 @@ export type CommonType = {
  * 图形数据类型
  */
 export type ShapeCoreType = Partial<{
+  [path: string]: any
   /**
    * 图形类型
    */
@@ -178,7 +179,7 @@ export type ShapeCoreType = Partial<{
   /**
    * 线的类型
    */
-  lineDash: string
+  lineDash: false | number[] | 'solid' | 'dashed' | 'dotted'
 
   /**
    * 线段起始横坐标

tests/post.ts

@@ -0,0 +1,186 @@
+import {
+  createCanvas,
+  createGroup,
+  renderCanvas,
+  createImage,
+  createCircle,
+  ZRenderType,
+  ZRenderGroup,
+  ShapeCoreType
+} from '../dist'
+
+interface IState {
+  zr: ZRenderType | null
+  gp: ZRenderGroup | null
+}
+
+const state: IState = {
+  zr: null,
+  gp: null
+}
+
+const width = 375
+const height = 592
+state.zr = createCanvas('sharePost', {
+  width,
+  height
+})
+state.zr.setBackgroundColor('#ff6e0b')
+state.gp = createGroup()
+const data: ShapeCoreType[] = [
+  {
+    type: 'image',
+    x: 0,
+    y: 0,
+    width: 375,
+    height: 592,
+    image: '/auto-drawing-doc/post.png'
+  },
+  // {
+  //   type: 'image',
+  //   x: 40,
+  //   y: 20,
+  //   width: 50,
+  //   height: 50,
+  //   image: '/auto-drawing-doc/avatar.jpg',
+  //   zlevel: 1
+  // },
+  {
+    type: 'text',
+    x: 98,
+    y: 24,
+    text: 'xiaofei的店铺',
+    fontSize: 16,
+    fill: '#fff'
+  },
+  {
+    type: 'text',
+    x: 98,
+    y: 50,
+    text: '邀请你共享优惠',
+    fontSize: 12,
+    fill: '#ffd3a2'
+  },
+  {
+    type: 'text',
+    x: 50,
+    y: 400,
+    text: '￥99.9',
+    fontSize: 32,
+    fill: '#f00'
+  },
+  {
+    type: 'text',
+    x: 150,
+    y: 410,
+    text: '￥1999.9',
+    fontSize: 12,
+    fill: '#999'
+  },
+  {
+    type: 'line',
+    x1: 158,
+    y1: 414,
+    x2: 200,
+    y2: 414,
+    stroke: '#999'
+  },
+  {
+    type: 'text',
+    x: 60,
+    y: 440,
+    text: '自营',
+    fontSize: 12,
+    backgroundColor: '#fa4f00',
+    padding: 2,
+    borderRadius: 5
+  },
+  {
+    type: 'text',
+    x: 96,
+    y: 440,
+    text: '30天最低价',
+    fontSize: 12,
+    fill: '#805609',
+    backgroundColor: '#faf5d9',
+    padding: 2
+  },
+  {
+    type: 'text',
+    x: 168,
+    y: 440,
+    text: '包邮',
+    fontSize: 12,
+    fill: '#805609',
+    backgroundColor: '#faf5d9',
+    padding: 2
+  },
+  {
+    type: 'text',
+    x: 200,
+    y: 440,
+    text: '满减优惠',
+    fontSize: 12,
+    fill: '#805609',
+    backgroundColor: '#faf5d9',
+    padding: 2
+  },
+  {
+    type: 'text',
+    x: 55,
+    y: 480,
+    text: '精美兔子毛绒',
+    fontSize: 24,
+    fill: '#000'
+  },
+  {
+    type: 'text',
+    x: 55,
+    y: 510,
+    text: '玩具，回家必备。',
+    fontSize: 24,
+    fill: '#000'
+  },
+  {
+    type: 'image',
+    x: 250,
+    y: 472,
+    width: 70,
+    height: 70,
+    image: '/auto-drawing-doc/code.jpg'
+  },
+  {
+    type: 'text',
+    x: 320,
+    y: 210,
+    text: '兔 年 快 乐',
+    fontSize: 20,
+    fill: '#fa4f00',
+    rotation: -90,
+    originX: 320,
+    originY: 210
+  }
+]
+
+const image = createImage({
+  x: 40,
+  y: 20,
+  width: 50,
+  height: 50,
+  image: '/auto-drawing-doc/avatar.jpg',
+  zlevel: 1
+})
+const circle = createCircle({
+  cx: 65,
+  cy: 45,
+  r: 30,
+  zlevel: 2
+})
+
+image.setClipPath(circle)
+state.zr.add(image)
+
+renderCanvas(state.zr, state.gp, data, {
+  scale: true,
+  translate: true
+})