#vue #react #zrender #canvas #auto-drawing

auto-drawing

基于 zrender 的自动画图工具，简单的 json 配置就可画出复杂的图形

官方文档 https://l-x-f.github.io/auto-drawing-doc/
官方示例 https://l-x-f.github.io/auto-drawing-doc/example/example

安装

npm

1
npm install --save auto-drawing

yarn

1
yarn add  auto-drawing

pnpm

1
pnpm  add  auto-drawing

cdn

暴露全局变量 AutoDrawing

1
<script src="https://cdn.jsdelivr.net/npm/auto-drawing@0.0.8/dist/auto-drawing.min.js"></script>

使用最新版本

https://cdn.jsdelivr.net/npm/auto-drawing/dist/auto-drawing.min.js

使用

基于webpack,vite等构建工具

1
<div id="app"></div>
1
import { createGroup } from 'auto-drawing'
2
const app = document.getElementById('app')
3
const zr = createCanvas(app)
4
const gp = createGroup()
5
const data = [
6
  {
7
    type: 'rect',
8
    zlevel: 0,
9
    x: 26,
10
    y: 76,
11
    width: 40,
12
    height: 50,
13
    fill: '#ff8041',
14
    stroke: '#ff8041'
15
  }
16
]
17
renderCanvas(zr, gp, data, {
18
  scale: true,
19
  translate: true
20
})

CDN

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
    <script src="https://cdn.jsdelivr.net/npm/auto-drawing/dist/auto-drawing.min.js"></script>
9
  </head>
10
  <body>
11
    <div id="app"></div>
12
    <script>
13
      const { createCanvas, createGroup, renderCanvas } = AutoDrawing
14
      const zr = createCanvas('app')
15
      const gp = createGroup({})
16
      const data = [
17
        {
18
          type: 'rect',
19
          zlevel: 0,
20
          x: 26,
21
          y: 76,
22
          width: 40,
23
          height: 50,
24
          fill: '#ff8041',
25
          stroke: '#ff8041'
26
        }
27
      ]
28
      renderCanvas(zr, gp, data, {
29
        scale: true,
30
        translate: true
31
      })
32
    </script>
33
  </body>
34
</html>

TypeScript

1
<div id="app"></div>
1
import {
2
  createCanvas,
3
  createGroup,
4
  ZRenderType,
5
  ZRenderGroup,
6
  ShapeCoreType
7
} from 'auto-drawing'
8
const app = document.getElementById('app') as HTMLElement
9
const zr: ZRenderType = createCanvas(app)
10
const gp: ZRenderGroup = createGroup()
11
const data: ShapeCoreType[] = [
12
  {
13
    type: 'rect',
14
    zlevel: 0,
15
    x: 26,
16
    y: 76,
17
    width: 40,
18
    height: 50,
19
    fill: '#ff8041',
20
    stroke: '#ff8041'
21
  }
22
]
23
renderCanvas(zr, gp, data)

官方文档 https://l-x-f.github.io/auto-drawing-doc/

#vue #react #zrender #canvas #auto-drawing