我正在创建一个裁剪工具,我在一个函数中有一个drawImage()函数的问题,该函数从另一个函数接收参数,如下所示:
首先,我的cropImage函数处理来自用户的输入数字并设置cTop(crop top)和cLeft参数。然后相应地将它们输入到reDrawImg函数中。
cropImage () {
let cTop = 300 - this.cropTop;
let cLeft = 300 - this.cropLeft;
if(this.cropTop == null) {
this.reDrawImg(cLeft, null, -this.canvasPositionLeft, -this.canvasPositionTop, this.imageWidth, this.imageHeight);
}
else if (this.cropLeft == null) {
this.reDrawImg(null, cTop, -this.canvasPositionLeft, -this.canvasPositionTop, this.imageWidth, this.imageHeight);
}
else {
this.reDrawImg(cLeft, cTop, -this.canvasPositionLeft, -this.canvasPositionTop, this.imageWidth, this.imageHeight);
}
console.log("crop: " + cLeft +"/ " + cTop +"........ crop-default: "+this.cropLeft+ "/ "+this.cropTop)
}
然后我的reDrawImg以cropX,cropY或两者填写完成:
reDrawImg (cropX = null, cropY = null, topX = null, topY = null, imageWidth = this.initialWidth, imageHeight = this.initialHeight) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
let image = new Image();
/* Everything is working fine up to this point, where for some reaseon,
even when the cropX and cropY are filled out correctly (50,80 for example)
and I have tested them with console log. The drawImage just crashes and doesnt
re-draw the image with the new parameters.
Then when I hard code the same values (50,80) into the drawImage function,
it works fine.
So the drawImage function just wont accept my variable values.*/
this.ctx.drawImage(this.loadedImg,
cropX, cropY,
this.initialWidth, this.initialHeight,
topX,topY,
imageWidth, imageHeight
);
}
我有什么遗失的吗?