draw-tools

使用html5 canvas技术对图片进行简单处理

Usage no npm install needed!

<script type="module">
  import drawTools from 'https://cdn.skypack.dev/draw-tools';
</script>

README

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