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
请求指导~~