【报Bug】ios 17.4 微信小程序 canvas 笔迹移动时，不连续问题

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 11

HBuilderX类型：正式

HBuilderX版本号： 3.98

第三方开发者工具版本号： 1.06.24010120

基础库版本号： 3.3.4

项目创建方式： HBuilderX

示例代码：


// 笔迹开始  
            uploadScaleStart(e) {  
                this.startX = e.changedTouches[0].x  
                this.startY = e.changedTouches[0].y  
                //设置画笔参数  
                //画笔颜色  
                this.ctx.setStrokeStyle(this.lineColor)  
                //设置线条粗细  
                this.ctx.setLineWidth(this.lineSize)  
                //设置线条的结束端点样式  
                this.ctx.setLineCap("round") //'butt'、'round'、'square'  
                //开始画笔  
                this.ctx.beginPath()  
            },  

            // 笔迹移动  
            uploadScaleMove(e) {  
                //取点  
                let temX = e.changedTouches[0].x  
                let temY = e.changedTouches[0].y  
                //画线条  
                this.ctx.moveTo(this.startX, this.startY)  
                this.ctx.lineTo(temX, temY)  
                this.ctx.stroke()  
                this.startX = temX  
                this.startY = temY  
                this.ctx.draw(true)  
                this.isTouch = true  
            },

操作步骤：


// 笔迹开始  
            uploadScaleStart(e) {  
                this.startX = e.changedTouches[0].x  
                this.startY = e.changedTouches[0].y  
                //设置画笔参数  
                //画笔颜色  
                this.ctx.setStrokeStyle(this.lineColor)  
                //设置线条粗细  
                this.ctx.setLineWidth(this.lineSize)  
                //设置线条的结束端点样式  
                this.ctx.setLineCap("round") //'butt'、'round'、'square'  
                //开始画笔  
                this.ctx.beginPath()  
            },  

            // 笔迹移动  
            uploadScaleMove(e) {  
                //取点  
                let temX = e.changedTouches[0].x  
                let temY = e.changedTouches[0].y  
                //画线条  
                this.ctx.moveTo(this.startX, this.startY)  
                this.ctx.lineTo(temX, temY)  
                this.ctx.stroke()  
                this.startX = temX  
                this.startY = temY  
                this.ctx.draw(true)  
                this.isTouch = true  
            },

预期结果：


// 笔迹开始  
            uploadScaleStart(e) {  
                this.startX = e.changedTouches[0].x  
                this.startY = e.changedTouches[0].y  
                //设置画笔参数  
                //画笔颜色  
                this.ctx.setStrokeStyle(this.lineColor)  
                //设置线条粗细  
                this.ctx.setLineWidth(this.lineSize)  
                //设置线条的结束端点样式  
                this.ctx.setLineCap("round") //'butt'、'round'、'square'  
                //开始画笔  
                this.ctx.beginPath()  
            },  

            // 笔迹移动  
            uploadScaleMove(e) {  
                //取点  
                let temX = e.changedTouches[0].x  
                let temY = e.changedTouches[0].y  
                //画线条  
                this.ctx.moveTo(this.startX, this.startY)  
                this.ctx.lineTo(temX, temY)  
                this.ctx.stroke()  
                this.startX = temX  
                this.startY = temY  
                this.ctx.draw(true)  
                this.isTouch = true  
            },

实际结果：


// 笔迹开始  
            uploadScaleStart(e) {  
                this.startX = e.changedTouches[0].x  
                this.startY = e.changedTouches[0].y  
                //设置画笔参数  
                //画笔颜色  
                this.ctx.setStrokeStyle(this.lineColor)  
                //设置线条粗细  
                this.ctx.setLineWidth(this.lineSize)  
                //设置线条的结束端点样式  
                this.ctx.setLineCap("round") //'butt'、'round'、'square'  
                //开始画笔  
                this.ctx.beginPath()  
            },  

            // 笔迹移动  
            uploadScaleMove(e) {  
                //取点  
                let temX = e.changedTouches[0].x  
                let temY = e.changedTouches[0].y  
                //画线条  
                this.ctx.moveTo(this.startX, this.startY)  
                this.ctx.lineTo(temX, temY)  
                this.ctx.stroke()  
                this.startX = temX  
                this.startY = temY  
                this.ctx.draw(true)  
                this.isTouch = true  
            },