Pixerateベクターエディター
ベクタードキュメントは、ノードのツリーを保持するアートボード（ドキュメント単位でのwidth x height、y下向き）です。ノードには、pathノード（ベジェアンカーの1つ以上のサブパス、塗り、ストローク、ストローク設定を含む）、textノード（ポイントテキスト、エリアテキスト、またはパスに沿って設定された文字列。同じ塗りとストロークで描画されます）、instanceノード（シンボルの配置コピー）、およびgroupノードがあります。グループは、ライブブーリアン、ライブブレンド、マスクグループ、またはライブエフェクトスタックを持つこともできます。すべてのコマンドは、run_command / run_commandsで実行されるvector.*コマンドです（バッチ処理についてはpixerate-agent-toolsを参照。"$0.id"参照、atomic: true、エラーコードを使用）。
- ノードIDは
vector.listから、および書き込みが返すもの（{ id }、{ ids }）から取得します。 - アンカーは
{ nodeId, subpath, index }です。subpathはパス内のサブパス番号、indexはサブパス内のアンカー番号で、どちらも0から始まります。anchorsを受け取るコマンドは、デフォルトでダイレクトツールで選択されたポイントを使用します。idsを受け取るコマンドは、デフォルトで選択範囲を使用します。 - ペイントはCSSカラー、なしの場合は
null、またはグラデーションオブジェクト{ type, stops: [{ offset, color, opacity?, midpoint? }], ... }です。 - アピアランス: パスは複数の塗りと複数のストロークを積み重ねることができます（下から上へ。すべての塗りはすべてのストロークの下に描画されます）。それぞれに独自のペイント、
opacity、blendMode、visibleがあり、各ストロークには独自の幅、整列、破線、キャップ、ジョイン、矢印、プロファイル、またはブラシストローク（vector.addBrushstroke、vector.setBrushstroke、vector.listBrushes）があり、輪郭に沿ってドライまたはウェットブラシ、ミキサーブラシ、スミッジまたはブレンダー、グラデーションペイント、シードジッター、ペーパーグレインで描画されます。レイヤーはスタック内のindexでアドレス指定され、0が一番下です。fill/strokeおよびvector.setStyleのストローク設定は、一番上のレイヤーのショートハンドです。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を持つ開いたパスで、その端が他のオブジェクトのサイト（辺の中央、または中心）に接着されています。編集のたびに再ルーティングされるため、接続先に追従します。自由端はその場に留まります。 - 対称グループは、子とそのミラーリングまたは回転コピーを描画します。
parentIdをvector.addShape/vector.addPathで使用してアートを追加します。オリジナルのみが保存および編集されます。 - 座標はドキュメント単位です。回転されたノードは、自身の空間にジオメトリを保存します。
vector.listが報告するboundsはドキュメント空間であり、そのdはノード自身のものです。
パラメーターの詳細（グラデーションフィールド、エフェクトパラメーター、幅プロファイル、エンベロープ）は、references/commands.mdにあります。
ワークフロースキル
これらのジョブについては、ワークフロースキルもロードしてください。ワークフロースキルには、方法、ステップ間のチェック、落とし穴が含まれており、以下のコマンドを使用します。
pixerate-vector-icon-set: 1つのグリッド、1つのストロークとスタイル、シャープ、シンボルとSVGとしてのアイコン。pixerate-vector-logo: ブーリアンからのマーク、ロックアップ、カラーバリエーション、アウトラインファイルの納品。pixerate-vector-illustration: ブロックイン、グラデーションと積層塗り、マスク、ブレンド、シャドウ。
作業方法
- 読み取り。
vector.listは、アートボードサイズ、すべてのノードを深さ優先で（id、タイプ、名前、bounds、回転、塗り、ストローク、d、エフェクト、ブレンドとブーリアン情報、スタック、ブレンドモード、フィルター）、および選択範囲を返します。vector.getAppearanceは、1つのノードの完全なスタックとフィルターを返します。 - レイヤーで計画。 描画する前に、シェイプ、そのスタッキング（下から上へ）、およびグループ化を決定します。プリミティブ（
vector.addShape）から始めて組み合わせます。プリミティブでは作成できない曲線にのみ生のdを記述します。 - バッチで記述。 構築シーケンスを1つの
run_commandsにatomic: trueとlabelを付けて配置し、IDをチェーン（"$0.id"、"$last.ids"）します。これにより、1つのアンドゥステップとしてすべてまたは何も適用されません。 - ライブを優先し、最後に展開。 デザイン中は
live: trueのブーリアン、パスエフェクト、エンベロープ、ライブコーナー、ブレンドを使用します。ユーザーがプレーンなパスを必要とする場合にのみ、vector.expandAppearance、vector.expandBlend、またはvector.outlineStrokeでベイクします。 - 確認。 再度
vector.list：意図した場所にboundsがあるか、迷子ノードがないか、適切な名前か。vector.exportSvgで最終的なマークアップを取得します。それを確認するか、可能であればレンダリングしてから引き渡します。
ベストプラクティス
- サイズ変更するものにはフレーム。 画面、カード、ボタン、バナーをフレーム（
vector.addFrameまたはvector.frameSelection）内に構築し、各子の制約をvector.setResizingで設定し（背景と仕切りはleftRight、アイコンはコーナーに固定、タイトルはcenter）、その後vector.setFrameでサイズ変更して、1つのデザインから他のサイズを生成します。各アートボードをvector.exportFrameSvgでエクスポートします。 - 繰り返しにはシンボル。 同じアートが複数回表示される場合（セット内のアイコン、シーン内の木、箇条書き、ロゴマーク）、1回作成し、インスタンスを配置します（
vector.makeSymbol、次にvector.placeSymbolをx/yまたはtransformで）。これにより、個別の編集でそれらすべてが変更されます。それぞれに明確な名前を付けます。カラーバリエーションにはvector.setInstanceOptionsのfill/strokeを使用し、一部を削除するにはhiddenを使用します。分離は、1つのコピーが永久に分岐する必要がある場合のみ行います。 - テキスト。 ラベルや見出しにはポイントテキスト、折り返す必要があるものにはエリアテキスト（
width、height）、バッジやシールにはパス上のテキストを使用します。各テキスト書き込みが返すサマリーのoverflowを確認します。非表示の行や文字は、ボックスまたはパスが小さすぎることを意味します。デザインごとに1つまたは2つのファミリーに抑えます（vector.listFontsでシェイパーが持つものをリストします。不足しているファミリーはフォールバックで描画され、missingFontsに表示されます）。テキストを別々のノードに分割する代わりに、vector.setTextStyleでスタイル範囲を設定します。これにより、1つの段落として編集できます。最終的なアートワークやフォントに依存してはならないロゴにのみCreate Outlinesを使用します。変更される可能性がある場合は、コピーをテキストとして保持します。 - パス、ストローク、ブラシストローク、ブーリアン、グラデーション、スタック、マスク、シャドウ、コネクター、制約、縦書きテキスト： 最初にreferences/best-practices.mdを読んでください。
- まず非破壊で。 ライブブーリアン（
live: trueのvector.boolean）、パスエフェクト、エンベロープは、オペランドを編集可能に保ちます。破壊的なブーリアンまたはパスファインダーは入力を置き換えます。これは最後に、フラットな出力が求められた場合のみ行います。 - グループ化と命名。 1つのオブジェクトのパーツをグループ化し（
nameを付けてvector.group）、重要なパスに名前を付け（追加時にname）、ツリーを浅く保ちます。 - SVGの衛生。
precision2または3（デフォルト3）でエクスポートします。より高い値は、非常に小さなアートボードにのみ使用します。Pixerateのdata-vector-*属性を読み取らないツールにSVGを渡す前に、エフェクト、ブレンド、可変幅ストロークを展開します。他のリーダーは描画されたアピアランスを見ますが、ライブソースは見ません。
コマンド
読み取り
| コマンド | 使用目的 |
|---|---|
vector.list | ドキュメントを読み取る：{ width, height, nodes, selection, tool }。各ノードには、id、タイプ、名前、深さ、ドキュメント空間のbounds、rotation（時計回りの度）、visible、locked、selected、パスの塗り、ストローク、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として取得する。1ページ、またはpages: "artboards"でアートボードごとに1ページ。{ pdf, pages, bytes, notes }を返します。notesを確認します（フィルター、不透明マスク、フォントがロードされていないテキストは除外されます）。 |
vector.exportLottie | ドキュメント（またはids）をアニメーションプレーヤー用のLottie JSONとして取得する。パスエフェクトはLottieモディファイアとして、グラデーションはグラデーション塗りとしてライブのまま保持されます。{ lottie, notes }を返します。近似されたもの（フィルター、メッシュグラデーション、アウトライン化されていないテキスト）についてはnotesを読んでください。 |
作成と削除
| コマンド | 使用目的 |
|---|---|
vector.traceImage | PNG（データURL）を1つのグループ内のベクターパスに変換する。シングルカラーアート用のthresholdモード（ロゴ、スキャン、シルエット。カットアウト用にchannel: "alpha"）、色ごとに積み重ねられたパス用のcolorモード（colors 2–32）。アンカーを減らすにはtoleranceを上げ、鋭いポリゴンにはcornerRoundnessを0にします。x、y、widthで配置します。{ id, paths }を返します。subpathsの数を確認し、後で簡略化するかゴミを削除します。 |
vector.mosaicImage | PNGをモザイクタイルとしてスタイライズする（cell px、shape square / circle、gap、colors）。ピクセルアート、タイル壁画。色ごとに1つの複合パスを持つ{ 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（すべて必須。lineの場合、widthとheightは終点のオフセット）で追加します。cornerRadiusとcornerKindはライブコーナーを与えます。任意のスタイルフィールドとnameが適用されます。指定されていないものにはエディターのデフォルトスタイルを使用します。{ id }を返します。 |
vector.addPath | SVGパスデータd（絶対または相対のM、L、H、V、C、S、Q、T、A、Z。円弧と二次曲線は三次曲線になります）からパスをドキュメント単位で追加します。nameとスタイルフィールドを指定できます。設定されていないスタイルはエディターのデフォルトから取得されます。dにポイントがない場合に失敗します。{ id }を返します。 |
vector.importSvg | SVGマークアップsvgのシェイプをドキュメントの上に追加するか、replace: trueでドキュメントを置き換えます。パス、基本シェイプ、グループ、トランスフォーム、線形および放射グラデーション、clip-path / mask参照（マスクグループとして）、<text>（ポイントテキストとして：コンテンツ、フォント、アンカー、塗り）、<use>（参照先から作成されたシンボルのインスタンスとして）を読み取ります。画像と外部フィルターはスキップします。 |
vector.importLottie | Lottieアニメーション（オブジェクトまたはテキスト）の1つのframeを編集可能なグループとして追加するか、ドキュメントを置き換えます（replace: true）。モディファイアはライブエフェクトになります。{ ids, notes }を返します。 |
vector.delete | ノード（ids）を削除します。 |
vector.rename | ノードidの名前をnameに変更します（レイヤーパネルでの名前）。作成したものはそれが何であるかで名前を付けます。ユーザーのレイヤーは、求められた場合にのみ名前を変更します。{ id, name }を返します。 |
スタイル
| コマンド | 使用目的 |
|---|---|
vector.setStyle | 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をidsに設定します。グループは内部のすべてのパスに適用されます。少なくとも1つのフィールドを渡します。 |
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。欠落しているフィールドは現在の値を保持します。単色は、それから白へのグラデーションになります。戻り値は… |
…（以下、翻訳が途中で切れていますが、原文の内容に従って続きます。スキルは、参照ドキュメントのリンクと、さらに多くのコマンド（vector.addStroke、vector.addFill、vector.setBrushstroke、vector.addBrushstroke、vector.listBrushes、vector.setEffect、vector.addEffect、vector.removeEffect、vector.setOpacity、vector.setBlendMode、vector.setMask、vector.addMask、vector.removeMask、vector.setFilter、vector.addFilter、vector.removeFilterなど）と、変形、配置、パス編集、エフェクト、エクスポートに関するコマンドを含むことが想定されます。）