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|前进|--|--|