2

HTLM 5 Canvas KineticJS を使用して、リストを含むボックスを作成しようとしています。ボックスをドラッグするためのハンドルをボックスに付けたいと思います。また、リスト項目もドラッグできるようにしたいと考えています。これを Kinetic.Group として実装しました。以下の簡略化された例のリスト項目は、小さな Kinetic.Text オブジェクトです。オブジェクトのドラッグを終了したときに、オブジェクトの属性を更新するのに問題があります。Chrome または Firefox で実行し、テキスト オブジェクト ボックスの 1 つをドラッグ アンド ドロップすると、dragend イベント ハンドラがそのボックスをグループから削除するため、画面から消えるはずです。代わりに、画面上の要素をマウスダウンするまで表示されたままになり、その後消えます。

他のイベント ハンドラーを追加し、drawhit 関数と drawscene 関数を呼び出し、simulate 関数を使用してシミュレートされたマウス クリックを生成しようとしました。これらにはある程度の効果がありますが、dragend ハンドラーの最後ですべてを正しい状態のままにする組み合わせは見つかりません。たとえば、ボックスのドラッグ ハンドルが機能しない場合があります。私のコードの他のバージョンでは、同様の奇妙な効果が発生し、オブジェクトの更新を完了するために余分なマウス クリックが必要になるようです。

再描画を強制する関数をキャンバスのソースで調べ、オンラインで検索しましたが、その目的を意図していると思われるものは何も見つかりませんでした。理想的には、Canvas がこれを自動的に行うので、明らかな手順が抜けているのではないかと思います。それが何であるかについてのアイデアはありますか？

これが私のJavaScriptです：

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

var layer = new Kinetic.Layer();

var group = new Kinetic.Group({
    x: 50,
    y: 50
});

var box = new Kinetic.Polygon({
    points: [0, 20, 0, 100, 200, 100, 200, 0, 20, 0],
    stroke: 'blue',
    strokeWidth: 2
});
group.add(box);     

var handle = new Kinetic.Polygon({
    points: [0, 0, 0, 20, 20, 0],
    fill: 'blue',
    stroke: 'blue',
    strokeWidth: 2
});
group.add(handle);

handle.on('mouseover', function() {
    group.setDraggable(true);
    document.body.style.cursor = 'pointer';
    });

handle.on('mouseout', function() {
    group.setDraggable(false);
    document.body.style.cursor = 'default';
});     

var colors = ['red', 'orange', 'yellow'];
for(var n = 0; n < 3; n++) {
    (function() {
        var i = n;
        var item = new Kinetic.Text({
            x: 20 + i * 25,
            y: 20,
            width: 20,
            height: 10,
            fill: colors[i],
            draggable: true,
            id: i,
        });

        group.add(item);

        item.on('dragend', function() {
            console.log('item dragend');
            id = this.getId();
            var children = group.getChildren();
            var len = children.length;
            for(var i = 2; i < len; i++) {
                if (id == children[i].getId()) {
                    children.splice(i,1);
                    break;
                };
            }
        });
    })();
};

layer.add(group);
stage.add(layer);

この HTML を使用して実行します。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
      <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.js"></script>    
    <script src="/Users/tsnichols/Documents/workspace/WebScheduler/listgroup.js"></script>
  </body>
</html>
4

1 に答える 1

0

はい、stage.draw() が最も簡単なソリューションですが、複数のレイヤーがあり、多数のアニメーションを使用している場合は、パフォーマンスのために、layer.draw() を使用して単一のレイヤーを描画する必要があります。

于 2013-01-07T17:01:54.927 に答える