라인 명령 – 스매싱 잡지

이전 기사에서는 SVG를 수작으로 코딩하는 방법에 대한 실용적인 예를 살펴 보았습니다. 그 안내서에서 우리는 SVG 요소의 기본 사항을 다루었습니다. rect,,, circle,,, ellipse,,, line,,, polyline그리고 polygon (그리고 또한 g).

이번에는 SVG 요소의 절대 강국 인보다 진보 된 주제를 다룰 것입니다. path. 나를 잘못 이해하지 마십시오. 나는 여전히 이미지 경로가 코딩 된 것보다 벡터 프로그램에서 더 잘 그려진다는 점을 지적합니다 (코드에서 비 동료 비주얼 아트를 만드는 창의적인 유형이 아니라면, 앞으로 나아가서 경외심을 불러 일으키는 경이로움을 창조하십시오. 아마도이 기사의 청중이 아닐 것입니다). 그러나 그것이있을 때 기술 도면 그리고 데이터 시각화그만큼 path 요소는 광범위한 가능성을 잠금 해제하고 손으로 코딩 된 SVG의 세계를 열어줍니다.

경로 구문은 실제로 복잡 할 수 있습니다. 우리는 그것을 두 개의 별도의 부분으로 다룰 것입니다. 이 첫 번째 할부에서 우리는 모든 것을 배우고 있습니다 직선 및 각도 경로. 두 번째 부분에서는 선을 구부리고, 비틀고, 회전시킬 것입니다.

필요한 지식 및 가이드 구조

메모: SVG의 기본 사항에 익숙하지 않은 경우 viewBox 간단한 요소의 기본 구문 (rect,,, line,,, g그리고), 나는 이것으로 다이빙하기 전에 내 가이드를 읽는 것이 좋습니다. 당신은 또한 자신을 친숙해야합니다 예제에서 각 코드 줄을 이해하려면.

시작하기 전에 JavaScript를 사용하여 SVG를 코딩하는 방법을 신속하게 요약하고 싶습니다. 나는 숫자와 수학을 다루는 것을 좋아하지 않으며 모든 속성에 채워진 숫자로 SVG 코드를 읽으면 모든 이해를 잃게됩니다. 좌표 이름을 제공하고 모든 수학을 쉽게 구문 분석하고 쓸 수있게함으로써, 나는이 유형의 코드에 훨씬 더 좋은 시간을 보내고 있으며, 당신도 그렇게 할 것이라고 생각합니다.

이 기사의 목표는 더 중요합니다 이해 path 통사론 배치 또는 루프 및 기타보다 기본적인 것들을 활용하는 방법에 관한 것보다. 따라서 각 예제의 전체 설정을 통해 실행하지 않습니다. 대신 코드의 스 니펫을 공유 하겠지만 코드펜에서 약간 조정되거나 단순화 되어이 기사를보다 쉽게 ​​읽을 수 있습니다. 그러나 Codepen 데모에서 텍스트의 일부가 아닌 코드에 대한 구체적인 질문이있는 경우 주석 섹션이 열립니다.

이 모든 프레임 워크에 대한 정보를 유지하기 위해 코드는 바닐라 JavaScript로 작성되었습니다 (실제로 TypeScript는 친구이기 때문에 SVG가 더 복잡해 지며이 중 일부를 쓸 때 놓쳤습니다).

성공을위한 설정

