一个简单的 canvas 写字板、画板 vue 组件, 由于项目需求目前只提供清空功能代码及 demo
使用
1. 引入组件
import draw from ‘./inDraw/index’
components: {
draw,
},
2. 使用组件，可以放在一个自定义样式的 div 中
<div id=”draw-box”>
<draw ref=”in-draw”
:inRatio=”3″ //retina 屏兼容, 画布大小放大倍数，Number
:inLineColor=”‘#999′” // 笔触颜色
:inLineWidth=”5″ // 笔触宽度，Number
:inShadowBlur=”5″ // 笔触阴影大小，Number
></draw>
<div class=”draw-delete” @click=”drawDelete()”> 清空 </div>
</div>
3. 自定义清空按钮，调用组件方法 inDeleteCanvas 清空画布
methods: {
drawDelete(){
this.$refs[“in-draw”].inDeleteCanvas()
},
}
开发笔记
1. 需要兼容 retina 屏一倍图模糊的问题，将画布大小设置为 canvas 元素的 2 或 3 倍
//this.inRatio=3;
let canvasDom=this.$refs[‘in-draw-canvas’];
this.inCanvasBound = canvasDom.getBoundingClientRect();
canvasDom.width=this.inCanvasBound.width*this.inRatio;
canvasDom.height=this.inCanvasBound.height*this.inRatio;
this.inCtx.lineWidth=10*this.inRatio;
2. 笔触锯齿问题，设置阴影
this.inCtx.shadowBlur = 5;
this.inCtx.shadowColor = “#000”;
3. 适应需求在不同位置的画布，笔触实际位置为当前坐标减去画布位置
let x=(e.changedTouches[0].pageX – this.inCanvasBound.left + 0.5)*this.inRatio;
let y=(e.changedTouches[0].pageY- this.inCanvasBound.top + 0.5)*this.inRatio;