drawTools 画图工具
当前版本: "version": "1.1.2"
简介
基于canvas的画图工具。目前实现画线、矩形、椭圆、箭头、回退、前进、重置、保存等功能
安装
npm install draw-tools -S
使用
// html
...
<canvas id="canvas"></canvas>
<div id="drawBar__tools-div"></div>
....
// js
import 'draw-tools/package/drawTools.css'
import DrawTools from 'draw-tools'
const canvas = document.getElementById('canvas')
const cantainer = document.getElementById('drawBar__tools-div')
const drawTools = new DrawTools(canvas, {
width: 500,
height: 500,
container: container,
ext: "png",
encoderOptions: 1,
toolsBar: {
show: true
},
drawType: 'pencil',
setStorageLimit: false,
storageLimitNums: 1000
})
api文档
主属性
属性 |
说明 |
类型 |
可选择 |
默认值 |
container |
工具条容器元素 |
dom对象 |
-- |
-- |
width |
画布宽度 |
number |
-- |
300 |
height |
画布高度 |
number |
-- |
300 |
ext |
图片类型 |
string |
-- |
png |
drawType |
初始工具类型 |
string |
-- |
pencil |
encoderOptions |
图片下载质量 |
number |
0-1 |
1 |
setStorageLimit |
设置存储上线 |
boolean |
true/false |
false |
storageLimitNums |
存储上线数 |
number |
-- |
1000 |
toolsBar属性
属性 |
说明 |
类型 |
可选择 |
默认值 |
show |
是否显示工具条 |
boolean |
true/false |
true |
方法
方法名 |
说明 |
参数 |
可选择 |
selectTool |
选择工具条类型 |
工具条类型 |
pencil-铅笔,rect-矩形,ellipse-椭圆,arrow-箭头,font-输入 |
reset |
重置画布 |
-- |
-- |
download |
下载 |
-- |
-- |
undo |
后退 |
-- |
-- |
redo |
前进 |
-- |
-- |