Ziehen Sie Objekte im canvas-Bereich

Ich Suche eine einfach zu bedienende Methode zum zuweisen Verhalten "bewegen", um mehrere Objekte (Bilder, Formen usw.) in Leinwand. Hat jemand eine gute Möglichkeit oder wissen alle Bibliotheken für das ziehen von Objekten um? Dank

InformationsquelleAutor der Frage Rigil | 2010-12-30

  1. 18

    Erstellen Sie Ihre eigenen Maus-Ereignisse dauert ein wenig Arbeit, idealerweise sollte man entweder erstellen, oder verwenden Sie eine Art mini-Bibliothek. Ich überlege, etwas zu schaffen, wie dies in der nahen Zukunft. Trotzdem habe ich eine drag and drop demo auf jsFiddle zeigt wie ziehen Sie die Bilder - man kann es sehen hier.

    Können Sie erstellen ziehbar Bilder wie dieses:

    var myImage = new DragImage(sourcePath, x, y);

    Lassen Sie mich wissen, wenn Sie irgendwelche Fragen über diese. Hoffe, es hilft.

    BEARBEITEN

    Es wurde ein Fehler beim verschieben mehrerer Bilder. Hier ist eine neue version.

    Andere Sache, möchten Sie vielleicht check out ist easeljs es irgendwie im Stil von AS3... mausevents ziehen etc...

    InformationsquelleAutor der Antwort Zevan

  2. 13

    Dem HTML-Canvas—anders als SVG-oder HTML—verwendet eine nicht beibehalten (oder unmittelbaren) Grafik-API. Dies bedeutet, dass, wenn Sie etwas zeichnen (wie ein Bild) auf der Leinwand nicht wissen, was bleibt. Das einzige, was Links ist, Pixel auf der Leinwand gemischt mit allen vorherigen Pixel. Man kann nicht wirklich ziehen eine Teilmenge der Pixel, für eine Sache, die Pixel wurden 'unter' Ihnen Weg sind. Was Sie würden tun müssen, ist:

    1. Track der mousedown Ereignis und sehen Sie, ob es in die 'richtige' Position für das ziehen. (Sie haben zu verfolgen, was für Bilder/Objekte sind und wo mit der Maus auszuführen hit-detection.)
    2. Als der Benutzer zieht die Maus, ziehen wieder die gesamte Leinwand aus dem nichts, zeichnen Sie das Bild in einem neuen Ort jeder Zeit, basierend auf der Abweichung zwischen der aktuellen Mausposition und der ursprünglichen mousedown Lage.

    Einige alternativen, die ich vielleicht vorschlagen:

    • SVG
    • Reine HTML -
    • Mehrere layered Leinwand, und ziehen Sie eine transparente Leinwand, auf einem anderen.

    Den HTML-Leinwand ist gut für eine Menge Dinge. Die Interaktion der Nutzer mit "Elemente", die scheinen Verschieden zu sein (aber nicht) ist nicht eines dieser Dinge.

    Update: Hier sind einige Beispiele, die zeigen, ziehen auf der Leinwand:

    Keiner von diesen erstellt haben, eine eigene Bibliothek für die Verfolgung Ihrer Formen für Sie, jedoch.

    InformationsquelleAutor der Antwort Phrogz

  3. 4

    KineticJS ist eine solche Javascript-Bibliothek, kann u verwenden Sie ausschließlich für Animationen

    Heres den Link html5canvastutorials

    InformationsquelleAutor der Antwort Abhishek Susarla

  4. 2

    Leinwand und jCanvas

    Du bist definitiv gonna prüfen wollen,jCanvas. Es ist ein super sauber-wrapper für die Leinwand, die kicks eine Menge Türen öffnen, ohne das hinzufügen von code-Komplexität. Es macht die Dinge wie dieser ein Kinderspiel.

    Zum Beispiel, hier ist eine kleine sandbox, etwas in der Nähe, was Sie nach, mit ziehen und Neuzeichnen der eingebauten:

    Zeichnung ein Pfeil Zwischen Zwei Elementen.

    Ziehen Sie Objekte im canvas-Bereich

    Wagte ich mich die Straße hinunter zu tun, alles mit DIVs und jQuery, aber es fiel immer kurz auf die Interaktivität und Qualität.

    Hoffe, das hilft anderen, so wie mich.

    JP

    InformationsquelleAutor der Antwort Joshua Pinter

  5. 1

    Als Sie neue Objekte erstellen, ob Sie windows, Karten, Formen oder Bilder, die gezogen werden kann, können Sie speichern Sie in einem array "Objekte, die derzeit nicht ausgewählt". Wenn Sie auf Sie klicken oder wählen Sie Sie oder ziehen Sie Sie entfernen können Sie aus der Palette der "nicht gewählten Objekte". Auf diese Weise können Sie Steuern, was Sie bewegen kann, die im Falle eines bestimmten Ereignisses mousedown-oder mousemove-Ereignis, indem Sie überprüfen, wenn Sie nicht ausgewählt ist. Wenn es aktiviert ist wird es nicht in die "nicht ausgewählt" array, und Sie können bewegen Sie den Mauszeiger über andere Formen beim ziehen von Formen, ohne Sie zu Schleifen.

    Erstellen von arrays von Objekten, die Sie möchten, ziehen Sie hilft auch mit der Hierarchie. Canvas zeichnet die Pixel über die Linie-Objekt Letzte. Also, wenn die Objekte werden in einem array Sie einfach Ihre Instanz als element in das array sagen aus objectArray[20] objectArray[4], da das array Durchlaufen und zeichnen Sie die Objekte, die im array gespeicherten Elemente, die Sie können ändern, ob andere Objekte gesehen werden, die über oder hinter anderen Objekten.

    InformationsquelleAutor der Antwort LukeG1111

Schreibe einen Kommentar