1

私はKineticJSを使用していますが、これまでは素晴らしい経験でした。私が持っている1つの質問は、ドラッグについてです。この例の画像は「draggable：true」に設定されていますが、最初にドラッグした後は、再度移動できません。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 2754,
    height: 1836
});
var layer = new Kinetic.Layer();
var scale = '0.16339869281045751633986928104575';
var imageObj = new Image();
imageObj.onload = function () {
    var img = new Kinetic.Image({
        x: 0,
        y: 0,
        height:612,
        width:612,
        image: imageObj,
        draggable: true,
        dragBoundFunc: function (pos) {
            console.log(img.getAttrs());
            return { 
                x: Math.floor((pos.x/scale)/306)*306,
                y: Math.floor((pos.y/scale)/306)*306 
                };
        }
    });

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

    // add the layer to the stage
    stage.add(layer);

};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

http://jsfiddle.net/7UEC6/

どんな助けでも大歓迎です。追加のクレジットとして、一般的にドラッグをスムーズにする方法を提案できます。

ありがとう！

編集：画像を最初にドラッグした後、ユーザーが画像をドラッグしようとしたときにdragBoundFuncが呼び出されなくなったことに気づきました

画像を0,0にドラッグして戻しても機能しますが、それ以外の場合は機能しません

4

1 に答える 1

2

これは、現在の KineticJS では不可能です。

その理由を説明してみましょう。

CSS3 要素 (まだ標準ではありません) である transform:scale を使用すると、実際の要素の視覚的な位置もスケーリングされます。ただし、MouseEvent の相対的なマウス位置は、視覚的な位置のみを渡します (スケーリングされた位置ではありません)。

KineticJS が使用するドラッグ用のマウス クリック イベントは、MouseEvent の位置を読み取るだけで、視覚的な (スケーリングされていない) ものであり、キャンバス要素の変形は考慮されていません。

画像の x/y を次のように設定すると、最初のドラッグすらできなくなります

    x: 612,
    y: 612,

ただし、0 と 0 を設定すると、スケーリングされた位置とスケーリングされていない位置が同じになるため、それに応答します。

上記の x/y 612 と 612 の例では、クリックしてドラッグすることはできません。KineticJS は 612 と 612 をクリックしていないことを理解していますが、100 と 100 と認識しています。

理由は簡単で、私が説明したとおりです。

MouseEvent は、スケーリングされた X/Y を渡しませんが、X/Y の視覚的な位置を渡します。

CSS3 がいつ標準になるかは誰にもわかりませんが、十分にサポートされるかもしれません :)

一方、キャンバスで変換を使用することはお勧めしません。独自のフレームワークを構築しない限り、変換されたキャンバスですべてを正しく行うことはかなり困難です。

于 2013-03-02T00:20:02.070 に答える