我尝试了一个托管在我自己的服务器上的简单 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")
不起作用,这是范围问题吗?
最佳答案
当您在 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/
关于javascript - KineticJS 在 Jsfiddle 中工作,而不是在我的网站上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13890321/