1

我正在尝试使用 KineticJS 为图像设置动画以在屏幕上移动，但我一直没有收到函数错误。图像显示正常，但它一直说 imageObj.move 不是函数，我不知道为什么。我对javascript和KineticJS有点陌生，所以我可能只是犯了一个非常基本的错误，所以非常欢迎一些帮助。谢谢！

window.onload = function(){ //init function
var stage = new Kinetic.Stage("container", 600, 600);
var fluffyImgLayer = new Kinetic.Layer();

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

    fluffyImgLayer.add(imageF);

    stage.add(fluffyImgLayer);
    }

    imageObj.src = "Flutter_Fluffy_100.png";

    stage.onFrame(function(frame){
        console.log("fired")
        imageObj.move(10,10);
        fluffyImgLayer.draw();
    });

    var period = 2000;

    stage.start();
}
4

2 回答 2

4

实际上，要回答您的问题，问题在于您试图在图像对象（而不是Kinetic.Image对象）上使用 KineticJS 方法。改用这个：

imageF.move(10,10);

于 2012-07-09T21:53:48.660 回答
1

你可以做这样的事情并完成它：

imageObj.x += 3;
imageObj.y += 3;

你需要在imageF前面加上var：

var imageF = new Kinetic.image({

看看： http ://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

你得到的错误是因为你没有在任何地方定义 move() 。您可以制作一个移动功能并允许对象使用它。或者，您可以创建这样的函数：

function moveMyThing(myObj, xchange, ychange)
{
  myObj.x += xchange;
  myObj.y += ychange;
}

然后调用它：

moveMyThing(imageObj, 3, 3);

如果一切正常，KineticJS 往往会刷新 60FPS 左右，所以这 3 实际上相当快。您还需要考虑检查是否该更新您的移动逻辑。最好解开它们。

前任：

stage.onFrame(function(frame){
    console.log("fired")
    time++;
    if(readyToThink(time, 6)) //check if you want to do something 
      moveMyThing(imageObj,3,3); //Then move it...
    fluffyImgLayer.draw();
});

function readyToThink(time, limit){
  if(time > limit) //some amount of time to get here
  {
    time = 0; //reset counter
    return true;
  }
  return false;
}

为了解释跳跃性，您可以对运动进行补间。

于 2012-03-21T04:45:20.180 回答