Pixerate/pixerate-vector

Pixerate 벡터 편집기

벡터 문서는 노드 트리를 보유하는 아트보드(width x height, 문서 단위, y축 아래 방향)입니다. 노드에는 path 노드(베지어 앵커의 하나 이상의 하위 경로, 채우기, 획 및 획 설정 포함), text 노드(문자열을 포인트 텍스트, 영역 텍스트 또는 경로를 따라 설정하며 동일한 채우기 및 획으로 칠함), instance 노드(심볼의 배치된 복사본) 및 group 노드가 있습니다. 그룹은 라이브 부울, 라이브 블렌드, 마스크 그룹이거나 라이브 효과 스택을 가질 수 있습니다. 모든 명령은 run_command / run_commands와 함께 실행되는 vector.* 명령입니다(일괄 처리는 pixerate-agent-tools의 "$0.id" 참조, atomic: true 및 오류 코드 참조).

• 노드 id는 vector.list에서 가져오고 쓰기 작업이 반환하는 값({ id }, { ids })에서 가져옵니다.
• 앵커는 { nodeId, subpath, index }입니다: 경로 내 하위 경로 번호, 그 다음 하위 경로 내 앵커 번호, 둘 다 0부터 시작합니다. anchors를 사용하는 명령은 기본적으로 직접 선택 도구로 선택된 점을 사용합니다. ids를 사용하는 명령은 기본적으로 선택 영역을 사용합니다.
• 페인트는 CSS 색상, 없음의 경우 null, 또는 그래디언트 객체 { type, stops: [{ offset, color, opacity?, midpoint? }], ... }입니다.
• 외관: 경로는 여러 개의 채우기와 여러 개의 획을 쌓을 수 있습니다(아래에서 위로, 모든 채우기는 모든 획 아래에 그려짐). 각각 고유한 페인트, opacity, blendMode 및 visible을 가지며, 각 획은 고유한 너비, 정렬, 대시, 캡, 결합, 화살촉 및 프로파일을 가지거나 브러시스트로크(vector.addBrushstroke, vector.setBrushstroke, vector.listBrushes)를 외곽선을 따라 마른 브러시나 젖은 브러시, 믹서 브러시, 번짐 또는 블렌더, 그래디언트 페인트, 시드 지터 및 종이 질감으로 칠합니다. 레이어는 스택에서의 index로 주소가 지정되며 0이 맨 아래입니다. vector.setStyle의 fill / stroke 및 획 설정은 최상위 레이어의 약어입니다. null은 스택을 지웁니다. 모든 노드는 blendMode 및 filters(드롭/내부 그림자, 외부/내부 광선, 레이어 흐림, 깃털)를 가질 수 있으며, 이는 지오메트리를 변경하지 않습니다.
• 마스크: 마스크 그룹의 첫 번째(맨 아래) 자식이 마스크입니다. 그 위의 자식은 마스크 외곽선(clip) 내부 또는 밝은 곳(luminance) 또는 불투명한 곳(alpha)에서만 표시됩니다. invert는 표시와 숨김을 바꿉니다. vector.list는 마스크 그룹에 mask { type, invert, maskId, contents, enabled }를 제공합니다. 숨겨진 마스크(enabled: false)는 아무것도 마스킹하지 않습니다.
• 텍스트에는 기본 font(패밀리, 두께, 기울임, 크기, 자간, 행간, 기준선 이동, 밑줄, 취소선), 범위(start / end, UTF-16 코드 단위, 범위 fill 포함)에 걸쳐 필드를 재정의하는 선택적 실행, paragraph 스타일 및 frame: point(첫 번째 기준선의 x, y), area(텍스트가 줄 바꿈되는 상자) 또는 path(텍스트가 따르는 선)가 있습니다.
• 심볼은 문서(vector.listSymbols)와 함께 보관되는 재사용 가능한 아트이며, instance 노드에 의해 다른 노드와 달리 크기 조절 및 기울이기가 가능한 변환을 통해 그려집니다. 심볼을 편집(vector.editSymbol ... vector.exitSymbolEdit)하면 모든 인스턴스가 변경됩니다.
• 제약 조건(CAD 스타일)은 앵커, 세그먼트 및 둥근 경로 간의 기하학적 관계 및 치수를 유지합니다. 모든 편집 후에 해결되므로 이후 이동 시 유지됩니다.
• 프레임은 frame 사각형(vector.listFrames)이 있는 그룹입니다. 배경을 그리고, 자식을 클리핑하며, 사각형으로 선택합니다. 최상위 프레임은 아트보드입니다. 프레임 크기가 조정되면 자식은 크기 조정 대신 크기 조정 제약 조건(수평 left / right / leftRight / center / scale, 수직 top / bottom / topBottom / center / scale)을 따릅니다.
• 커넥터는 connector가 있는 열린 경로로, 끝이 다른 객체의 사이트(측면 중앙 또는 중심)에 접착됩니다. 모든 편집 후에 다시 라우팅되므로 연결된 것을 따릅니다. 자유로운 끝은 그대로 유지됩니다.
• 대칭 그룹은 자식과 미러링 또는 회전된 복사본을 그립니다. vector.addShape / vector.addPath에 parentId를 사용하여 아트를 추가합니다. 원본만 저장되고 편집됩니다.
• 좌표는 문서 단위입니다. 회전된 노드는 자체 공간에 지오메트리를 저장합니다. vector.list가 보고하는 bounds는 문서 공간이고, d는 노드 자체의 것입니다.

