- canvas中循环数组drawImage()添加旋转不同位置的图片,无报错也不正常显示要怎么解决?
在for循环中绘制图片,位置无法正常显示,只添加一个不循环的时候能正常显示,多次刷新,图片会落在不同的地方。代码如下: wxml的代码: <canvas class="box" canvas-id="myCanvas" style="width: {{myCanvasWidth}}px; height: {{myCanvasHeight}}px; margin: 0 auto"></canvas> js代码: data: { fillColor: "#e7e7e7", lineColor: "#000000", lineWidth: 4, holesImg: "../../images/door.png" }, onReady: function (e) { this.getData(); let pointDOT= this.data.pointDOT; const ctx = wx.createCanvasContext('myCanvas'); // 构件 for(let hole in this.data.holes){ let angel = parseFloat(this.data.holes[hole].rotation.z); //旋转角度 let holeWidth = this.data.holes[hole].width let holePosition = this.scalePoint(this.data.holes[hole].position) //缩放后的位置 let self = this; this.getImgSize(holeWidth).then((data)=>{ console.log(holePosition) let rotatePosition = self.rotatePoint(holePosition.x, holePosition.y,data.w,data.h,angel,this.data.holes[hole].itemType) ctx.translate(rotatePosition.x, holePosition.y) console.log("旋转角度:"+angel) ctx.rotate(angel * Math.PI / 180) ctx.drawImage(this.data.holesImg, 0, 0, parseFloat(data.w), parseFloat(data.h)); ctx.draw(true); ctx.translate(-rotatePosition.x, -holePosition.y) //还原原点坐标 ctx.rotate(-angel * Math.PI / 180) //还原旋转角度 }); } }, // 画布中构件尺寸 宽* 高 getImgSize(holeWidth){ let scaleNum = this.data.scaleNum let self = this; return new Promise(function(resolve, reject){ wx.getImageInfo({ src: self.data.holesImg, complete: (res) => { const height = res.height * holeWidth / res.width; //构件高 let scaleH = self.fixed(height/scaleNum); let scaleW = self.fixed(holeWidth/scaleNum); let size = { w: scaleW , h: scaleH} resolve(size) } }) }) }, 其中输出的坐标和旋转角度都没有问题: {x: 223.92, y: 98.02} 旋转角度:27.083475 {x: 245.32, y: 309.76} 旋转角度:179.999969 {x: 176.86, y: 377.09} 旋转角度:-89.999992 {x: 201.22, y: 435.89} 旋转角度:-143.130127 {x: 176.86, y: 377.09} 旋转角度:-89.999992 请求指导~~
2021-04-16 - picker-view-column组件IOS经常性显示不出内容,安卓上显示正常是什么问题?
在ios系统中经常显示不出picker-view-column里面的内容,而且样式也会有错乱。但是锁屏再重新开锁以后 组件里面的内容就可以显示出来了。 代码片段: https://developers.weixin.qq.com/s/c6q6Bymb7Hkx 问题展示: [图片] [图片] [图片] 最后一张图才是正确的展示效果,请求大佬指导
2020-09-22