2012-05-01 11 views
1

TL;第二canvas要素を表示するDR

は、ユーザのタッチが失われた意味 - 私は、ユーザーが他の要素を重ねるときにtouchmoveイベントトリガーを維持するにはタッチデバイスが必要ですか?

もう一度

を画面をタッチする必要はしたくない私は(HTML5のCanvasゲームを構築していますゲームは画像を表示し、それをパズルピースにスライスし、ユーザがそのピースを再び一緒に戻す準備ができているランダムな順序でピースを表示する)。

(私の開発ブランチのための)ソースコードはここで見ることができます:

https://github.com/Integralist/HTML5-Image-Slider-Game/tree/dragdrop

ゲームの一つの重要な部分は、ユーザーが一枚選択した後、パズルのピースをクリックした場合は、いずれかに移動していることですパズルの利用可能なスペース。ユーザーが数ミリ秒以上クリックしていると、自動的に動くのではなく、選択したパズルピースをドラッグしたいと思います。

私がこれを行う方法は、元のキャンバスの上に別のキャンバスを置くことです。この2番目のキャンバスはドラッグ&ドロップ機能のためにのみ使用されています。私がこのルートに行った理由は、パズルピースをドラッグしている間に、現在のパズル状態を保存してから、それを絶えず再描画する必要があるからです。パフォーマンス上の理由からしたくないものでした。

これまでのところ、マウスベースのコンピュータでうまくいきました.2番目のキャンバスにドラッグするように設定した後、私はmousemoveイベントが発生し、ユーザーはキャンバスの周りをドラッグできます。

タッチデバイスでmousemoveイベントが発生していないため、私はtouchmoveイベントを使用していますが、2番目のキャンバスを表示してドラッグプロセスを開始すると、再び画面に触れる必要がありますタッチ移動リスナーをトリガーします。ユーザーがクリックして自分のデバイスで指を押さえているが、表示されている2番目のキャンバスが指のタッチにフォーカスを失わせてしまったので、ユーザーが恐ろしいことが懸念される限り、彼らは現在、再び画面に触れてドラッグを開始します。

これを回避するには、手動でtouchmoveイベントをトリガしていましたが、これはうまくいきませんでした。コードをダウンロードして(上記を参照)、これをタッチデバイスで試してみると、私の言いたいことがわかります。何かの理由でパズルピースが突然キャンバスの左上に飛びますか? touchmouseイベントがトリガを開始するためには、画面に再び触れる必要があります。

私は本当にこれがちょっとした問題だと思っています。誰かがそれについて本当に巧妙な作業をしています。

ありがとうございます!

答えて

0

この戦略についてはどうですか?下のものの上に常に2番目の透明キャンバスを置いてみてください。ユーザーがタッチ/クリックすると、下部のキャンバスではなく上部のキャンバスで行われ、下部のキャンバスからそのキャンバスをすぐに消去して上部のキャンバスに描画して、そのキャンバスを周り続けるようにします?