0

画像上でクリックされたマウスとオブジェクトの中心に対するマウスの角度に応じて、画像オブジェクトを回転させようとしています。

単位円を考えてみてください。マウスがその円のどこにあるかに基づいて、画像が円を中心に回転します。

私は現在持っています

var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 500,
id: "myCanvas",
name: "myCanvas"
});
var layer = new Kinetic.Layer();
//gets the canvas context
var canvas = stage.getContainer();
var mousePosX;
var mousePosY;
var mouseStartAngle;
var selectedImage;
var mouseAngle;
var mouseStartAngle;
console.log(canvas)

var shiftPressed
window.addEventListener('keydown', function (e) {
if (e.keyCode == "16") {
    shiftPressed = true;
}
console.log(shiftPressed)
}, true);

window.addEventListener('keyup', function (e) {
if (e.keyCode == "16") {
    shiftPressed = false;
}
console.log(shiftPressed)
}, true);

function drawImage(imageObj) {

var dynamicImg = new Kinetic.Image({
    image: imageObj,
    x: stage.getWidth() / 2 - 200 / 2,
    y: stage.getHeight() / 2 - 137 / 2,
    width: 100, //imageObj.width,
    height: 100, // imageObj.height,
    draggable: true,
    offset: [50,50] //[(imageObj.width/2), (imageObj.height/2)]

});

dynamicImg.on('mousedown', function () {


    selectedImage = this;
    console.log("x: " + this.getX())
    console.log("y: " + this.getY())

    var mouseStartXFromCenter = mousePosX - (this.getX() + (this.getWidth() / 2));
    var mouseStartYFromCenter = mousePosY - (this.getY() + (this.getHeight() / 2));
    mouseStartAngle = Math.atan2(mouseStartYFromCenter, mouseStartXFromCenter);

    if (shiftPressed) {
        //console.log("trying to switch draggable to false");
        //console.log(this)
        this.setDraggable(false);
    }
});

dynamicImg.on('mouseup mouseout', function () {
    //console.log('mouseup mouseout')
    this.setDraggable(true);
});


dynamicImg.on('mouseover', function () {
    document.body.style.cursor = 'pointer';
});
dynamicImg.on('mouseout', function () {
    document.body.style.cursor = 'default';
});

imageArray.push(dynamicImg);
layer.add(dynamicImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function () {
drawImage(this);

};
imageObj.src = 'http://localhost:60145/Images/orderedList8.png';

function getMousePos(evt) {

var rect = canvas.getBoundingClientRect();
return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
};
}


canvas.addEventListener('mouseup', function () {
selectedImage = undefined;
});

canvas.addEventListener('mousemove', function (evt) {
mousePos = getMousePos(evt);
//console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y)
mousePosX = mousePos.x;
mousePosY = mousePos.y;

if (selectedImage != undefined) {

    mouseXFromCenter = mousePosX - selectedImage.getX();
    mouseYFromCenter = mousePosY - selectedImage.getY();
    mouseAngle = Math.atan2(mouseYFromCenter, mouseXFromCenter);

    var rotateAngle = mouseAngle - mouseStartAngle;

    selectedImage.setRotation(rotateAngle);

}
}, false);

コードにはいくつかのことがあります。-'shift'が押され、画像でmousedownイベントが発生した場合にのみ、回転を許可する必要があります。

-ページの存続期間中、キャンバスに動的にデータが入力されるため、動的な画像の描画を維持する必要があります。

これは私がやりたいのと同じようなことの良い例ですが、canvas/kineticjsでそれを機能させることができません。 http://jsfiddle.net/22Feh/5/

4

3 に答える 3

1

dragBoundFuncを使用するともっと簡単になります。http://jsfiddle.net/bighostkim/vqGmL/

dragBoundFunc: function (pos, evt) {
    if (evt.shiftKey) {
        var x = this.getX() - pos.x;
        var y = this.getY() - pos.y;
        var radian = Math.PI + Math.atan(y/x);
        this.setRotation(radian);
        return {
            x: this.getX(),
            y: this.getY()
        }
     } else {
        return pos;
     }
}
于 2013-02-19T06:22:51.177 に答える
0

.on（）イベントが何をするかをより明確にする必要があります。コードでは、図形のmousedownは、mouseStartAngleを計算する以外のことは何もしませんが、何もしません。また、shapeイベントでのmouseUpもあまり効果がありません。すべての作業を行うのはブラウザ/クライアントのマウスダウン/マウスアップです。そのため、一部のクリックで適切に回転し、他のクリックでは回転しません。

回転を設定するための多くのオプションがあります。ここに2つあります。

オプション1：マウスダウン時にラジアンを手動で設定します

  dynamicImg.on('mousedown', function () {   
    dynamicImg.setRotation(mouseStartAngle); //set the rotation degree
    layer.draw(); // redraw the layer
  }

オプション2：kineticJSに回転をアニメーション化させます

  dynamicImg.on('mousedown', function () { 
    dynamicImg.transitionTo({  
        duration: 1,       // length of animation in seconds
        rotation: mouseStartAngle   // your angle, in radians
    });
  }

更新されたjsfiddle：http: //jsfiddle.net/WXHe6/1/

ここにいくつかの追加の注意事項があります：

あなたが問題を抱えている理由は、あなたのコードが構造化されているためです、申し訳ありませんが、少し厄介な方法です。組み込みのkineticJS機能を使用するのではなく、ブラウザーイベントをキャンバスと混合し、リスナーをキャンバスに追加します。たとえば、stage.getUserPosition（）を使用してマウス座標を取得できます。このようにプロジェクトを構造化する必要がない限り、それを避けるようにしてください。

私が気に入っているのは、コードを分割する関数を作成したことですが、欠点としては、回転角の計算や更新など、同じことを行う複数の関数があります。角度を取得するために1つの関数を作成してみませんか？

いくつかのヒント：

  1. 機能には主にKineticJSを使用してみてください（SHIFTなどのボタンにはイベントリスナーが必要になると思います）。つまり、stage.getUserPosition（）;のようなものを使用します。evt.clientXではなくマウス/タッチ座標を取得するために、それはよりクリーンであり、作業はすでに行われているので、車輪の再発明をする必要はありません。

  2. 形状の回転を設定/取得するための1つの関数を作成します。その後、いつでも呼び出すことができます。（繰り返しの少ないコードを使用してください）

  3. Shiftキーを押したときに図形をドラッグできないようにする場合は、アイテムをクリックする前にドラッグできるように設定する必要があります。ボタンリスナーがあるので、Shiftキーを押したときにすべての図形の回転を無効にするか、カーソルの下にある図形だけを無効にすることができます。

  4. imageArray.push（dynamicImg）; これが本当に必要かどうかわからない場合、すべての要素に配列としてアクセスする必要がある場合は、常にlayer.getChildren（）;を実行できます。レイヤー内のすべての画像を取得するか、layer.getChildren（）[0]のように数値でアクセスします。（作成順）

于 2013-02-18T21:36:23.000 に答える
0

私の間違い、私はあなたの質問を読み間違えました。あなたは本質的に1行欠けていました：

    layer.draw();

Shiftキーを押しながらマウスを動かすと、マウスがうまく回転するのがわかります。 http://jsfiddle.net/WXHe6/2/

    canvas.addEventListener('mousemove', function (evt) {
            mousePos = getMousePos(evt);
            //console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y)
            mousePosX = mousePos.x;
            mousePosY = mousePos.y;

            if (selectedImage != undefined) {

            mouseXFromCenter = mousePosX - selectedImage.getX();
            mouseYFromCenter = mousePosY - selectedImage.getY();
            mouseAngle = Math.atan2(mouseYFromCenter, mouseXFromCenter);

            var rotateAngle = mouseAngle - mouseStartAngle;

            selectedImage.setRotation(rotateAngle);
            layer.draw(); // <--------------- right here
  }
  }, false);
于 2013-02-18T21:40:07.030 に答える