우리가 SVG 및 PNG로 내보낼 수있는 생성 예술을 만들도록하자

이 기사에서는 JavaScript, SVG 및 Canvas를 사용하여 생성 아트 도구를 만드는 방법을 보여 주어 설계 자산을 생산하는 방법, 특히 컨퍼런스 디자인 프로젝트의 요구를 해결합니다. 전문 디자이너가 사용하는 유사한 도구에서 영감을 얻은 저자는 사용자 정의 가능하고 수출 가능한 아트 워크를 만들기위한 솔루션을 간략하게 설명합니다.

프로세스는 JavaScript 내에서 프로그래밍 방식으로 색상 팔레트를 정의하여 시작합니다.

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

함수, makeRects 는 팔레트에서 임의의 위치와 색상으로 겹치는 직사각형을 생성합니다.

 // ... (함수 정의는 동일하게 유지됨)

이 함수는 동적으로 크기가 크기가 SVG 요소를 브라우저 뷰포트로 채 웁니다.

 const makesvg = () => {
  // ... (함수 정의는 동일하게 유지됨)
};

그런 다음 생성 된 SVG는 사용자 정의 다운로드 기능을 사용하여 SVG 파일로 다운로드 할 수 있습니다.

 // ... (다운로드 함수는 동일하게 유지됨)

클라이언트의 PNG 형식에 대한 요구를 해결하기 위해이 기사는 canvg 활용하여 SVG를 캔버스로 렌더링하여 FileSaver.js 를 통해 PNG로 아트 워크를 다운로드 할 수 있습니다.

 // ... (설정 기능이 동일하게 유지됨)

최종 응용 프로그램을 통해 사용자는 SVG 및 PNG 형식으로 아트 워크를 생성하고 다운로드하여 다양한 뷰포트 크기와 종횡비에 적응할 수 있습니다. 저자는 특정 클라이언트 요구에 맞는 설계 자산을 신속하게 생성하기위한이 접근법의 실용성을 강조합니다. 이 기사는 추가 정교함 (예 : 뷰포트 크기에 따라 사각형 수를 동적으로 조정)을 인정 하면서이 생성 아트 도구의 효율성과 실제 적용 가능성을 강조합니다. 이 프로젝트에 대한 영감은 전문 디자이너가 사용하는 유사한 고급 도구를 관찰 한 것입니다.

위 내용은 우리가 SVG 및 PNG로 내보낼 수있는 생성 예술을 만들도록하자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!