KineticJS在Jsfiddle工作,而不是在我的网站上

时间:2012-12-15 07:30:28

标签: javascript jquery html5 canvas kineticjs

我尝试在我自己的服务器上托管一个简单的KineticJS示例,我在将4个手柄放在Image的4个角上时遇到了问题。手柄点位于错误的位置,如下面的屏幕帽所示。但是手柄在jsfiddle中正确定位!

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

enter image description here

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

但是,现在当我拖动应该重新缩放图像的角手柄时,我收到错误:

Uncaught TypeError: Cannot call method 'setPosition' of undefined 

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

1 个答案:

答案 0 :(得分:3)

thing函数中创建initStage时,请为其提供一个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/