매개변수 세부 정보(그래디언트 필드, 효과 매개변수, 폭 프로파일, 엔벨로프)는 references/commands.md에 있습니다.

워크플로 기술

이러한 작업의 경우 워크플로 기술도 로드하십시오. 방법, 단계 간 검사 및 함정이 있으며 아래 명령을 사용합니다.

• pixerate-vector-icon-set: 하나의 그리드, 하나의 획 및 스타일, 선명한 아이콘, 심볼 및 SVG로.
• pixerate-vector-logo: 부울 연산으로 만든 마크, 잠금, 색상 변형, 외곽선 전달 파일.
• pixerate-vector-illustration: 블록 인, 그래디언트 및 누적 채우기, 마스크, 블렌드, 그림자.

작업 방법

1. 읽기. vector.list는 아트보드 크기, 모든 노드(깊이 우선, id, 유형, 이름, 범위, 회전, 채우기, 획, d, 효과, 블렌드 및 부울 정보, 스택, 블렌드 모드 및 필터) 및 선택 영역을 제공합니다. vector.getAppearance는 한 노드의 전체 스택 및 필터를 제공합니다.
2. 레이어별 계획. 도형, 쌓기 순서(아래에서 위로) 및 그룹화를 그리기 전에 결정합니다. 기본 요소(vector.addShape)로 시작하여 결합합니다. 기본 요소로 만들 수 없는 곡선에만 원시 d를 작성합니다.
3. 배치 쓰기. 구성 시퀀스를 atomic: true 및 label과 함께 하나의 run_commands에 넣고 id("$0.id", "$last.ids")를 연결하여 하나의 실행 취소 단계로 모두 적용하거나 전혀 적용하지 않도록 합니다.
4. 라이브 우선, 마지막에 확장. 디자인하는 동안 live: true 부울, 패스 효과, 엔벨로프, 라이브 모서리 및 블렌드를 사용합니다. 사용자가 일반 경로가 필요할 때만 vector.expandAppearance, vector.expandBlend 또는 vector.outlineStroke로 굽습니다.
5. 확인. 다시 vector.list: 의도한 위치의 범위, 잘못된 노드 없음, 합리적인 이름. vector.exportSvg는 최종 마크업을 제공합니다. 검토하거나 가능하면 렌더링한 후 전달합니다.

모범 사례

