SVG 경로

Lightscript를 더 화려하게 만들고 싶다면 배경을 추가하는 것이 눈에 띄는 방법입니다. 이를 수행하는 몇 가지 방법이 있지만, 단연 가장 쉽고 효율적인 방법은 SVG 경로를 사용하는 것입니다.

SVG 경로는 Adobe Illustrator를 사용하여 비교적 쉽게 만들 수 있습니다. SVG 경로로 단순화하려는 일반 PNG 이미지부터 시작하는 것이 가장 좋습니다. 배경 이미지를 찾으면 새로 만들기를 클릭하고 웹 대형 사전 설정을 선택하여 새 Illustrator 프로젝트를 만드십시오.

그 다음, 도구 모음에서 파일 → 가져오기를 클릭하고 표시되는 팝업에서 이미지를 선택하여 참조 이미지를 새 아트보드로 가져오십시오.

아트보드가 가져온 이미지보다 훨씬 클 수 있습니다. 이를 수정하려면 오브젝트 → 아트보드 → 아트워크 경계에 맞추기 옵션을 클릭하십시오.

그런 다음 경로로 분리하려는 이미지 부분을 선택하십시오. SVG 이미지는 외곽선 경로로 정의된 다각형으로 구성됩니다. 이 다각형은 JS Canvas API를 사용하여 색상이나 그라디언트로 채울 수 있습니다.

이 예시에서는 연못의 외곽선을 따라 그리고 단색으로 채우겠습니다. 시작하려면 키보드에서 P를 눌러 펜 도구를 선택하십시오. 따라 그리려는 도형의 외곽선을 따라 한 점을 클릭한 다음 선택한 도형과 같은 모양과 크기의 연속 경로가 될 때까지 점을 계속 추가하십시오. 이 도형의 색상은 JavaScript 코드에서 별도로 색상을 설정할 것이므로 중요하지 않습니다.

경로가 만족스러우면 파일 → 내보내기 → 다른 이름으로 내보내기를 클릭하여 내보내십시오. SVG 파일 형식을 선택했는지 확인하십시오.

다음으로 열리는 창에서 이미지가 링크로 설정되어 있는지 확인한 다음 코드 표시 옵션을 클릭하십시오.

열리는 메모장 창에서 <polygon> 태그를 찾아 points 속성 전체를 복사하십시오. 긴 숫자 문자열이어야 합니다. 이제 필요한 데이터를 모두 확보했으므로 취소를 클릭하십시오.

효과 캔버스에 경로 기반 이미지를 그리려면 두 개의 새 상수를 선언하십시오. 먼저 앞서 복사한 문자열로 설정된 상수를 선언하십시오.

팁

예를 들어, 351 396.5 440 435.5 501.84는 M351 396.5 440 435.5 501.84가 됩니다.

이제 path가 첫 번째 상수의 이름인 경우 new Path2D(path)로 새 경로를 만드십시오.

이 이미지는 이제 path2d가 이전 단계에서 선언한 경로의 이름인 경우 ctx.fill(path2d)를 호출하여 그릴 수 있습니다.

도형의 색상을 설정하려면 이미지를 그리기 전에 ctx.fillStyle(color)를 호출하십시오. 이 함수는 hex 색상 코드, CSS 색상 이름, CSS 색상 함수, 그라디언트를 인수로 허용합니다.

scale 및 translate와 같은 전체 캔버스 변환 효과 배열을 사용할 수도 있습니다. 변환이 현재 이미지에만 적용되도록 하려면 각 레이어가 그려진 후 ctx.setTransform(1,0,0,1,0,0)을 사용하십시오.

다음 예시 코드는 간단한 SVG 경로 이미지를 그리는 방법을 보여줍니다. 이 기술은 복잡한 배경을 그리기 위해 원하는 만큼 반복할 수 있습니다.

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Data copied from Illustrator. Make sure the first character is M.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation.
  ctx.fillStyle = "blue"; // Set color of path.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

위 코드는 다음과 같은 결과를 생성해야 합니다: