收藏
回答

movable-area内添加canvas 2d组件,android端放大绘制坐标会偏移?

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()
				}
			},
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容