Pixerate/pixerate-vector

Editor vectorial Pixerate

El documento vectorial es una mesa de trabajo (ancho x alto en unidades del documento, y hacia abajo) que contiene un árbol de nodos: nodos de ruta (uno o más subtrazados de anclas Bezier, con relleno, trazo y configuraciones de trazo), nodos de texto (una cadena configurada como texto de punto, texto de área o a lo largo de una ruta, pintada con los mismos rellenos y trazos), nodos de instancia (una copia colocada de un símbolo) y nodos de grupo. Los grupos también pueden ser booleanos en vivo, mezclas en vivo, grupos de máscara o llevar una pila de efectos en vivo. Cada comando es un comando vector.* ejecutado con run_command / run_commands (consulte pixerate-agent-tools para el procesamiento por lotes con referencias "$0.id", atomic: true y códigos de error).

• ID de nodo provienen de vector.list y de lo que devuelven las escrituras ({ id }, { ids }).
• Anclas son { nodeId, subpath, index }: número de subtrazado dentro de la ruta, luego número de ancla dentro del subtrazado, ambos desde 0. Los comandos que toman anchors por defecto usan los puntos seleccionados con la herramienta directa; los que toman ids por defecto usan la selección.
• Pintura es un color CSS, null para ninguno, o un objeto degradado { type, stops: [{ offset, color, opacity?, midpoint? }], ... }.
• Apariencia: una ruta puede apilar varios rellenos y varios trazos (de abajo arriba; todos los rellenos dibujan debajo de todos los trazos), cada uno con su propia pintura, opacity, blendMode y visible, y cada trazo con su propio ancho, alineación, guiones, extremos, uniones, puntas de flecha y perfil, o un trazado de pincel (vector.addBrushstroke, vector.setBrushstroke, vector.listBrushes) pintado a lo largo del contorno con un pincel seco o húmedo, un Pincel Mezclador, un difuminador o mezclador, pintura degradada, jitter con semilla y grano de papel. Las capas se abordan por index en su pila, 0 en la parte inferior. fill / stroke y la configuración de trazo de vector.setStyle son abreviaturas para la capa superior; null limpia la pila. Cualquier nodo también puede tener un blendMode y filtros (sombra exterior / interior, brillo exterior / interior, desenfoque de capa, pluma), que nunca cambian la geometría.
• Máscaras: el primer hijo (inferior) de un grupo de máscara es su máscara; los hijos por encima solo se muestran dentro del contorno de la máscara (clip), o donde es brillante (luminance) u opaco (alpha). invert intercambia lo mostrado y lo oculto. vector.list da a un grupo de máscara un mask { type, invert, maskId, contents, enabled }; una máscara oculta (enabled: false) no enmascara nada.
• Texto tiene una font base (familia, peso, cursiva, tamaño, tracking, interlineado, desplazamiento de línea base, subrayado, tachado), ejecuciones opcionales que anulan campos sobre rangos (start / end en unidades de código UTF-16, más un rango fill), un estilo de paragraph y un frame: point (x, y de la primera línea base), area (una caja en la que se envuelve) o path (una línea que sigue).
• Símbolos son arte reutilizable guardado con el documento (vector.listSymbols), dibujado por nodos de instancia a través de una transformación que, a diferencia de otros nodos, puede escalar y sesgar. Editar un símbolo (vector.editSymbol … vector.exitSymbolEdit) cambia cada instancia.
• Restricciones (estilo CAD) mantienen relaciones geométricas y dimensiones entre anclas, segmentos y rutas redondas; se resuelven después de cada edición, por lo que los movimientos posteriores las mantienen.
• Marcos son grupos con un rectángulo frame (vector.listFrames): dibujan un fondo, recortan sus hijos y seleccionan por su rectángulo; los marcos de nivel superior son mesas de trabajo. Cuando se redimensiona un marco, sus hijos siguen sus restricciones de redimensionamiento (horizontal left / right / leftRight / center / scale, vertical top / bottom / topBottom / center / scale) en lugar de escalar.
• Conectores son rutas abiertas con un connector cuyos extremos están pegados a los sitios de otros objetos (la mitad de un lado, o el centro); se enrutan de nuevo después de cada edición, por lo que siguen lo que conectan. Un extremo libre permanece donde está.
• Grupos de simetría dibujan sus hijos más copias reflejadas o rotadas. Agregue arte a uno con parentId en vector.addShape / vector.addPath; solo los originales se almacenan y editan.
• Las coordenadas son en unidades del documento. Un nodo rotado almacena su geometría en su propio espacio: los bounds que vector.list reporta están en el espacio del documento, su d es propio del nodo.

Los detalles de los parámetros (campos de degradado, parámetros de efecto, perfiles de ancho, envolventes) están en referencias/comandos.md.

Habilidades de flujo de trabajo

Para estos trabajos, cargue también la habilidad de flujo de trabajo: tiene el método, las comprobaciones entre pasos y los errores comunes, y utiliza los comandos a continuación.

