使用Kineticjs单击将图像旋转到角度

Question

I am creating a speedometer with with kineticjs and I need the ability to rotate the needle it to a specified angle when the user clicks a button. I also need to be able to set the rotation point as well since it is not in the center.

I am using jQuery 1.8.3 and kinetic 1.5.1

Here is what I have so far:

    var stage = new Kinetic.Stage({
        container: 'needle',
        width: 152,
        height: 152
      });
    var layer = new Kinetic.Layer();

    var imageObj = new Image();
    imageObj.onload = function() {
        var needle = new Kinetic.Image({
          x: 63,
          y: 65,
          image: imageObj,
          width: 83,
          height: 22
        });

        // add the shape to the layer
        layer.add(needle);

        // add the layer to the stage
        stage.add(layer);
    };
    imageObj.src = 'http://example.com/assets/img/layout/dials/speedo_needle.png'); ?>';    

So taking this example how would I rotate the needle to whatever angle I want in an interval or click event?

Answer 1

To rotate the image, use a function with imageObject.setRotation(45) where '45' is number of degrees.

To define the rotation point, set offset propertie for imageObject, or change it dynamically with imageObject.setOffsetX(100) and imageObject.setOffsetY(100) or any other number.