KineticJS как оживить изображение - PullRequest
Новая
       19

KineticJS как оживить изображение

1 голос
/ 20 марта 2012

Я пытаюсь анимировать изображение, используя 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();
}

Ответы [ 2 ]

4 голосов
/ 10 июля 2012

На самом деле, чтобы ответить на ваш вопрос, проблема в том, что вы пытаетесь использовать метод KineticJS для объекта изображения (а не для объекта Kinetic.Image). Используйте это вместо:

imageF.move(10,10);

1 голос
/ 21 марта 2012

Вы можете сделать что-то подобное и покончить с этим: 

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

Вам нужно добавить var перед imageF: 

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 на самом деле довольно быстрая. Вы также захотите проверить, пришло ли время обновить логику движения. Лучше всего их расцепить.

Ex: 

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

Чтобы учесть скачок, вы можете изменить движение.

...