movable-area和movable-view组件内添加canvas 2d组件,实现画布缩放绘制功能。双指缩放后再单指绘制,绘制时使用的屏幕坐标,但是坐标偏移的很厉害。android端会出问题,ios端没问题。
代码片段:
<movable-area :style="{width:750+'rpx',height:750+'rpx'}">
<movable-view :disabled="allowDrawing" direction="all" @scale="onScale" :scale="!allowDrawing"
scale-min="1" scale-max="4" :scale-value="scale">
<image :style="{width:width+'rpx',height:height+'rpx'}" :src="task.list[imageIndex]"
:mode="imageMode"></image>
<canvas type="2d" canvas-id="canvas" id="canvas" @touchstart="onTouchStart" @touchmove="onTouchMove"
@touchend="onTouchEnd" :style="{width:width+'rpx',height:height+'rpx'}"></canvas>
</movable-view>
</movable-area>
mounted() {
const query = uni.createSelectorQuery()
query.select('#canvas')
.fields({
node: true,
size: true
})
.exec((res) => {
this.canvas = res[0].node
this.canvasCtx = this.canvas.getContext('2d');
const dpr = uni.getSystemInfoSync().pixelRatio
this.canvas.width = res[0].width * dpr
this.canvas.height = res[0].height * dpr
this.canvasCtx.scale(dpr, dpr)
})
},
onTouchStart(e) {
var _this = this;
console.log("触摸开始:" + e.touches.length);
console.log("是否允许画画:"+this.allowDrawing);
if (this.allowDrawing) {
const pos = e.touches[0]
console.log(pos);
_this.lineData.push({
style: {
color: _this.penLineColor,
width: _this.penLineWidth
},
// 屏幕坐标
coordinates: [{
type: e.type,
x: pos.x,
y: pos.y
}]
})
_this.drawLine()
}
},
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。