0

私はこのフィドルを持っています:

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

画像が正しく回転していません。私が使用したコードは次のとおりです。

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

誰もが私の数学の何が悪いのか知っていますか?

- - 編集 - -

私が欲しかったものを備えた新しいフェドル:http: //jsfiddle.net/zk9cn/

4

1 に答える 1

2

Math.atan2についてはわかりませんが、xとyの計算は私には正しくないようです。位置から中心ではなく、中心から位置を差し引きます。 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);

また、変数が使用されていないこともわかります。isDragging、refRotate、およびrotate。

- - - 編集 - -

角を拾って長方形を回転させたい場合は、次のコードを使用できます。角を拾うとき、中心位置で計算された度はすでに45です。そのため、角を正しく拾うことができません。45を調整することでそれは正しいように見えますが、直線を拾うと、再びうまくいかなくなります。意図的でない限り、要件に欠陥があるようです。 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);
于 2013-02-19T05:49:04.400 に答える