<canvas @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch" :style="'width: '+canvasWidthdevicePixelRatio+'px;height: '+canvasHeightdevicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;'" canvas-id="canvasId" id="canvasId"></canvas>
- 发布:2023-02-06 17:55
- 更新:2023-02-25 09:56
- 阅读:123
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 12.6.2
HBuilderX类型: 正式
HBuilderX版本号: 3.7.0
第三方开发者工具版本号: 1.06.2301160
基础库版本号: 2.30.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
<canvas @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch" :style="'width: '+canvasWidthdevicePixelRatio+'px;height: '+canvasHeightdevicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;'" canvas-id="canvasId" id="canvasId"></canvas>
<canvas @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch" :style="'width: '+canvasWidthdevicePixelRatio+'px;height: '+canvasHeightdevicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;'" canvas-id="canvasId" id="canvasId"></canvas>
预期结果:
<canvas @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch" :style="'width: '+canvasWidthdevicePixelRatio+'px;height: '+canvasHeightdevicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;'" canvas-id="canvasId" id="canvasId"></canvas>
<canvas @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch" :style="'width: '+canvasWidthdevicePixelRatio+'px;height: '+canvasHeightdevicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;'" canvas-id="canvasId" id="canvasId"></canvas>
实际结果:
<canvas @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch" :style="'width: '+canvasWidthdevicePixelRatio+'px;height: '+canvasHeightdevicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;'" canvas-id="canvasId" id="canvasId"></canvas>
<canvas @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch" :style="'width: '+canvasWidthdevicePixelRatio+'px;height: '+canvasHeightdevicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;'" canvas-id="canvasId" id="canvasId"></canvas>
bug描述:
小程序touch事件在ios真机无效,模拟器正常
2 个回复
DCloud_UNI_WZF
测试微信小程序原生开发是否存在该问题,如确认框架问题,提供测试工程
注意:uniapp canvas 暂不支持 getContext('2d')
1***@qq.com (作者)
这是测试代码,您看看,touch事件在真机上确实无效