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 に答える