Kinetic.js：触摸时旋转图像

Question

I have this fiddle:

http://jsfiddle.net/WDjpx/2/

The image is not rotating correctly. The code that i used was:

var stage = new Kinetic.Stage({
    container: 'd',
    width: 300,
    height: 300
});

var layer = new Kinetic.Layer();
var isDragging = false;
var refRotation = null;

var rect = new Kinetic.Rect({
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50, 50],
    dragOnTop: true,
    draggable: true,
    dragBoundFunc: function (pos) {

        var xd = 150 - pos.x ;
        var yd = 150 - pos.y ;
        var theta = Math.atan2(yd, xd);
        var deg = theta * 180 / Math.PI;

        if (!isDragging) {
           isDragging = true;
           refRotation = deg;
        } else {
            var rotate = deg - refRotation;
            rect.setRotationDeg(deg);
        }

        return {
            x: this.getAbsolutePosition().x,
            y: this.getAbsolutePosition().y
        }
    }
});

layer.add(rect); stage.add(layer);

Anyone know what is wrong with my Math???

--- EDIT ---

New feddle with what i wanted: http://jsfiddle.net/zk9cn/

Answer 1

Don't know about Math.atan2, but it seems calculation of x and y is not right to me. I would deduct position from center, not center from position. http://jsfiddle.net/bighostkim/qZDcg/

    var x = 150 - pos.x;
    var y = 150 - pos.y;
    var radian =  Math.PI + Math.atan(y/x);
    this.setRotation(radian);

Other thing, I also see your variables are not in use; isDragging, refRotate, and rotate.

----- Edit ----

If you want to rotate rectangle by picking up the corner, you can use the following code. When you pick up the corner, degree calculated by center positon is already 45. That's why you cannot pick up the corner properly. By adjusting 45 makes it seem right, but when you pick up the straight line, it will go wrong again. It seems your requirement has a flaw in it unless it's intentional. http://jsfiddle.net/bighostkim/7Q5Hd/

    var pos = stage.getMousePosition();
    var xd = 150 - pos.x ;
    var yd = 150 - pos.y ;
    var theta = Math.atan2(yd, xd);
    var degree = theta / (Math.PI / 180) - 45;
    this.setRotationDeg(degree);