1.1.2 • Published 4 years ago
draw-tools v1.1.2
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 | 前进 | -- | -- |