• pixerate-vector-icon-set: iconos en una cuadrícula, un trazo y estilo, nítidos, como símbolos y SVG.
• pixerate-vector-logo: marcas a partir de booleanos, un bloqueo, variantes de color, archivos de entrega delineados.
• pixerate-vector-illustration: bloqueo inicial, degradados y rellenos apilados, máscaras, mezclas, sombras.

Método de trabajo

1. Leer. vector.list da el tamaño de la mesa de trabajo, cada nodo en profundidad (id, tipo, nombre, límites, rotación, relleno, trazo, d, efectos, información de mezcla y booleana, pilas, modo de fusión y filtros) y la selección. vector.getAppearance da las pilas completas y filtros de un nodo.
2. Planificar en capas. Decida las formas, su apilamiento (de abajo arriba) y su agrupación antes de dibujar. Empiece con primitivas (vector.addShape) y combínelas; escriba d sin formato solo para curvas que las primitivas no pueden hacer.
3. Escribir en lotes. Coloque una secuencia de construcción en un run_commands con atomic: true y un label, encadenando ids ("$0.id", "$last.ids"), de modo que sea un paso de deshacer que se aplica todo o nada.
4. Preferir en vivo, expandir al final. Use booleanos live: true, efectos de ruta, envolventes, esquinas vivas y mezclas mientras diseña; hornee con vector.expandAppearance, vector.expandBlend o vector.outlineStroke solo cuando el usuario necesite rutas simples.
5. Verificar. vector.list de nuevo: límites donde los pretendía, sin nodos sueltos, nombres sensatos. vector.exportSvg da el marcado final; revíselo, o renderícelo si puede, antes de entregarlo.

Mejores prácticas

• Marcos para todo lo que se redimensiona. Construya pantallas, tarjetas, botones y pancartas dentro de un marco (vector.addFrame o vector.frameSelection), establezca las restricciones de cada hijo con vector.setResizing (fondos y divisores leftRight, iconos fijados a su esquina, títulos center), luego redimensione con vector.setFrame para producir otros tamaños a partir de un diseño. Exporte cada mesa de trabajo con vector.exportFrameSvg.
• Símbolos para repeticiones. Cuando el mismo arte aparece varias veces (iconos en un conjunto, árboles en una escena, viñetas, una marca de logotipo), hágalo una vez y coloque instancias (vector.makeSymbol, luego vector.placeSymbol con x / y o un transform), de modo que una edición aislada los cambie a todos. Dé a cada uno un nombre claro. Use vector.setInstanceOptions fill / stroke para variantes de color y hidden para eliminar una parte, en lugar de desvincular; desvincule solo cuando una copia deba divergir para siempre.
• Texto. Use texto de punto para etiquetas y titulares, texto de área (width, height) para cualquier cosa que deba ajustarse, texto en una ruta para placas y sellos. Verifique overflow en el resumen que cada escritura de texto devuelve: líneas o caracteres ocultos significan que la caja o ruta es demasiado pequeña. Mantenga una o dos familias por diseño (vector.listFonts enumera lo que tiene el conformador; una familia faltante se dibuja en un respaldo y aparece en missingFonts). Estilo de rangos con vector.setTextStyle en lugar de dividir el texto en nodos separados, de modo que aún se edite como un párrafo. Cree contornos solo para arte final o logotipos que no deban depender de fuentes; guarde una copia como texto si puede cambiar.
• Rutas, trazos, pinceladas, booleanos, degradados, pilas, máscaras, sombras, conectores, restricciones y texto vertical: lea primero referencias/mejores-practicas.md.
• No destructivo primero. Booleanos en vivo (vector.boolean con live: true), efectos de ruta y envolventes mantienen los operandos editables. Un booleano destructivo o Pathfinder reemplaza sus entradas; haga eso al final, y solo cuando se solicite una salida plana.
• Agrupación y nombres. Agrupe las partes de un objeto (vector.group con un name), nombre las rutas que importan (name al agregar), y mantenga el árbol poco profundo.
• Higiene de SVG. Exporte con precision 2 o 3 (predeterminado 3); más alto solo para mesas de trabajo muy pequeñas. Expanda efectos, mezclas y trazos de ancho variable antes de entregar SVG a herramientas que no lean los atributos data-vector-* de Pixerate; otros lectores ven la apariencia dibujada pero no la fuente en vivo.

Comandos

Leer

Comando	Úselo para
vector.list	Leer el documento: { width, height, nodes, selection, tool }. Cada nodo tiene id, tipo, nombre, profundidad, bounds en espacio del documento, rotation (grados en sentido horario), visible, bloqueado, seleccionado, y para rutas relleno, trazo, strokeWidth y d; los grupos listan children, blend, liveBoolean, effects, mask. Los bounds de un grupo de máscara son su resultado enmascarado. Llámelo primero y después de cualquier lote.
vector.shapeBuilderFaces	Listar las regiones en que las rutas dadas dividen el plano: datos de ruta, área, un punto dentro de cada una y los ids de rutas que la rellenan. Use los puntos con vector.shapeBuilder.
vector.exportSvg	Obtener el documento como marcado SVG independiente ({ svg }); precision 0 a 8 decimales (predeterminado 3).
vector.exportPdf	Obtener un PDF vectorial listo para imprimir como una URL de datos base64: una página, o una por mesa de trabajo con pages: "artboards". Devuelve { pdf, pages, bytes, notes }; verifique notes (los filtros, las máscaras de opacidad y el texto sin fuentes cargadas se omiten).
vector.exportLottie	Obtener el documento (o ids) como JSON de Lottie para reproductores de animación: los efectos de ruta permanecen en vivo como modificadores de Lottie, los degradados como rellenos de degradado. Devuelve { lottie, notes }; lea notes para saber qué se aproximó (filtros, degradados de malla, texto sin contornos).

