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修复:解决鼠标移出画布后放开,在进入画布继续绘制的问题