javascript - KineticJS 在 Jsfiddle 中工作，而不是在我的网站上工作

Question

我尝试了一个托管在我自己的服务器上的简单 KineticJS 示例，但在将 4 个 handle 放置在图像的 4 个 Angular 时遇到问题。 handle 点将位于错误的位置，如下面的屏幕截图所示。然而， handle 在 jsfiddle 中的位置正确!

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

我对 KineticJS 很陌生，如果能指出正确的方向，我将不胜感激，谢谢!

<小时/>

更新

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

通过将 addAnchor 放置在 imageObj.onload() 函数中来解决。

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';

但是，现在当我拖动应该重新缩放图像的 Angular handle 时，我收到错误:

Uncaught TypeError: Cannot call method 'setPosition' of undefined 

这里出了什么问题？我不明白为什么 group.get(".topLeft") 不起作用，这是范围问题吗？

Answer 1

当您在 initStage 函数中创建 thing 时，请为其提供一个稍后可以引用的 ID。
所以看起来像这样...

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

..然后在您的 update 函数中您可以像这样引用它...

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

这是一个工作示例...
http://jsfiddle.net/NPB77/2/