Wie kann ich Objekte (wie ein Bild oder ein anderes Objekt aus einer anderen Arbeitsfläche) in die Arbeitsfläche legen, die von fabricjs verwaltet wird? Ich habe viele Beispiele gefunden, wie man Elemente in Canvas verschieben kann, aber ich möchte das Element aus dem äußeren Element in den Canvas ziehen und dort ablegen.
Da du nach einem Beispiel gefragt hast und ich es selbst noch nicht ausprobiert habe, geht hier:
Fabric.canvas instance Zuerst wollen wir natürlich unsere Leinwand:
%Vor%Nicht sicher, dass dies notwendig ist, da die Tatsache, dass Sie eine Arbeitsfläche haben, es sehr wahrscheinlich macht, dass der Browser Drag and Drop hat. Wenn Sie es verwenden, können Sie dies mit Modernizr tun:
%Vor% Im Gegensatz zu dem Quellartikel I sind die Quell- und Zielelemente anders (in diesem Beispiel verschieben Sie einfach div s innerhalb des gleichen übergeordneten Containers), sodass ich einige der Ereignisse nicht bemerkt habe sind für das Element gedacht, das gezogen wird, aber die meisten sind an das Element gebunden, in das Sie fallen.
HINWEIS: Ich weiß, dass dies technisch eine Frage zu Fabric.js ist, aber es ist wirklich eine Frage von Drag and Drop im Zusammenhang mit dem Hinzufügen von Objekten zu einem <canvas> mit Fabric.js, weshalb Ich gehe jetzt ein bisschen mehr über das DnD-Zeug.
Für die <img>
dragstart (Ich habe hier eine Klasse hinzugefügt, um die Deckkraft zu verringern) dragend (und diese Klasse hier entfernt) Für #canvas-container :
dragenter (hat eine Klasse hinzugefügt, um dem Canvas-Container eine gepunktete Linie zu geben) dragover : Hier können Sie die Eigenschaft event.dataTransfer.dropEffect so einstellen, dass eine der nativen Cursortypen angezeigt wird. Der Standardwert wäre hier 'move' , aber ich setze ihn auf 'copy' , da ich das <img> -Element nicht wirklich entferne (tatsächlich können Sie in der Fiddle, zum Beispiel, mehrere McClures ). dragleave (hier die gepunktete Linie entfernt) drop : Der Handler für dieses Ereignis erstellt und fügt das Objekt fabric.Image hinzu (siehe Geige). Quellen:
Ich war durch die Geige von @natchiketa gegangen, und das Problem behoben, überprüfen Sie einfach diese Geige ..
%Vor%Danke
Tags und Links drag-and-drop fabricjs