Benutzerdefiniertes Zeichenwerkzeug mit HTML Canvas

Gibt es Tools, mit denen ein Benutzer …

  • Zeichnen Sie benutzerdefinierte Textblöcke in einem Leinwandbereich mit benutzerdefinierten Schriftstilen
  • Ändern Sie die Hintergrundfarbe, das Bild usw. und erlauben Sie auch, ein Bild in einen beliebigen Teil der Leinwand einzufügen
  • Entfernen Sie die benutzerdefinierten Blöcke [ Textblock oder Bildblöcke hinzugefügt ] auf der Leinwand und ziehen Sie sie und ändern Sie die Position an eine beliebige Stelle auf der Leinwand
  • Bearbeiten Sie die Blöcke, die er Text und Bild usw. hinzugefügt hat
  • Zeigen Sie die benutzerdefinierte Karte auch auf der Admin-Seite mit allen erforderlichen Eigenschaften an [wie Metadaten aller Textblöcke oder Bilder mit ihren Werten]

Das Hauptziel ist es, dem Benutzer zu ermöglichen, eine benutzerdefinierte Karte zu entwerfen, wie auf Websites wie PrintLand und PrintVenue usw.

Suchen Sie eine Bibliothek, auf der Sie ein solches Programm aufbauen können, oder benötigen Sie ein bereits geskriptetes Programm, das Sie auf Ihrer Website platzieren können?
Ich suche beide Möglichkeiten. Wenn einige bereits geskriptete Tools verfügbar sind, die bereit sind, integriert zu werden, oder einige Open-Source-Zeugs

Antworten (1)

Fabric.js

  • Open Source
  • Sie können benutzerdefinierte Textblöcke mit benutzerdefinierter Formatierung einfügen. Siehe die Dokumentation zur Textmanipulation .
  • Ein Hintergrund kann eingestellt werden. Siehe die Dokumentation (scrollen Sie nach unten zur Überschrift Canvas-Hintergrund und -Overlay ).
  • Ein Bild kann überall in die Leinwand geladen werden. Siehe die Dokumentation zu Bildern .
  • Unterstützung für das Ziehen ist enthalten. Probieren Sie es auf der Homepage von Fabric.js aus: http://fabricjs.com/
  • Das Löschen von Objekten ist sehr einfach, ich habe es schon einmal gemacht. Sie müssen eine Schaltfläche auf Ihrer Website einfügen (z. B. „Ausgewähltes Objekt löschen“), das ausgewählte Objekt über die API von Fabric.js abrufen und löschen.
  • Die Textbearbeitung ist integriert, siehe https://stackoverflow.com/a/22126898/603003
  • Das Bearbeiten von Bildern ist (soweit ich weiß) Ihnen überlassen. Sie haben jedoch Bildfilter: http://fabricjs.com/fabric-intro-part-2/
  • Der Zustand des Canvas ist serialisierbar und kann jederzeit wieder geladen werden. Der einfachste Weg, Metadaten zu verwenden, besteht darin, einfach Ihre Schlüssel und Werte zu den Objekten von Fabric.js hinzuzufügen (die „nichts“ mehr als JS-Objekte sind).
Benutzerdefiniertes Zeichenwerkzeug mit HTML Canvas
AntwortenHierDatenschutz-Bestimmungen1y, 0v