@wqy445/canvasboard

    1.3.1 • Public • Published

    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. 历史记录列表查看及删除

    Install

    npm i @wqy445/canvasboard

    DownloadsWeekly Downloads

    2

    Version

    1.3.1

    License

    ISC

    Unpacked Size

    2.97 MB

    Total Files

    20

    Last publish

    Collaborators

    • wqy445