Question

I tried a simple KineticJS example hosted on my own server, and I have a problem placing the 4 handles at the 4 corners of the Image. The handle points will be at the wrong position, as shown in the screencap below. However the handles are position correctly in the jsfiddle!

jsfiddle: http://jsfiddle.net/NPB77/

I’m very new to KineticJS, will really appreciate if I can be pointed in the right direction, thank you!

---

Update

jsfiddle: http://jsfiddle.net/NPB77/1/

Solved by placing addAnchor within the imageObj.onload() function.

var imageObj = new Image();
imageObj.onload = function() {
    var thing = new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj
    });

    addAnchor(thingGroup, 0, 0, "topLeft");
    addAnchor(thingGroup, imageObj.width, 0, "topRight");
    addAnchor(thingGroup, imageObj.width, imageObj.height, "bottomRight");
    addAnchor(thingGroup, 0, imageObj.height, "bottomLeft");

    thingGroup.add(thing);
    stage.draw();
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

However, now when I drag the corner handles which is supposed to rescale the image, I get the error:

Uncaught TypeError: Cannot call method 'setPosition' of undefined 

What went wrong here? I dont understand why group.get(".topLeft") is not working, is this a scope problem?

Answer 1

When you create thing in your initStage function give it an id that you can reference later.
So it looks like this…

var thing = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,
    id: "thingImage"
});

..then in your update function you can reference it like this…

var image = group.get("#thingImage")[0];

Here’s a working example…
http://jsfiddle.net/NPB77/2/