Используя кинетики, как повернуть объект изображения на месте?

Учитывая следующий код:

var stage = new Kinetic.Stage({
            container : "container",
            width : 600,
            height : 200
        });

var layer = new Kinetic.Layer();


// one revolution per 4 seconds
var angularSpeed = Math.PI / 2;

var imageObj = new Image();
var image = {};
imageObj.onload = function() {
    image = new Kinetic.Image({
                x : 500,
                y : 135,
                image : imageObj,
                width : 99,
                height : 99,
                offsetX: 0,
                offsetY: 0
            });
    image.rotation = 0;

    layer.add(image);
    stage.add(layer);
    stage.onFrame(function(frame) {
                var angleDiff = frame.timeDiff * angularSpeed / 1000;
                image.rotateDeg(angleDiff);

                layer.draw();
            });
                stage.start();


};
imageObj.src = "images/tire-brands.png";

Как заставить изображение вращаться на месте, например, на 360 градусов, но точка поворота должна быть в центре?

Итак, когда я создаю объект изображения, цель состоит в том, чтобы там работала анимация. В настоящее время он вращает изображение только в одну сторону.


javascript animation kineticjs
person Damjan Dimitrioski    schedule 06.07.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вам нужно использовать свойство offset (не знаете, откуда вы взяли offsetX и offsetY из старой версии KinectJS?):

image = new Kinetic.Image({
            x : 500,
            y : 135,
            image : imageObj,
            width : 99,
            height : 99,
            offset: [50, 50]
        });
person John Wiseman    schedule 19.07.2012
comment
После добавления смещения поведение setPosition() не работает должным образом, оно позиционирует изображение со смещения, а не из верхнего левого угла. - person Gohel Kiran; 08.12.2012

arrow_upward
3
arrow_downward 

function rotate(angle){ // 90 or -90
    if(stage.getHeight() <= image.getWidth()){ 
        aspect = image.getWidth() / image.getHeight();
        height = stage.getHeight() / aspect;
        image.setWidth(stage.getHeight());
        image.setHeight(height);
    }
    image.setOffset(image.getWidth()/2,image.getHeight()/2);
    image.setPosition(stage.getWidth()/2,stage.getHeight()/2);
    image.rotateDeg(angle);
    layer.draw();
}

приведенный выше код помог мне повернуть изображение

person user2201690    schedule 27.03.2013