利用canvas 实现
wxml
<view class="dashbox">
<view class="btnList">
<van-button size="small" bindtap="clearCanvas">清空</van-button>
</view>
<view class="handCenter">
<canvas
class="handWriting"
disable-scroll="{{true}}"
id="myCanvas"
bindtouchstart="scaleStart"
bindtouchmove="scaleMove"
bindtouchend="scaleEnd"
bindtap="mouseDown"
type="2d"
>
</canvas>
</view>
</view>
js
Page({
onShow() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
this.width = canvas.width;
this.height = canvas.height;
ctx.scale(dpr, dpr)
this.ctx = ctx;
})
},
scaleStart(e) {
console.log(111,e)
let {x,y} = e.touches[0]
console.log(x,y)
this.ctx.beginPath()
this.ctx.moveTo(x,y)
this.ctx.strokeStyle="#0000ff";
this.ctx.lineWidth = '10'
},
scaleMove(e){
console.log(e)
let {x,y} = e.touches[0]
this.ctx.lineTo(x,y)
this.ctx.stroke();
this.ctx.lineCap="round";
this.ctx.moveTo(x,y)
},
scaleEnd(e){
console.log(111,e)
this.ctx.lineCap="round";
},
clearCanvas(){
this.ctx.clearRect(0,0,this.width,this.height)
this.ctx.draw(true)
}
})