SVGとPNGにエクスポートできる生成アートを作成しましょう

この記事では、JavaScript、SVG、およびCanvasを使用して生成アートツールを作成して設計資産を作成する方法を示し、特に会議デザインプロジェクトのニーズに対応します。著者は、プロのデザイナーが使用する同様のツールに触発され、カスタマイズ可能なエクスポート可能なアートワークを作成するためのソリューションを概説しています。

このプロセスは、JavaScript内でプログラムでカラーパレットを定義することから始まります。

 const colorPalette = ["＃9b2e69"、 "＃d93750"、 "＃e2724f"、 "＃f3dc7b"、 "＃4e9397"];

関数、 makeRects 、次に、パレットからランダムな位置と色で重複する長方形を生成します。

 // ...（関数定義は同じままです）

この関数は、ブラウザビューポートに動的にサイズのSVG要素を導入します。

 const makevg =（）=> {
  // ...（関数定義は同じままです）
};

生成されたSVGは、カスタムダウンロード関数を使用してSVGファイルとしてダウンロード可能です。

 // ...（ダウンロード機能は同じままです）

クライアントのPNG形式のニーズに対処するために、この記事はcanvgを活用してSVGをキャンバスにレンダリングし、 FileSaver.jsを介してPNGとしてアートワークをダウンロードできるようにします。

 // ...（セットアップ機能は同じままです）

最終アプリケーションでは、ユーザーがSVG形式とPNG形式の両方でアートワークを生成およびダウンロードし、さまざまなビューポートサイズとアスペクト比に適合させることができます。著者は、特定のクライアントのニーズに合わせた設計資産を迅速に生成するためのこのアプローチの実用性を強調しています。さらに洗練された可能性を認めながら（たとえば、ビューポートサイズに基づいて長方形の数を動的に調整する）、この記事では、この生成的なアートツールの効率と現実世界の適用性を強調しています。このプロジェクトのインスピレーションは、プロのデザイナーが使用する同様のより高度なツールを観察することから来ました。

以上がSVGとPNGにエクスポートできる生成アートを作成しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。