@wqy445/canvasboard

canvas画板

Usage no npm install needed!

<script type="module">
  import wqy445Canvasboard from 'https://cdn.skypack.dev/@wqy445/canvasboard';
</script>

README

vue+canvas画板组件

介绍

canvas画板,支持涂鸦,直线,矩形,圆形,文字,填充背景,橡皮擦,上一步,清空画布,保存图片,退出画板。

部分样式借鉴:https://github.com/zhoushuozh/drawingborad

Demo

The demo page is HERE.

demo

安装教程

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. 自定义笔刷颜色
  2. 自定义笔刷粗细(1-30)
  3. 自定义画板宽高(minW:800,minH:600)
  4. 涂鸦
  5. 直线
  6. 矩形
  7. 圆形
  8. 文字
  9. 填充
  10. 橡皮
  11. 上一步
  12. 清空画布
  13. 下载图片
  14. 退出画布(上一级路由页面)

v1.3.1

  1. 删除填充功能(后期优化)
  2. 删除自定义画板宽高(后期优化)
  3. 存/取历史记录
  4. 历史记录列表查看及删除