0

私はKineticJSを使用して、ユーザーがボックスの隅をドラッグして歪めることができるように取り組んでいます。たくさんのSOとグーグルを通して、コーナーの1つをドラッグすると、新しいボックスが再描画されるようになりました。

ただし、実行できるのは1回だけです。最初のドラッグ/停止後、コーナー（円）はドラッグまたはクリックできなくなります。最初の移動の前に、円のマウスオーバーテキストは問題なく機能します。

テストのために、両方のボックスをドラッグ可能にしました。再描画後、両方とも「到達可能」になります。しかし、私はサークルとのつながりを失いました-サークルや何かをドラッグすることはできません。それらをリスナーに再バインドする必要がありますか？

誰かが私を正しい方向に向けることができますか？

ここにjsfiddleへのリンクがあります：http：//jsfiddle.net/robschaefer/5qE64/2/

すべてのコードはjsfiddleに投稿されていますが、これが私のdragmove関数とdragend関数です。

            //on drag of corners, redraw line
        layer2.get('Circle').on("dragmove", function(){


            var c1x = c1.getPosition().x;
            var c1y = c1.getPosition().y;
            var c2x = c2.getPosition().x;
            var c2y = c2.getPosition().y;
            var c3x = c3.getPosition().x;
            var c3y = c3.getPosition().y;
            var c4x = c4.getPosition().x;
            var c4y = c4.getPosition().y;


            //draw dotted line
            var dotted = new Kinetic.Line({
                points: [c1x,c1y,c2x,c2y,c3x,c3y,c4x,c4y,c1x,c1y],
                stroke: 'red',
                draggable: true,
                strokeWidth: 3,
            });


            document.getElementById('output').innerHTML = 'WE ARE MOVING!!!';

            layer2.removeChildren();
            layer2.add(dotted);
            layer2.add(c1);
            layer2.add(c2);
            layer2.add(c3);
            layer2.add(c4);
            layer2.draw();


        });

        layer2.get('Circle').on("dragend", function(){

            var c1x = c1.getPosition().x;
            var c1y = c1.getPosition().y;
            var c2x = c2.getPosition().x;
            var c2y = c2.getPosition().y;
            var c3x = c3.getPosition().x;
            var c3y = c3.getPosition().y;
            var c4x = c4.getPosition().x;
            var c4y = c4.getPosition().y;

            document.getElementById('output').innerHTML  = 'drag stopped ' + c1x + ' ' + c1y + ' ' + c2x + ' ' + c2y + ' ' + c3y  + ' ' + c4x + ' ' + c4y;

            layer2.draw();

        });

助けてくれてありがとう！

R

4

1 に答える 1

0

これに遭遇した人のために、これが私がそれを修正した方法です：

ボックスの頂点とそれらを結ぶ線を別のレイヤーに配置します。これを行うと、頂点 (円) がマウス操作 (マウスオーバー、ドラッグなど) に使用できるようになります。

レイヤー内の他の形状 (再描画された線) にアクセスできる理由はまだよくわかりません.....

于 2012-11-29T04:57:45.447 に答える