vue-svg-board

(test 1.1.2)

SVG画板插件,可以画直线/曲线，切换硬笔/荧光笔, 变换笔颜色，调整线宽，橡皮檫擦除。自适应svg大小，等比例适应不同屏幕。

Demo

npm install
npm run serve

功能

• 绘制直线/曲线
• 改变画笔颜色
• 改变画笔粗细
• 绘制硬笔/荧光笔
• 对象擦除
• 画板转化为png:base84
• ...etc

加载技术栈

npm install Vue vue-svg-board

使用

<template>
  <div id="app">
    <div class="sketch-wrap">
      <sketch-board
        class="sketch-board"
        :width="board.width"
        :height="board.height"
        view-box="0 0 1024 600"
        :config="board.config"
        :opacity="0.2"
        :on-load="loadedSketch"
        :ignore="board.ignore"
        :on-up-event="handlePressUp"
      />
      <button
        class="btn-test"
        @click="handleStrike"
      >
        测试穿透
      </button>
    </div>
    <div class="buttons-wrap">
      <button
        @click="exportPng"
      >
        导出图片
      </button>
      |
      <button @click="board.ignore = !board.ignore">
        当前画板穿透状态： {{ board.ignore ? '开启' : '关闭' }}
      </button>
      |
      <button @click="changeBoardSize">
        切换画布大小
      </button>
      |
      <button @click="saveToLocal">
        存储当前svg矢量数据到localstorage
      </button>
      |
      <button @click="getFromLocal">
        读取数据到画布
      </button>
      |
      <button @click="sketch.revoke()">
        撤销
      </button>
      |
      <button @click="sketch.resume()">
        恢复
      </button>
    </div>
    <div class="tools">
      <sketch-popover
        key="sketch"
        :config.sync="board.config"
        class="sketch-tool-board"
      />
      <erase-popover
        key="erase"
        class="erase-popover"
        @clear="clearSVG"
        @erase="handleErase"
      />
    </div>
  </div>
</template>

<script>
import SketchBoard from 'vue-svg-board';
Vue.use(SketchBoard);
export default {
    name: 'App',
    data () {
        return {
            board: {
                width: 1024,
                height: 600,
                config: {
                    thickness: 'small',
                    pen: 'pencil',
                    line: 'curve',
                    color: '#000000',
                    mode: 1,
                },
                ignore: false,
            },
        };
    },
    methods: {
        handleStrike () {
            window.alert('click!');
        },
        changeBoardSize () {
            const oldWidth = this.board.width;
            const oldHeight = this.board.height;

            Object.assign(this.board, {
                width: oldWidth === 512 ? 1024 : 512,
                height: oldHeight === 300 ? 600 : 300,
            });
            // this.sketch.resize();
        },
        exportPng () {
            this.sketch.toBase64()
                .then(res => {
                    console.log(res);
                })
                .catch(err => {
                    console.log('err>>>', err);
                });
        },
        clearSVG () {
            this.sketch.clear();
        },
        loadedSketch (sketch) {
            console.log('--- 画板初始化回调start: 因为插件内部需要确定尺寸后，才会初始化，这是一个异步的过程，所以抛出一个方法，用户获取画板vue对象 ---');
            console.log(sketch);
            console.log('--- 画板初始化回调end ---');
            this.sketch = sketch;
        },
        handlePressUp (params) {
            console.log('--- start: 手势抬起，用于回调操作画板的开始/结束时间信息数据 ---');
            console.log(params);
            console.log('--- end ---');
        },
        handleErase () {
            this.board.config.mode = 0;
        },
        saveToLocal () {
            localStorage.setItem('yxp-svg-data', JSON.stringify(this.sketch.getData()));
        },
        getFromLocal () {
            let localData = localStorage.getItem('yxp-svg-data');
            if (localData) {
                const data = JSON.parse(localData);
                this.sketch.clear();
                this.sketch.render(data);
            }
        },
    },
};
</script>

