Entwerfen von Farbanpassungen

Question

Ich habe eine Menge Ressourcen zu meiner Frage gefunden, aber ich möchte nur Meinungen auf der Grundlage eines Überblicks auf hoher Ebene über das, was ich versuche, machen.

Grundsätzlich verwende ich eine Kombination aus Javascript und HTML, um einen Customizer für die Website eines Freundes zu erstellen. Ich sollte damit beginnen, dass ich etwas HTML-Erfahrung habe, aber dies ist das erste Mal, dass ich Javascript benutze (ich habe Erfahrung mit Java). Das ultimative Ziel wird in etwa so aussehen wie ein Customizer, mit dem Benutzer die Teile eines Fahrrads auswählen und ihre Farben ändern können, um benutzerdefinierte Bestellungen aufzugeben.

Ich habe die verschiedenen Teile des Fahrrades als Bilder-Dateien, und ich benutze diese jscolor Farbauswahl bei: http://jscolor.com/examples/#example-showing-hiding, um dem Benutzer zu ermöglichen, eine Farbe aus der Farbkarte auszuwählen. Mein Plan ist es, ein bestimmtes Teil (Foto) auf eine Kopie desselben Fotos zu legen und nur eines davon zu füllen, wie das Überlagern in Photoshop. Auf diese Weise füllt das Teil die richtige Form aus, anstatt es als ganzes Quadrat der Bilddatei zu füllen. Wenn sich der Cursor bewegt, sollte sich die Farbe in Echtzeit ändern. Danach können sie das Teil speichern und der Farbsatz wird im Back-End gespeichert.

Da ich neu in Javascript bin und nicht mit HTML experimentiert habe, finde ich es etwas schwierig, dies auf den richtigen Weg zu bringen. Daher hoffe ich auf einige Ratschläge von einigen Leuten, die Erfahrung mit HTML/Javascript/CSS haben, um mich in die richtige Richtung zu lenken, um dies auf einen besseren Weg zu bringen als es derzeit der Fall ist. Ich war mir nicht sicher, wie ich "ausdrücken" sollte, was ich zu tun versuche.

Die drei Hauptteile Ich bin Adressierung:

1. Verwendung von HTML-Tasten einen anderen Fahrradteil zu laden (im Wesentlichen eine separate Bilddatei laden).

2. Hinzufügen der Farbe aus dem jscolor-Picker zum Bild des ausgewählten Teils.

3. Speichern des Zustands des Teils, wenn der Benutzer auf die Schaltfläche Speichern klickt.

Ich werde auch weiterhin in den Foren suchen, wie ich schon ein paar führt ähnlich wie sah, was ich tun will, aber ich möchte vor allem wissen, ob mein Ansatz machbar scheint für das, was ich zu tun habe versucht.

Vielen Dank im Voraus!

Answer 1

Die Verwendung normaler HTML-Schaltflächen macht die Dinge für Sie komplex. Ich denke, die Verwendung von HTML5 Canvas API ist eine bessere Möglichkeit, dieses Problem anzugehen. Canvas ist das HTML5-Element, mit dem Sie die Grafikmanipulationen mit JavaScript ausführen können. Erfahren Sie mehr über Leinwand here. Sie können eine Bibliothek wie Fabric.js verwenden, um die Dinge einfacher zu machen.