使用kineticjs如何旋转到位图像对象？ [英] Using the kineticjs how to rotate an image object in place?

问题描述

考虑以下code：

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度，但支点是在中心？

How to make the image rotate in place, like 360 degrees but the pivot point to be in the center ?

所以，当我使图像对象，目的是有一个动画运行在那里。
目前，它仅在一侧旋转图像。

So, when I make the image object, the goal is to have an animation running there. Currently it's only rotating the image on one side.

推荐答案

您需要使用offset属性（不知道从何处取得offsetX和offsetY - 一个旧版本的KinectJS？）：

You need to use the offset property (not sure where you got offsetX and offsetY from--an older version of KinectJS?):

image = new Kinetic.Image({
            x : 500,
            y : 135,
            image : imageObj,
            width : 99,
            height : 99,
            offset: [50, 50]
        });

这篇关于使用kineticjs如何旋转到位图像对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！