Wie man ein Papier ziehbar macht

Question

Wenn das Papier zu groß für das Div ist, in dem es gezeigt wird, möchte ich das Papier ziehbar machen.

Ich habe versucht, die Papiere leer: Zeiger-und Mauszeiger-Ereignisse, war aber nicht in der Lage, nur die Mausbewegung folgen. Ich habe auch versucht, das Element des Papiers ziehbar über jquery, aber nichts scheint den Trick zu tun ...

Gibt es eine Möglichkeit, dies zu tun?

Answer 1

Ich schlage vor, die folgenden:

1. einen Handler für das Papier registrieren blank:pointerdown event, die das Papier ziehen (Speichern eines Flag initiiert, die Sie in Ihrem mousemove Handler verwenden werden, das Papier in der „Panning zu erkennen " Zustand).
2. Legen Sie das große Papier in einen <div> Container mit CSS overflow: auto. Diese <div> wird Ihr kleines Fenster zum großen Papier sein.
3. registrieren Sie einen Handler für Dokumentkörper mousemove Ereignis (weil Sie höchstwahrscheinlich möchten, dass das Papier gezogen wird, selbst wenn der Mauszeiger den Papierbereich verlässt?). In diesem Handler werden Sie die Eigenschaften scrollLeft und scrollTop Ihres <div> Containers so einstellen, dass das Papier "schwenkt". Zum Anpassen der Eigenschaften scrollLeft und scrollTop verwenden Sie die Eigenschaften clientX und clientY des Ereignisobjekts zusammen mit denselben Eigenschaften, die Sie zuvor in Ihrem Handler blank:pointerdown gespeichert haben. (mit anderen Worten, Sie benötigen diese, um den Versatz des Schwenkens von der letzten mousemove/blank:pointerdown zu finden).
4. einen Handler für Dokumentkörper mouseup und in diesem Handler registrieren, löschen Sie Papier Ziehen Flagge, die Sie 1.

Answer 2

in Schritt stelle ich weiß, das ist ein etwas alten Thread, aber ich wurde für ein mit diesem fest während und über eine saubere Lösung mit der SVG Pan und Zoom-Bibliothek. Git hub link here

EDIT - habe ich eine Plunker der Schritte unter (plus einige Extras) hier: SVG panning with Jointjs

Erster Schritt nach dem Papier zu schaffen ist SVG Pan und Zoom zu initialisieren:

panAndZoom = svgPanZoom(targetElement.childNodes[0], 
     { 
      viewportSelector: targetElement.childNodes[0].childNodes[0], 
      fit: false, 
      zoomScaleSensitivity: 0.4, 
      panEnabled: false 
     }); 

Wobei targetElement das div ist, in das das jointjs-Papier gegangen ist. Jointjs wird darin ein SVG-Element erzeugen (daher die childNodes [0]) und innerhalb dieses Elements ist das erste Element das Viewport-Tag (daher childNodes [0] .childNodes [0] im Viewportselektor). In diesem Stadium ist die Pan-Funktion deaktiviert, da sie in meinem Anwendungsfall mit Drag-and-Drop-Elementen auf dem Papier interagiert. Stattdessen, was ich tue, ist eine Referenz auf das Objekt panAndZoom halten und wechseln Sie dann schwenken und Ausschalten auf den Rohling: pointerdown und leer: pointerup Ereignisse:

paper.on('blank:pointerdown', function (evt, x, y) { 
     panAndZoom.enablePan(); 
    }); 
paper.on('cell:pointerup blank:pointerup', function(cellView, event) { 
      panAndZoom.disablePan(); 

});

Nur ein weiterer Weg, um das Problem anzugehen ich denke, aber ich fand es ein wenig einfacher, und es gibt Sie heran zu und Sie können die Empfindlichkeit einstellen usw.

Answer 3

Dies kann mit einer Kombination von JointJS Ereignissen erreicht werden und Ereignisse dokumentieren.Der Grafik-Display ist in einem div gekapselt:

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

dann die Event-Handler für JointJS hinzufügen, zuerst das pointerdown Ereignis, bei dem wir die Startposition des Schlepp speichern:

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

Dann wird das Ende der drag (pointerup), wenn wir die Variable wir die Position speichern, löschen in (es wirkt auch als ein flag, ob es einen aktiven Widerstand im Gange ist):

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

Da JointJS kein Ereignis "Papierzeigerbewegung" darstellt, müssen wir das Dokumentereignis mousemove verwenden. Zum Beispiel mit JQuery:

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

Wir bekommen die Drag-Koordinaten und die aktuelle Zeigerposition starten und die Papierposition aktualisieren, um den paper.translate() Anruf mit.

WARNUNG:, wenn Sie das Papier (mit paper.scale()) skalieren, müssen Sie auch die Startposition des Schlepp skalieren:

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

Die Anrufe paper.translate() wird dann in die richtige Position aktualisieren.