auto-drawing

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

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

安装

npm

npm install --save auto-drawing

yarn

yarn add  auto-drawing

pnpm

pnpm  add  auto-drawing

cdn

暴露全局变量 AutoDrawing

<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`等构建工具

<div id="app"></div>

import { createGroup } from 'auto-drawing'
const app = document.getElementById('app')
const zr = createCanvas(app)
const gp = createGroup()
const data = [{type: 'rect',zlevel: 0,x: 26,y: 76,width: 40,height: 50,fill: '#ff8041',stroke: '#ff8041'}
]
renderCanvas(zr, gp, data, {scale: true,translate: true
})

CDN

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://cdn.jsdelivr.net/npm/auto-drawing/dist/auto-drawing.min.js"></script></head><body><div id="app"></div><script>const { createCanvas, createGroup, renderCanvas } = AutoDrawingconst zr = createCanvas('app')const gp = createGroup({})const data = [{type: 'rect',zlevel: 0,x: 26,y: 76,width: 40,height: 50,fill: '#ff8041',stroke: '#ff8041'}]renderCanvas(zr, gp, data, {scale: true,translate: true})</script></body>
</html>

TypeScript

<div id="app"></div>

import {createCanvas,createGroup,ZRenderType,ZRenderGroup,ShapeCoreType
} from 'auto-drawing'
const app = document.getElementById('app') as HTMLElement
const zr: ZRenderType = createCanvas(app)
const gp: ZRenderGroup = createGroup()
const data: ShapeCoreType[] = [{type: 'rect',zlevel: 0,x: 26,y: 76,width: 40,height: 50,fill: '#ff8041',stroke: '#ff8041'}
]
renderCanvas(zr, gp, data)

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

auto-drawing相关推荐

Beginning Auto Layout Tutorial in iOS 7: Part 1
本篇是学习iOS Auto Layout难得的好资料,值得一读!资料来自www.raywenderlich.com ------------------------------------------ ...
C++11特性（01）auto关键字
C++11特性之一:auto关键字 auto关键字在C++11之前的版本中,其实也有auto关键字(这个关键字其实是为了兼容C语言中的auto自动变量),所以在C语言中也可以使用auto关键字,只是 ...
c++中的auto关键字
auto的属性特征 #include <iostream> using namespace std;int main() {//1.auto 变量必须在定义时初始化,类似于constaut ...
Auto ML自动特征工程
Auto ML自动特征工程特征工程是在做机器学习训练的过程中必不可少的环节,特征工程就是找出对模型结果有益的特征交叉关系,通常特征工程需要耗费算法工程师大量的精力去尝试.针对这样的场景,PAI推出智 ...
Auto ML自动调参
Auto ML自动调参本文介绍Auto ML自动调参的算法介绍及操作流程. 操作步骤登录PAI控制台. 单击左侧导航栏的实验并选择某个实验. 本文以雾霾天气预测实验为例. 在实验画布区,单击左上角 ...
使用Auto TensorCore CodeGen优化Matmul
使用Auto TensorCore CodeGen优化Matmul 本文将演示如何使用TVM Auto TensorCore CodeGen在Volta / Turing GPU上编写高性能matmu ...
auto关键字详解 C++
C++98 auto 早在C++98标准中就存在了auto关键字,那时的auto用于声明变量为自动变量,自动变量意为拥有自动的生命期,这是多余的,因为就算不使用auto声明,变量依旧拥有自动的生命期: ...
WPF中Auto与*的差别
Auto 表示自己主动适应显示内容的宽度, 如自己主动适应文本的宽度,文本有多长,控件就显示多长. * 则表示按比例来分配宽度. <ColumnDefinition Width="3* ...
hibernate.hbm2ddl.auto的value
Hibernate 配置参数hibernate.hbm2ddl.auto Hibernate中的配置文件: <properties> <property name="hib ...
C++拾趣——C++11的语法糖auto
C++是一种强类型的语言,比如变量a,如果声明它是整型,则之后只能将它作为整型来用.这和其他弱类型的语言有很大的区别,比如python中,我们可以让a在第一行是个整型,第三行是一个字符串.(转载请指明 ...

auto-drawing

auto-drawing

安装

使用

基于`webpack`,`vite`等构建工具

CDN

TypeScript

auto-drawing相关推荐

最新文章

热门文章

auto-drawing

auto-drawing

安装

使用

基于webpack,vite等构建工具

CDN

TypeScript

auto-drawing相关推荐

最新文章

热门文章

基于`webpack`,`vite`等构建工具