README
vue+canvas画板组件
介绍
canvas画板,支持涂鸦,直线,矩形,圆形,文字,填充背景,橡皮擦,上一步,清空画布,保存图片,退出画板。
部分样式借鉴:https://github.com/zhoushuozh/drawingborad
Demo
The demo page is HERE.
安装教程
npm install -D @wqy445/canvasboard
使用说明
main.js中引用,需要引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import canvasboard from '@wqy445/canvasboard'
Vue.use(canvasboard)
page.vue中使用组件
<canvasBoard />
参数
名称 | 类型 | 默认值 | 是否必填 | 描述 |
---|---|---|---|---|
colorList | Array | ["#000", "#FF3333", "#0066FF", "#FFFF33", "#33CC66"] | 否 | 颜色列表 |
pencleSize | Number | 5 | 否 | 笔刷粗细(1-30) |
版本
v1.2.1
- 自定义笔刷颜色
- 自定义笔刷粗细(1-30)
- 自定义画板宽高(minW:800,minH:600)
- 涂鸦
- 直线
- 矩形
- 圆形
- 文字
- 填充
- 橡皮
- 上一步
- 清空画布
- 下载图片
- 退出画布(上一级路由页面)
v1.3.1
- 删除填充功能(后期优化)
- 删除自定义画板宽高(后期优化)
- 存/取历史记录
- 历史记录列表查看及删除