<style lang="scss">
 body {
   background: rgb(240, 240, 240);
 }

.sketch-wrap {
  position: relative;
}

.sketch-board {
  position: relative;
  z-index: 1;
  margin: auto;
  background-color: #ffc0cb6b;
}

.tools {
  position:fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  z-index: 2;
  justify-content: space-around;
  align-items: flex-end;
}

.btn-test {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

// 动画
.slightly-enter-active {
  transition: all .2s ease;
}

.slightly-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slightly-enter, .slightly-leave-to {
  transform: translate3d(0, 15px, 0);
  opacity: 0;
}
</style>

全局配置

可全局配置是否开启贝塞尔曲线和requestAnimationFrame API，默认全部关闭，按照以下操作，即可全部开启。

import Vue from 'vue';
import SketchBoard from 'vue-svg-board';
Vue.use(SketchBoard, {
    bezier: true, // 开启贝塞尔曲线
    ref: true, // 开启requestAnimationFrame API
})

SketchBoard Attribute

参数	说明	类型	可选值	默认值	是否必填
width	画布宽度(px)	Number	-	-	是
height	画布高度(px)	Number	-	-	是
viewBox	画布viewBox	Stinrg	-	'0 0 1000 600'	否
ignore	允许事件穿透	Boolean	true, false	false	否
opacity	荧光笔的透明度	Number	0-1	0.3	否
thicknessess	铅笔的3中粗细集合	Array<String>[]	-	['2px', '4px', '8px']	否
h—thicknessess	荧光笔的3中粗细集合	Array<String>[]	-	['4px', '8px', '16px']	否
config.thickness	线粗度	String	small, middle, large	-	是
config.pen	笔形状	String	pencil, highlighters	-	是
config.line	线型	String	curve, stright	-	是
config.color	线颜色	String	(从给sketchColors中选一种颜色，如果没有配置，则是#000000, #ff1000, #326ed9, #ffc510, #306c00, #ff1ecf)	-	是
config.mode	线型	Number	`0	1`	-
on-load	画板初始化完成	Function(sketchVm)	-	-	否
on-up-event	手势抬起，用于回调操作画板的开始/结束时间信息数据	Function(Object)	-	-	否

SketchBoard Methods

方法名	说明	参数	返回值
toBase64	svg转化成base64	-	Promise
revoke	撤销操作(暂时没用到)	-	-
resume	恢复操作(暂时没用到)	-	-
clear	清除画板	-	-
render	根据指定的svg数据格式进行回显(暂时没用到)	data	-
getData	获取svg的矢量数据(暂时没用到)	-	-
resize	动态改变画板大小，修复画笔触点坐标	-	-

---

SketchPopover Attribute

参数	说明	类型	可选值	默认值	是否必填
colors	颜色集合	Array<String>[]	-	['#000000', '#ff1000', '#326ed9', '#ffc510', '#306c00', '#ff1ecf']	否
config.thickness	线粗度(支持.sync修饰符)	String	-	-	是
config.pen	笔形状(支持.sync修饰符)	String	-	-	是
config.line	线型(支持.sync修饰符)	String	-	-	是
config.color	线颜色(支持.sync修饰符)	String	-	-	是

SketchPopover Events

事件名	说明	参数
thickness	改变线粗度	改变后的值
pen	改变笔形状	改变后的值
line	改变线型	改变后的值
color	改变线颜色	改变后的值

---

EarsePopover Events

事件名	说明	参数
erase	点击了擦除	-
clear	点击了清屏	-

---

Change Log

1.0.0

• 铅笔与荧光笔单独配置粗线程度
• UI小改动：工具栏框线统一、去掉选装顶部高亮等
• 荧光笔下粗线改动
• 优化细线的擦除

1.1.0

• 查看构建版本时间
• 新UI
• 补充demo用例
• 绘制模式解耦
• 增加获取画布数据的结构
• bug修复：解决鼠标移出画布后放开，在进入画布继续绘制的问题