Question

对Javascript不熟悉，我对this的理解有点不稳定。我已经阅读了一些文章和SO帖子并且学到了很多，但是我在实现一些代码时遇到了问题。我正在使用KineticJS库来实现一些canvas功能。我正在使用fiddle并且能够使用鼠标控件来调整图像大小，但是，当我将代码放入原型函数时，调整大小不再有效。

Canvas.prototype.addImg = function(){
  var self = this;
  var image;
  var imageObj = new Image();
  imageObj.onload = function() {
    image = new Kinetic.Image({
      x: 200,
      y: 50,
      image: imageObj,
      width: 106,
      height: 118,
      draggable: false
    });

    self.backgroundLayer.add(image);
    self.stage.add(self.backgroundLayer);
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

  var circle1 = new Kinetic.Circle({
        x: 150,
        y: 150,
        radius: 10,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        draggable: false
    });
    circle1.isResizing = false;
    circle1.on("click", function (e) {
        // toggle resizing true/false
        var isResizing = !this.isResizing;
        this.setDraggable(isResizing);
        self.backgroundLayer.setDraggable(!isResizing);
        this.setFill((isResizing ? "green" : "red"));
        this.isResizing = isResizing;
        self.backgroundLayer.draw();
    });
    circle1.on("dragmove", function () {
        if (this.isResizing) {
            var pos = this.getPosition();
            var x = pos.x;
            var y = pos.y;
            var rectX = image.getX();
            var rectY = image.getY();
            image.setSize(x - rectX, y - rectY);
            self.backgroundLayer.draw();
        }
    });
    self.backgroundLayer.add(circle1);
    self.backgroundLayer.draw();

}

我假设问题在于函数中使用this，但我不确定如何解决问题。有人能告诉我问题是什么以及如何解决这个问题？

Answer 1

我可以看到设置图像大小的行有问题：

image.setSize(x - rectX, y - rectY);

例如，如果 x 为100且 rectX 为200，则最终宽度为“-100”，这是不合法的。

在你提供的小提琴中，当我使用常数值时，图像会完美地重新调整大小：

rect.setSize(200, 200);

Modified fiddle

Answer 2

我遇到的解决方案是，它不是this的问题，而是setSize()方法的问题。由于某种原因，它不适用于我的本地应用程序。当我为setWidth()和setHeight()替换它时，一切都按照应有的方式进行。

使JS“this”在原型函数中起作用

2 个答案: