7

紙が表示されている div に対して大きすぎる場合は、紙をドラッグ可能にしたいと思います。

論文の blank:pointerdown および pointerup イベントを試してみましたが、マウスの動きをたどることができませんでした。また、jqueryを介して紙の要素をドラッグ可能にしようとしましたが、何もうまくいかないようです...

これを行う方法はありますか？

4

3 に答える 3

26

これは、JointJS イベントとドキュメント イベントを組み合わせて実現できます。グラフ表示は次のようにカプセル化されますdiv。

<div id='diagram'></div>

次に、JointJS のイベント ハンドラーを追加します。最初pointerdownに、ドラッグの開始位置を格納するイベントを追加します。

paper.on('blank:pointerdown',
    function(event, x, y) {
        dragStartPosition = { x: x, y: y};
    }
);

次に、位置を格納する変数を削除するときのドラッグの終了 (ポインタアップ) (進行中のアクティブなドラッグがあるかどうかのフラグとしても機能します):

paper.on('cell:pointerup blank:pointerup', function(cellView, x, y) {
    delete dragStartPosition;
});

JointJS は「紙のポインタの移動」イベントを公開しないため、mousemoveドキュメント イベントを使用する必要があります。たとえば、JQuery の場合:

$("#diagram")
    .mousemove(function(event) {
        if (dragStartPosition)
            paper.translate(
                event.offsetX - dragStartPosition.x, 
                event.offsetY - dragStartPosition.y);
    });

ドラッグ開始座標と現在のポインター位置を取得し、呼び出しを使用して用紙の位置を更新しpaper.translate()ます。

警告: ( を使用して) 用紙をスケーリングする場合paper.scale()は、ドラッグの開始位置もスケーリングする必要があります。

var scale = V(paper.viewport).scale();
dragStartPosition = { x: x * scale.sx, y: y * scale.sy};

への呼び出しはpaper.translate()、適切な位置に更新されます。

于 2016-03-22T10:22:34.960 に答える
5

次のことをお勧めします。

  1. blank:pointerdown event紙のドラッグを開始する紙のハンドラーを登録します (mousemove紙が「パン」状態であることを認識するためにハンドラーで使用するフラグを保存します)。
  2. 大きな紙<div>を CSS でコンテナに入れoverflow: autoます。これ<div>は、大きな紙への小さな窓になります。
  3. ドキュメント本文イベントのハンドラーを登録しmousemoveます (マウス カーソルが紙の領域を離れても、紙をドラッグしたい可能性が高いためですか?)。このハンドラーでは、コンテナーのscrollLeftおよびscrollTopプロパティを設定し<div>て、用紙を「パン」します。scrollLeftおよびscrollTopプロパティを調整するには、イベント オブジェクトのclientXおよびプロパティを、以前にハンドラーclientYに格納したものと同じプロパティと共に使用します。(つまり、最後の/blank:pointerdownからのパンのオフセットを見つけるために必要です)。mousemoveblank:pointerdown
  4. ドキュメント本文のマウスアップのハンドラーを登録し、このハンドラーで、手順 1 で設定した紙のドラッグ フラグをクリアします。
于 2015-02-11T10:16:53.220 に答える