4

EaselJSで無限キャンバスを表示する方法はありますか? Javascript または JQuery でそれを行う方法を読みましたが、EaselJS でそれを管理する方法はありますか?

ありがとう！

4

1 に答える 1

11

JavaScript/jQuery を使用してキャンバス自体をドラッグ アンド ドロップできますが、EaselJS コンテンツには組み込みのドラッグ アンド ドロップ モデルがあります。サンプル フォルダーにある DragAndDrop サンプルを確認してください。

主な手順は次のとおりです。

  • 何かの mousedown イベントをリッスンします。どの表示オブジェクトでも、組み込みの EaselJS イベントを使用する必要があります。必要なドラッグ イベントが公開されず、Canvas の DOM イベントが役に立たないため、ステージ イベント「stagemousedown」は使用できません。
  • イベント ハンドラーに含まれるマウス イベントは、ドラッグ アンド ドロップの追加イベントを送出します。「mousemove」と「mouseup」のリスナーを追加します。
  • マウス移動イベントに応答して、キャンバス上のコンテンツを移動します。

これを示すために小さなスパイクをまとめました。 http://jsfiddle.net/lannymcnie/jKuyy/1/

一連のコンテンツを描画し、ドラッグして移動できます。赤いボックスはマウス イベントをリッスンするものですが、すべてのコンテンツを含む大きなコンテナーを移動するだけです。

ハイライトは次のとおりです。

dragBox.addEventListener("mousedown", startDrag); // Object listens to mouse press

function startDrag(event) {
    // Get offset (not shown here, see fiddle)
    event.addEventListener("mousemove", doDrag);
}
function doDrag(event) {
    // Reposition content using event.stageX and event.stageY (the new mouse coordinates)
}

それが役に立てば幸い！

編集: EaselJS の NEXT バージョン (0.7.0+、2013 年 8 月以降 GitHub で利用可能) には、さらに使いやすい新しいドラッグ アンド ドロップ モデルがあります。 新しいバブリング イベント モデルを使用すると、任意のオブジェクトに pressmove イベントと pressup イベントをアタッチするだけで、誰かがオブジェクトを押してからドラッグ アクションを行うたびにイベントを取得できます。

dragBox.on("pressmove", function(event) {
    // Note that the `on` method automatically sets the scope to the dispatching object
    // Unless you pass a scope argument.
    this.x = event.stageX;
    this.y = event.stageY;
});
于 2013-04-08T01:17:53.180 に答える