Making JS "this" work in prototype function

Question

Being new to Javascript, my understanding of this is a bit shaky. I've read a few articles and SO posts and learned quite a bit, but I'm having issues implementing some code. I'm using the KineticJS library to implement some canvas functions. I was working with a fiddle and was able to get an image to resize with the mouse control, however, when I put the code into a prototype function, resizing no longer works.

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();

}

I am assuming the problem lies within the use of this in the function, but I'm not sure how to fix the problem. Could somebody tell me what the problem is and how I would fix this?

And which `this` are you talking about? How/where do you call `Canvas.prototype.addImg`? — Felix Kling, Feb 18 '14 at 03:29
@FelixKling I call addImg as an onclick event for a button in my view. The image is added to the canvas along with the circle that's used to resize the image. It's the resizing that doesn't work. I'm not getting any console errors either. — jordan, Feb 18 '14 at 03:55

score 1 · Accepted Answer · answered Feb 18 '14 at 05:04

1

I can see a problem with the line that is setting the size of image:

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

For example if x is 100 and rectX is 200, you end up with a width of '-100', which is not legal.

In the fiddle you provided, when I use constant values, the image re-sizes perfectly:

rect.setSize(200, 200);

Modified fiddle.

answered Feb 18 '14 at 05:04

Kashif Imran

159
3
11

I've come to the conclusion that this is the problematic line of code, however, it's not x,y value that is the problem, as far as I can tell. In my application, I set the size with constant values and the image doesn't resize at all. It is strange that it is working in the fiddle, but not the application. – jordan Feb 18 '14 at 05:17
Can you show how you are using this? Also, what is 'Canvas' exactly, the prototype of which you are trying to extend? If it is the Canvas of KineticJS, then you need to use the namespace like Kinetic.Canvas.prototype.addImg = function() {...} – Kashif Imran Feb 18 '14 at 05:23
Canvas is a class I created to help separate some of the functions I'm implementing. var view = new Canvas(); adds the canvas to the html. I then have a button with an onclick event view.addImg() – jordan Feb 18 '14 at 05:40
When I try image.setHeight(400), this works just fine. I'm not sure why this would work and setSize(400,400) would not. – jordan Feb 18 '14 at 05:51
Apparently, this is due to the fact that you are using different KineticJS versions in different places. KineticJS API changes all the time. – Kashif Imran Feb 18 '14 at 06:23

score 0 · Answer 2 · answered Feb 18 '14 at 05:55

The solution I've come upon, is that it is not an issue of this, but the setSize() method. For some reason or another, it is not working in my local application. When I replace this for setWidth() and setHeight(), everything works the way that it should.

Making JS "this" work in prototype function

2 Answers2