使用canvas添加图片后,图片不成比例,但是只要点击一下屏幕就会正常。不知道是什么问题有点影响体验,麻烦大佬解答。
draw() {
var that = this
if (this.data.bgImage !== '') {
wx.getImageInfo({
src: that.data.bgImage,
success:(res)=>{
if(res.width>=res.height){
that.setData({
width:750,
height:750* res.height/res.width,
bgImage:res.path
})
that.setData({
y1:557.8 - that.data.height/2,
x1:0
})
}else{
that.setData({
width:1155*res.width/res.height,
height:1155,
bgImage:res.path
})
that.setData({
x1:375 - that.data.width/2,
y1:0
})
}
}
})
this.ctx.drawImage(that.data.bgImage, 0, 0,this.toPx(that.data.width), this.toPx(that.data.height))
this.drawArr.forEach((graph) => {
graph.paint();
});
return new Promise((resolve) => {
this.ctx.draw(false, () => {
resolve();
});
});
}
},
/**
* 绘制元素
*/
paint() {
this.ctx.save();
// TODO 剪切
// this._drawRadiusRect(0, 0, 700, 750, 300);
// this.ctx.clip();
// 选择区域的中心点
this.centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);
this.centerY = this.type === 'text' ? this.y : this.y + (this.h / 2);
// 旋转元素
this.ctx.translate(this.centerX, this.centerY);
this.ctx.rotate(this.rotate * Math.PI / 180);
this.ctx.translate(-this.centerX, -this.centerY);
// 渲染元素
if (this.type === 'text') {
this.ctx.fillText(this.text, this.x, this.y);
} else if (this.type === 'image') {
this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
}
// 如果是选中状态,绘制选择虚线框,和缩放图标、删除图标
if (this.selected) {
this.ctx.setLineDash([10, 10]);
this.ctx.setLineWidth(2);
this.ctx.setStrokeStyle('black');
this.ctx.lineDashOffset = 10;
this.ctx.strokeRect(this.x, this.y, this.w, this.h);
this.ctx.drawImage('./icon/close.png', this.x - 15, this.y - 15, 30, 30);
this.ctx.drawImage('./icon/scale.png', this.x + this.w - 15, this.y + this.h - 15, 30, 30);
}
this.ctx.restore();
},
检查下是否是比例放大了?