로서 path 요소는 우리가 명령에 연결하는 일부 좌표에 대한 이해에 의존합니다. 약간의 시각적 방향이 있으면 훨씬 쉽다고 생각합니다. 따라서 모든 예제는 전통적인 시각적 표현 위에 코딩됩니다. viewBox 왼쪽 상단 코너에 원점이있는 설정 (따라서 모양의 값 0 0 ${width} ${height}.

텍스트 레이블을 추가하여 그리드 내의 특정 영역을보다 쉽게 ​​지적 할 수 있도록 텍스트 레이블을 추가했습니다.

내에 텍스트를 추가 할 때 조심하는 것이 좋습니다. 텍스트에 액세스 할 수 있으려면 SVG의 요소. 그래픽이 나머지 웹 사이트와 같이 텍스트 스케일링에 의존하는 경우 HTML을 통해 렌더링하는 것이 좋습니다. 그러나 여기서 우리의 예에서는 충분해야합니다.

그래서 이것은 우리가 다음에 다음과 같습니다.

자, 이제 우리는 이제 뷰 박스가 그리드를 시각화했습니다. 나는 우리가 짐승과의 첫 세션을 준비 할 준비가되었다고 생각합니다.

입력하다 path 그리고 전능 한 d 기인하다

그만큼 요소에는 a가 있습니다 d 자체 언어를 사용하는 속성. 그래서 내부 d당신은“명령”의 관점에서 이야기하고 있습니다.

내가 생각할 때 non-path ~ 대 path 요소, 나는 우리가 훨씬 더 복잡한 드로잉 지침을 작성 해야하는 이유는 다음과 같습니다. 모든 비 경사 요소는 단지 멍청한 경로입니다. 백그라운드에서, 그들은 전달 된 몇 가지 매개 변수를 기반으로 항상 렌더링 할 사전 드로 워진 경로 모양을 가지고 있습니다. 그러나 path 기본 모양이 없습니다. 모양 논리는 당신에게 노출되어야하지만 다른 모든 요소에 대해 깔끔하게 숨겨 질 수 있습니다.

그 명령에 대해 배우자.

모든 것이 시작되는 곳 : M

각 경로가 시작되는 첫 번째는 다음과 같습니다. M 명령, 펜을 한 지점으로 움직입니다. 이 명령은 출발점을 배치하지만 IT 한 가지를 그립니다. 단지 한 경로 M 명령은 an입니다 auto-delete SVG 파일을 정리할 때.

두 가지 주장이 필요합니다 x 그리고 y 시작 위치의 좌표.

const uselessPathCommand = `M${start.x} ${start.y}`;

기본 라인 명령 : M ,,, L,,, H,,, V

이것들은 재미 있고 쉽습니다 : L,,, H그리고 V모두 현재 지점에서 지정된 지점까지 선을 그립니다.

L 테이크 두 가지 주장그만큼 x 그리고 y 당신이 그리고 싶은 요점의 위치.

const pathCommandL = `M${start.x} ${start.y} L${end.x} ${end.y}`;

H 그리고 V반면에, 만 가져 가라 하나의 주장 그들은 한 방향으로 만 선을 그리기 때문입니다. 을 위한 H당신은 그것을 지정합니다 x 위치 및 용 V당신은 그것을 지정합니다 y 위치. 다른 가치가 암시됩니다.

const pathCommandH = `M${start.x} ${start.y} H${end.x}`;
const pathCommandV = `M${start.x} ${start.y} V${end.y}`;

이것이 어떻게 작동하는지 시각화하기 위해 경로를 그리는 함수와 라벨이있는 포인트를 만들어 어떻게되는지 볼 수 있습니다.

우리는 그 이미지에 세 줄이 있습니다. 그만큼 L 명령은 빨간색 경로에 사용됩니다. 그것은 시작합니다 M ~에 (10,10)그런 다음 대각선으로 움직입니다 (100,100). 명령은 다음과 같습니다. M10 10 L100 100.

파란색 선은 수평입니다. 시작합니다 (10,55) 그리고 끝나야합니다 (100, 55). 우리는 사용할 수 있습니다 L 명령이지만 우리는 써야합니다 55 다시. 대신 우리는 글을 씁니다 M10 55 H100그리고 SVG는 다시 보는 것을 알고 있습니다 y 가치 M for the y 가치 H.

녹색 선에서도 마찬가지입니다. 그러나 우리가 사용할 때 V 명령, SVG는 다시 참조하는 것을 알고 있습니다 x 가치 M for the x 가치 V.

결과 수평 경로를 동일한 구현과 비교하면 요소, 우리는 할 수 있습니다

1. 얼마나 더 효율적인지 주목하십시오 path 할 수 있습니다
2. 말하지 않는 사람에게는 상당한 의미를 제거하십시오. path.

우리 가이 줄을 보면서 그 중 하나를“선”이라고합니다. 그리고 나머지는 문맥에서 벗어난 것을 의미하지는 않지만, 선은 확실히 우리 머리에 특정 이미지를 불러냅니다.

다각형과 폴리 라인을 만듭니다 Z

이전 섹션에서는 방법을 배웠습니다 path 처럼 행동 할 수 있습니다 꽤 멋지다. 그러나 더 많은 일을 할 수 있습니다. 그것은 또한처럼 행동 할 수 있습니다 polyline 그리고 polygon.

그 두 사람이 기본적으로 어떻게 동일하게 작동하는지 기억하십시오 polygon 첫 번째와 마지막 지점을 연결합니다 polyline 그렇지 않습니까? 그만큼 path 요소도 같은 일을 할 수 있습니다. 라인으로 경로를 닫는 별도의 명령이 있습니다. Z 명령.

const polyline2Points = `M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y}`;
const polygon2Points  = `M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y} Z`;

따라서 이것을 실제로보고 반복적 인 삼각형 모양을 만들어 봅시다. 이상한 시간마다, 그것은 열려 있으며, 매번 문을 닫습니다. 꽤 깔끔합니다!

비교할 때 path ~ 대 polygon 그리고 polyline다른 태그는 그들의 이름에 대해 우리에게 말하지만, 다각형의 것이 무엇인지에 대비 한 사람들이 적은 사람들이 더 적은 사람들이 폴리 라인이 무엇인지 아는 사람이 거의 없다고 주장합니다. 이 두 태그를 사용하겠다는 주장 path 저의 의견에 따르면, 가독성은 약하기 때문에, 당신은 아마도 이것이 SVG 요소에 주어진 무의미한 문자열의 동일한 수준처럼 보인다는 데 동의 할 것입니다.

상대 명령 : m,,, l,,, h,,, v

모든 라인 명령은 절대 및 상대 버전으로 존재합니다. 차이점은 상대 명령이 소문자 (예 : m,,, l,,, h그리고 v. 상대 명령은 항상 마지막 지점과 관련이 있으므로 x 가치, 당신은 a를 선언하고 있습니다 dx 가치, 이것이 당신이 움직이는 단위 수라고 말합니다.

예제를 시각적으로보기 전에 다음 3 라인 명령을 살펴보기를 원합니다. 코드펜을 미리 보지 마십시오.

const lines = [
  { d: `M10 10 L 10 30 L 30 30`, color: "var(--_red)" },
  { d: `M40 10 l 0 20 l 20 0`, color: "var(--_blue)" },
  { d: `M70 10 l 0 20 L 90 30`, color: "var(--_green)" }
];

내가 언급했듯이, 나는 의미가없는 숫자를 보는 것을 싫어하지만 대부분의 맥락에서 의미가 상당히 일정 한 숫자가 하나 있습니다. 0. a 0 명령과 함께 방금 배웠습니다 상대적인 아무 일도 일어나지 않는다고 즉시 말해 줄 수 있습니다. 봄 l 0 20 그 자체 로이 선은이 선이 2 개가 아닌 한 축을 따라 만 움직입니다.

그리고 그 전체 파란색 경로 명령을 보면 반복 20 가치는 나에게 모양이 규칙적으로있을 수 있다는 느낌을줍니다. 첫 번째 경로는 반복하여 약간의 경로를 수행합니다. 10 그리고 30. 하지만 세 번째? 내 머릿속에서 수학을 할 수없는 사람으로서 그 세 번째 줄은 나에게 아무것도 아님.

이제 놀랐을 수도 있지만 모두 다른 장소에서 같은 모양을 그립니다.

그렇다면 파란색 경로의 규칙 성을 인식 할 수 있다는 것이 얼마나 가치가 있습니까? 제 생각에는 그다지 아닙니다. 어떤 경우에는 상대 값으로가는 것이 절대 값보다 쉽습니다. 다른 경우에는 절대가 왕입니다. 더 나은 것도 더 나쁘지 않습니다.

그리고 모든 경우에, 그 이전의 예는 갭에 대한 변수, 형상 크기에 대한 변수 및 루프 내에서 호출 된 경로 정의를 생성하는 함수로 시작 점을 올바르게 계산할 수있는 경로 정의를 생성하는 함수를 설정하면 이전 예제가 훨씬 더 효율적일 것입니다.

점프 포인트 : 복합 경로를 만드는 방법

또 다른 매우 유용한 것은 이전 코드펜에서 시각적으로 보이지 않는 것이지만 그리드 및 코드와 관련이 있습니다.

나는 그리드 드로잉 업데이트에 빠져 들었다.

이전 예제에 사용 된 방법으로 사용합니다 line 그리드를 그리기 위해 위의 코드펜은 14 개의 개별 요소로 그리드를 렌더링했을 것입니다. 마지막 코드펜의 최종 코드를 검사하면 .grid 그룹.

보는 것이 재미 있지 않지만 가능한 방법에 대한 비밀을 가지고 있습니다.

면밀히 살펴보면 여러 가지가 있음을 알 수 있습니다. M 명령. 이것은 복합 경로의 마법입니다.

이후 M/m 명령은 실제로 그려지지 않고 커서를 배치합니다. path 점프 할 수 있습니다.

따라서 공통 스타일을 공유하고 별도의 상호 작용을 가질 필요가없는 여러 경로가있을 때마다 코드를 더 짧게 만들기 위해 함께 묶을 수 있습니다.

다음에 올다

이 지식으로 무장 한 우리는 이제 대체 할 수 있습니다 line,,, polyline그리고 polygon ~와 함께 path 명령하고 복합 경로로 결합합니다. 그러나 그 때문에 더 많은 것을 발견해야합니다 path 외국어 버전의 라인을 제공 할뿐만 아니라 코드 옵션도 제공합니다. circles 그리고 ellipses 열린 공간이 있고 때로는 구부러지고 비틀고 돌릴 수도 있습니다. 우리는 그것들을라고 언급 할 것입니다 곡선 그리고 아크다음 기사에서 더 명시 적으로 토론하십시오.

SmashingMag에 대한 추가 독서

(GG, YK)