Canvas drawImage()函数没有注册来自另一个函数的输入

时间:2017-05-01 20:35:37

标签: javascript html5 canvas

我正在创建一个裁剪工具,我在一个函数中有一个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
    );
}

我有什么遗失的吗?

0 个答案:

没有答案