• 크기 조정되는 모든 것에 프레임 사용. 화면, 카드, 버튼 및 배너를 프레임(vector.addFrame 또는 vector.frameSelection) 안에 만듭니다. 각 자식의 제약 조건을 vector.setResizing으로 설정하고(배경 및 구분선 leftRight, 모서리에 고정된 아이콘, 제목 center), vector.setFrame으로 크기를 조정하여 하나의 디자인에서 다른 크기를 생성합니다. 각 아트보드를 vector.exportFrameSvg로 내보냅니다.
• 반복에 심볼 사용. 동일한 아트가 여러 번 나타날 때(세트의 아이콘, 장면의 나무, 글머리 기호, 로고 마크), 한 번 만들고 인스턴스를 배치(vector.makeSymbol, 그런 다음 x / y 또는 transform과 함께 vector.placeSymbol)하여 격리된 한 번의 편집으로 모두 변경합니다. 각각 명확한 이름을 지정합니다. 색상 변형을 위해 vector.setInstanceOptions fill / stroke를 사용하고 일부를 삭제하려면 hidden을 사용합니다. 분리는 한 복사본이 영구적으로 달라져야 할 때만 수행합니다.
• 텍스트. 레이블 및 제목에는 포인트 텍스트를, 줄 바꿈이 필요한 모든 것에는 영역 텍스트(width, height)를, 배지 및 인장에는 경로 위 텍스트를 사용합니다. 모든 텍스트 쓰기가 반환하는 요약에서 overflow를 확인하십시오. 숨겨진 줄이나 문자는 상자나 경로가 너무 작다는 것을 의미합니다. 디자인당 하나 또는 두 개의 패밀리를 유지하십시오(vector.listFonts는 셰이퍼가 가진 것을 나열합니다. 누락된 패밀리는 대체 글꼴로 그려지고 missingFonts에 나타납니다). 텍스트를 별도의 노드로 분할하는 대신 vector.setTextStyle로 스타일 범위를 지정하여 여전히 하나의 단락으로 편집할 수 있도록 합니다. 글꼴에 의존해서는 안 되는 최종 아트워크나 로고에만 외곽선 만들기를 사용하십시오. 변경될 수 있는 경우 텍스트 복사본을 유지하십시오.
• 경로, 획, 브러시스트로크, 부울, 그래디언트, 스택, 마스크, 그림자, 커넥터, 제약 조건 및 세로 텍스트: 먼저 references/best-practices.md를 읽으십시오.
• 먼저 비파괴적으로. 라이브 부울(live: true인 vector.boolean), 패스 효과 및 엔벨로프는 피연산자를 편집 가능하게 유지합니다. 파괴적인 부울 또는 패스파인더는 입력을 대체합니다. 마지막에, 그리고 평면 출력이 요청된 경우에만 수행하십시오.
• 그룹화 및 이름 지정. 하나의 객체의 부분을 그룹화(vector.group with name)하고, 중요한 경로의 이름을 지정하고(추가 시 name), 트리를 얕게 유지하십시오.
• SVG 위생. precision 2 또는 3으로 내보냅니다(기본값 3). 아주 작은 아트보드에만 더 높게 설정합니다. Pixerate의 data-vector-* 속성을 읽지 않는 도구에 SVG를 전달하기 전에 효과, 블렌드 및 가변 폭 획을 확장하십시오. 다른 독자는 그려진 외관을 볼 수 있지만 라이브 소스는 볼 수 없습니다.

명령어

읽기

명령어	용도
vector.list	문서 읽기: { width, height, nodes, selection, tool }. 각 노드는 id, 유형, 이름, 깊이, 문서 공간 bounds, rotation(시계 방향 도), 표시, 잠금, 선택 및 경로의 경우 채우기, 획, strokeWidth 및 d를 가집니다. 그룹은 children, blend, liveBoolean, effects, mask를 나열합니다. 마스크 그룹의 bounds는 마스킹된 결과입니다. 먼저 그리고 배치 후에 호출하십시오.
vector.shapeBuilderFaces	주어진 경로가 평면을 나누는 영역을 나열합니다: 경로 데이터, 면적, 각 내부의 한 점 및 이를 채우는 경로의 id. vector.shapeBuilder와 함께 점을 사용하십시오.
vector.exportSvg	독립 실행형 SVG 마크업으로 문서 가져오기({ svg }); precision 0~8 소수점(기본값 3).
vector.exportPdf	인쇄 준비가 된 벡터 PDF를 base64 데이터 URL로 가져오기: 한 페이지, 또는 pages: "artboards"로 아트보드당 한 페이지. { pdf, pages, bytes, notes } 반환; notes 확인(필터, 불투명도 마스크 및 로드된 글꼴이 없는 텍스트는 제외됨).
vector.exportLottie	문서(또는 ids)를 애니메이션 플레이어용 Lottie JSON으로 가져오기: 패스 효과는 Lottie 수정자로, 그래디언트는 그래디언트 채우기로 유지됩니다. { lottie, notes } 반환; 근사된 항목(필터, 메시 그래디언트, 외곽선이 없는 텍스트)에 대해 notes를 읽으십시오.

생성 및 삭제

