Lassen Sie uns generative Kunst machen, die wir in SVG und PNG exportieren können

Dieser Artikel zeigt, wie ein generatives Kunst -Tool mit JavaScript, SVG und Canvas erstellt wird, um Design -Assets zu erstellen, und die Anforderungen eines Konferenzentwurfsprojekts zu erfüllen. Der Autor, inspiriert von einem ähnlichen Tool, das von professionellen Designern verwendet wird, beschreibt eine Lösung zum Erstellen anpassbarer, exportierbarer Grafiken.

Der Prozess beginnt mit der programmgesteuerten Farbpalette innerhalb von JavaScript:

 const colorpalette = ["#9b2e69", "#d93750", "#e2724f", "#f3dc7b", "#4e9397"];

Eine Funktion, makeRects , erzeugt dann überlappende Rechtecke mit zufälligen Positionen und Farben aus der Palette:

 // ... (Funktionsdefinition bleibt gleich)

Diese Funktion füllt ein SVG -Element, das dynamisch mit dem Browser -Ansichtsfenster gegründet wurde:

 const makesvg = () => {
  // ... (Funktionsdefinition bleibt gleich)
};

Das generierte SVG kann dann als SVG -Datei mit einer benutzerdefinierten Download -Funktion heruntergeladen werden:

 // ... (Download -Funktion bleibt gleich)

Um das Bedürfnis des Kunden nach PNG -Format zu beheben, nutzt der Artikel canvg , um die SVG auf eine Leinwand zu rendern und einen Download des Kunstwerks als PNG über FileSaver.js zu ermöglichen:

 // ... (Setup -Funktion bleibt gleich)

Mit der endgültigen Anwendung können Benutzer Artwork sowohl in SVG- als auch in PNG -Formaten generieren und herunterladen und sich an verschiedene Ansichtsfenster- und Seitenverhältnisse anpassen. Der Autor beleuchtet die Praktikabilität dieses Ansatzes, um schnell auf bestimmte Kundenanforderungen zugeschnittene Design -Vermögenswerte zu generieren. Der Artikel wird zwar das Potenzial für weitere Raffinesse (z. B. z. Die Inspiration für dieses Projekt ergab sich aus der Beobachtung eines ähnlichen, fortschrittlicheren Tools, das von professionellen Designern verwendet wurde.

Das obige ist der detaillierte Inhalt vonLassen Sie uns generative Kunst machen, die wir in SVG und PNG exportieren können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!