3

私は現在、ラインアップや特定の戦術を表示するためにプレイヤーを装った div をドラッグする、一種のオンライン コーチ戦術ボードを作ろうとしています。ドラッグにTouch Punchを使用していますが、PC、タブレット、スマートフォン (最後の 2 つがターゲット プラットフォーム) でうまく機能します。

私が今試して実装したいのは、ボタンを押すと、ドラッグされたプレーヤーの後に軌跡に線が描画され始めるため、特定のプレーヤーがどのように実行されるかのパターンです。つまり、最初にプレーヤーを開始位置に配置し、次にボタンでライン トレイルを開始し、それが表示されるようにランニング パターン内でドラッグし始めます。

私は現在、線の描画を で行ってい<canvas>ますが、それはプレーヤーのドラッグとは別に線をドラッグすることを意味し、特にタッチスクリーン。

これが可能かどうかは誰にもわかりますか？

4

1 に答える 1

2

raam86 さん、ありがとうございます。こんなに簡単だとは想像もしていませんでした。

これは、誰かがこの道を進んだ場合に備えて、私がそれを解決した方法です:

$( "[id^=home]" ).draggable({
        // options...
        start: function(event,ui){
            context.strokeStyle = 'Blue';
            $( this ).addClass("dragging");
            if (drawWhenDragging){
                context.beginPath();
                context.moveTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
            }
        },
        drag: function(event,ui){
            $( this ).addClass("dragging");
            if (drawWhenDragging){
                context.lineTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
                context.stroke();
            }
        },
        stop: function(event,ui){
            $( this ).removeClass("dragging");
            if (drawWhenDragging){
                context.closePath();
            }
        }
    });
于 2013-12-27T01:01:21.590 に答える