명령어	용도
vector.traceImage	PNG(데이터 URL)를 하나의 그룹 내 벡터 경로로 변환: 단색 아트(로고, 스캔, 실루엣; 컷아웃의 경우 channel: "alpha")에는 threshold 모드, 색상별 누적 경로에는 color 모드(colors 2–32). 더 적은 앵커를 위해 tolerance를 높이고, 날카로운 다각형을 위해 cornerRoundness 0을 설정합니다. x, y, width와 함께 배치합니다. { id, paths } 반환; subpaths 수를 확인하고 이후에 단순화하거나 작은 점을 삭제하십시오.
vector.mosaicImage	PNG를 모자이크 타일로 스타일화(cell px, shape square / circle, gap, colors): 픽셀 아트, 타일 벽화. 색상당 하나의 복합 경로인 { id, paths } 반환.
vector.halftoneImage	PNG를 회전된 스크린의 하프톤 도트로 스타일화(cell, angle, 잉크 color 또는 그림 색상의 경우 null): 만화 및 팝아트 스타일, 인쇄 효과.
vector.lowPolyImage	PNG를 로우 폴리 삼각형으로 스타일화(cell, jitter, seed, colors): 기하학적 초상화 및 배경.
vector.hatchImage	PNG를 어두운 곳에서 팽창하는 조각선으로 스타일화(cell 간격, angle, 잉크 color): 지폐, 목판화 및 선화 스타일.
vector.addPathByDimensions	CAD 사용자가 입력하는 방식으로 경로 그리기: start에서 각 단계 { length, angle }(페이지에서 반시계 방향 도: 0은 오른쪽, 90은 위), { dx, dy } 또는 { x, y }; closed는 끝을 연결합니다. 좌표를 수동으로 계산하는 대신 정확한 기술 외곽선(브래킷, 평면도, 주어진 길이 및 각도)에 사용하십시오. { id, anchors } 반환.
vector.addShape	kind rect, ellipse, polygon(sides, 최소 3), star(points, innerRatio 0~1) 또는 line을 x, y, width, height(모두 필수, 라인의 경우 width와 height는 끝의 오프셋)로 추가합니다. cornerRadius 및 cornerKind는 라이브 모서리를 제공합니다. 모든 스타일 필드 및 name이 적용됩니다. 제공되지 않은 항목에 대해 편집기의 기본 스타일을 사용합니다. { id } 반환.
vector.addPath	SVG 경로 데이터 d(절대 또는 상대 M, L, H, V, C, S, Q, T, A, Z; 호 및 2차 곡선은 3차 곡선이 됨)에서 문서 단위로 경로를 추가하고, name 및 스타일 필드를 포함합니다. 설정되지 않은 스타일은 편집기 기본값에서 가져옵니다. d에 점이 없으면 실패합니다. { id } 반환.
vector.importSvg	SVG 마크업 svg의 도형을 문서 위에 추가하거나 replace: true로 문서를 대체합니다. 경로, 기본 도형, 그룹, 변환, 선형 및 방사형 그래디언트, clip-path / mask 참조(마스크 그룹으로), <text>(포인트 텍스트: 내용, 글꼴, 앵커 및 채우기) 및 <use>(참조하는 대상으로 만든 심볼의 인스턴스로)를 읽습니다. 이미지 및 외부 필터는 건너뜁니다.
vector.importLottie	Lottie 애니메이션(객체 또는 텍스트)의 한 frame을 편집 가능한 그룹으로 추가하거나 문서를 대체합니다(replace: true). 수정자는 라이브 효과가 됩니다. { ids, notes } 반환.
vector.delete	노드(ids)를 삭제합니다.
vector.rename	노드 id의 이름을 name으로 바꿉니다(레이어 패널의 이름). 만든 것을 그것이 무엇인지로 명명하십시오. 사용자의 레이어는 요청받았을 때만 이름을 바꾸십시오. { id, name } 반환.

스타일

명령어	용도
vector.setStyle	ids에 fill, stroke, strokeWidth, strokeLinecap(butt, round, square), strokeLinejoin(miter, round, bevel), strokeDasharray, fillRule(nonzero, evenodd), strokeAlign(center, inside, outside, 닫힌 도형만 해당), startArrow / endArrow(triangle, arrow, open, circle, square, bar, 또는 null), arrowAlign(extend, tip), startArrowScale / endArrowScale(획 너비의 배수, 기본값 1), strokeWidthProfile을 설정합니다. 그룹은 내부의 모든 경로에 적용됩니다. 하나 이상의 필드를 전달하십시오.
vector.setGradient	ids의 채우기(target 기본값) 또는 획의 그래디언트를 편집합니다: type(linear, radial, conic, reflected, diamond), stops, angle(도, 0 위, 시계 방향), cx / cy / r, 명시적 start / end / width / focal, units, spread, interpolation(srgb 기본값, linear, oklab), smoothness, strokeMode, aspect, reverse. 누락된 필드는 해당 값을 유지합니다. 단색은 흰색으로의 그래디언트가 됩니다. 반환합니다.

...

[번역을 위해 잘림]