Crear y eliminar

Comando	Úselo para
vector.traceImage	Convertir un PNG (URL de datos) en rutas vectoriales en un grupo: modo threshold para arte de un solo color (logotipos, escaneos, siluetas; channel: "alpha" para recortes), modo color para una ruta apilada por color (colors 2–32). Aumente tolerance para menos anclas, cornerRoundness 0 para polígonos afilados. Colóquelo con x, y, width. Devuelve { id, paths }; verifique los recuentos de subpaths y simplifique o elimine motas después.
vector.mosaicImage	Estilizar un PNG como mosaico (cell px, shape square / circle, gap, colors): arte de píxeles, murales de mosaico. Devuelve { id, paths }, una ruta compuesta por color.
vector.halftoneImage	Estilizar un PNG como puntos de semitono en una pantalla girada (cell, angle, tinta color o null para los colores de la imagen): looks de cómic y pop-art, efectos de impresión.
vector.lowPolyImage	Estilizar un PNG como triángulos low-poly (cell, jitter, seed, colors): retratos geométricos y fondos.
vector.hatchImage	Estilizar un PNG como líneas de grabado que se hinchan donde es oscuro (cell espaciado, angle, tinta color): looks de billete, xilografía y arte lineal.
vector.addPathByDimensions	Dibujar una ruta como la escribiría un usuario de CAD: desde start, cada paso { length, angle } (grados en sentido antihorario en la página: 0 derecha, 90 arriba), { dx, dy } o { x, y }; closed une los extremos. Úselo para contornos técnicos exactos (soportes, planos de planta, longitudes y ángulos dados) en lugar de calcular coordenadas manualmente. Devuelve { id, anchors }.
vector.addShape	Agregar un kind rect, ellipse, polygon (sides, al menos 3), star (points, innerRatio 0 a 1) o line en x, y, width, height (todos requeridos; para una línea, ancho y alto son el desplazamiento del extremo). cornerRadius y cornerKind dan esquinas vivas; cualquier campo de estilo y name se aplican. Usa el estilo predeterminado del editor para cualquier cosa no dada. Devuelve { id }.
vector.addPath	Agregar una ruta a partir de datos de ruta SVG d (M, L, H, V, C, S, Q, T, A, Z absolutos o relativos; arcos y cuadráticas se convierten en cúbicas) en unidades del documento, con name y campos de estilo; el estilo no establecido proviene de los valores predeterminados del editor. Falla cuando d no tiene puntos. Devuelve { id }.
vector.importSvg	Agregar las formas del marcado SVG svg encima del documento, o reemplazar el documento con replace: true. Lee rutas, formas básicas, grupos, transformaciones, degradados lineales y radiales, referencias clip-path / mask (como grupos de máscara) <text> (como texto de punto: contenido, fuente, ancla y relleno) y <use> (como instancias de símbolos hechos de lo que referencian); omite imágenes y filtros externos.
vector.importLottie	Agregar un frame de una animación Lottie (objeto o texto) como grupos editables, o reemplazar el documento (replace: true). Los modificadores se convierten en efectos en vivo. Devuelve { ids, notes }.
vector.delete	Eliminar nodos (ids).
vector.rename	Renombrar el nodo id a name (su nombre en el panel Capas). Nombra lo que haces por lo que es; renombra las capas del usuario solo cuando se te pida. Devuelve { id, name }.

Estilo

Comando	Úselo para
vector.setStyle	Establecer fill, stroke, strokeWidth, strokeLinecap (butt, round, square), strokeLinejoin (miter, round, bevel), strokeDasharray, fillRule (nonzero, evenodd), strokeAlign (center, inside, outside; solo formas cerradas), startArrow / endArrow (triangle, arrow, open, circle, square, bar, o null), arrowAlign (extend, tip), startArrowScale / endArrowScale (múltiplos del ancho del trazo, predeterminado 1), strokeWidthProfile en ids. Los grupos se aplican a cada ruta dentro. Pase al menos un campo.
vector.setGradient	Editar el degradado del relleno (target predeterminado) o trazo de ids: type (linear, radial, conic, reflected, diamond), stops, angle (grados, 0 arriba, en sentido horario), cx / cy / r, start / end / width / focal explícitos, units, spread, interpolation (srgb predeterminado, linear, oklab), smoothness, strokeMode, aspect, reverse. Los campos faltantes mantienen su valor; un color sólido se convierte en un degradado de él a blanco. Devuelve el ...

... [truncado para traducción]