# MasterGo 开发者平台 · 全量内容 > 面向 LLM 的全文知识库 --- # BooleanOperationNode > 分类: apis | URL: https://developers.mastergo.com/apis/booleanOperationNode # BooleanOperationNode `BooleanOperationNode` 代表布尔组图层节点。布尔操作通过四个公式组合任意一组图层：联集（`Union`）、减去顶层（`Subtract`）、交集（`Intersect`）、差集（`Exclude`）。被组合的图层将作为布尔组图层的子节点。 ## Base node properties ### `type` - Readonly: `true` - Type: `'BOOLEAN_OPERATION'` 节点类型，对于 `BooleanOperationNode` 节点来说，其值为字符串 `'BOOLEAN_OPERATION'`。 ### `clone` - Type: `() => BooleanOperationNode` 复制该布尔组节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。 ### `id` - Readonly: `true` - Type: `string` `BooleanOperationNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | null`，[ChildrenMixin](/types/childrenMixin.html) 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置**容器**的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ### `booleanOperation` - Type: `'UNION' | 'INTERSECT' | 'SUBTRACT' | 'EXCLUDE'` 布尔组组合节点的操作类型。 ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 - `'SOLID'`: 实线。 - `'DASH'`: 虚线。 - `'CUSTOM'`: 自定义。 ### `strokeWeight` - Type: `number` 四个方向描边的粗细，以像素为单位。必须是非负数，可以是小数。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => BooleanOperationNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `BooleanOperationNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Corner-related properties ### `cornerSmooth` - Type: `number` 控制角的平滑程度，值域为 `[0, 1]`。 ### `cornerRadius` - Type: `number | PluginAPI['mixed']` 圆角。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前 `BooleanOperationNode` 节点的直接子节点。 ### `appendChild` - Type: `appendChild(child: SceneNode): void` 将给定的节点 `child` 添加为当前 `BooleanOperationNode` 节点的直接子节点。 ### `insertChild` - Type: `insertChild(index: number, child: SceneNode): void` 在指定的位置 `index` 处插入子节点 `child`。假设一个组有三个子节点 A、B、C，现在调用 `insertChild` 方法将插入图层节点 D： - `insertChild(0, D)`，子节点顺序为：**`D`**、A、B、C。 - `insertChild(1, D)`，子节点顺序为：A、**`D`**、B、C。 - `insertChild(2, D)`，子节点顺序为：A、B、**`D`**、C。 - `insertChild(3, D)`，子节点顺序为：A、B、C、**`D`**。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 从当前 `BooleanOperationNode` 节点开始查找整个子树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。 ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 从当前 `BooleanOperationNode` 节点开始查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。 ### `findChildren` - Type: `findChildren(callback?: (node: SceneNode) => boolean): ReadonlyArray` 与 `findAll` 类似，不同之处在于，`findChildren` 仅会在当前 `BooleanOperationNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findChild` - Type: `findChild(callback: (node: SceneNode) => boolean): SceneNode | null` 与 `findOne` 类似，不同之处在于，`findChild` 仅会在当前 `BooleanOperationNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找当前节点的所有子节点，返回所有类型符合的节点。 ```js const nodes = node.findAllWithCriteria({types: ['FRAME', 'COMPONENT']}) ``` ## Frame-related properties ### `flexMode` - Type: `'NONE' | 'HORIZONTAL' | 'VERTICAL'` 表示该 Frame 是否采用自动布局： - `'NONE'`: 没有采用自动布局。 - `'HORIZONTAL'`: 自动布局，水平方向。 - `'VERTICAL'`: 自动布局，垂直方向。 可以通过修改 `node.flexMode` 属性来改变 Frame 图层的布局方式： ```ts const booleanNode = document.children[0].children[0] as BooleanOperationNode booleanNode.flexMode = 'HORIZONTAL' // 水平方向自动布局 booleanNode.flexMode = 'NONE' // 移除自动布局 ``` 改变 `flexMode` 属性会导致 Frame 图层的子节点的位置发生改变，同时也可能使得 Frame 图层本身的尺寸发生改变。 ### `flexWrap` - Type: `'NO_WRAP' | 'WRAP'` 此属性只能在 `flexMode === “HORIZONTAL”` 的图层上设置。在没有此属性的图层上设置它将引发错误。 此属性必须设置为`'WRAP'`，才能使 `crossAxisSpacing` 和 `crossAxisAlignContent` 属性生效。 ### `itemSpacing` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。代表该 Frame 节点的子节点间的间距。 ### `crossAxisSpacing` - Type: `number` | `null` 仅适用于 `flexWrap` 设置为 `WRAP` 的自动布局图层。表达换行的行之间的距离。该值必须为正数。 :::tip 将此属性设置为 `null` 以使其与 `itemSpacing` 同步。但`crossAxisSpacing`不会返回为`null`。设置为 `null` 后，它会返回 `itemSpacing` 的值。 ::: ### `mainAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER' | 'SPACING_BETWEEN'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在主轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - `'SPACING_BETWEEN'` 会使得子节点在主轴方向上均匀的排列，并且仅在子节点之间放置空白。 ### `crossAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在交叉轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 ### `mainAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器主轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的主轴长度。直接设置主轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器交叉轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的交叉轴长度。直接设置交叉轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisAlignContent` - Type: `'AUTO' | 'SPACE_BETWEEN'` 仅适用于自动布局模式为为"WRAP"的自动布局图层。确定不同的行在自动布局图层内的分布方式。 :::tip 在非换行自动布局图层上更改此属性将报错。 * `AUTO`：如果此自动布局帧的所有子帧的 layoutAlign 都设置为“STRETCH”，则轨道将拉伸以填充自动布局帧。这就像 `flexbox align-content： stretch`。否则，每个路径将与路径的最高子路径一样高，并将根据 `crossAxisAlignItem` 的值对齐。这就像 `flexbox align-content： start | center | end` 。 `crossAxisAlignContent` 设置为`AUTO`时，将遵循 `crossAxisSpacing`。 * `SPACE_BETWEEN`：路径的所有大小都基于路径中最高的子图层。自动布局容器内的可用空间在每个路径之间平均分配。如果所有路径的总高度都高于自动布局容器的高度，则间距将为 0。 ::: ### `itemReverseZIndex` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定此容器中图层的画布堆叠顺序。当为`true`时，则第一层将在顶部绘制。 ### `strokesIncludedInLayout` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定描边是否包含在布局计算中。当为`true`时，自动布局容器的行为类似于 `css box-sizing:border-box`。 ### `paddingTop` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的上内边距。 ### `paddingRight` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的右内边距。 ### `paddingBottom` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的下内边距。 ### `paddingLeft` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的左内边距。 ## Container-related properties ### `expanded` - Type: `boolean` 此容器是否在图层面板中显示为展开。 ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 图层节点的最大高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minHeight` - Type: `number` 图层节点的最小高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 --- # mg.clientStorage > 分类: apis | URL: https://developers.mastergo.com/apis/clientStorage # mg.clientStorage - Type: ```ts interface ClientStorageAPI { getAsync(key: string): Promise setAsync(key: string, value: any): Promise keysAsync(): Promise deleteAsync(key: string): Promise } ``` `mg.clientStorage` 对象包含了用来在用户机器上完成数据本地持久化存储的方法。它类似于 Web 中的 `loaclStorage` API，但不同的是，`clientStorage` 是异步的。可以通过 `clientStorage` 来存储 `object`、`array`、`string`、`number`、`boolean`、`null`、`undefined` 以及 `Uint8Array` 等类型的数据。 ::: warning 通过 `mg.clientStorage` 设置的数据不会跨用户共享。另外，当用户清除浏览器缓存时，通过 `clientStorage` 存储的数据可能被一同清除。 ::: ## `getAsync` - Type: `getAsync(key: string): Promise` 根据指定的 `key` 读取数据。 ## `setAsync` - Type: `setAsync(key: string, value: any): Promise` 根据给定的 `key` 将 `value` 存储在 `clientStorage` 上。 ## `keysAsync` - Type: `keysAsync(): Promise` 获取存储在`clientStorage`上的所有`key` 。 ## `deleteAsync` - Type: `deleteAsync(key: string): Promise` 删除 `clientStorage` 上`key`对应的的数据。 --- # mg.codegen > 分类: apis | URL: https://developers.mastergo.com/apis/codegen # mg.codegen ::: tip 注意：该对象仅在`研发模式`下可使用 ::: - Type: ```ts interface CodegenAPI { /** * @param event a callback function that is triggered when the plugin generates the DSL, and the parameter of the callback function is the modified DSL data */ on(type: 'generateDSL', event: (generateData: {data: MGDSL.MGDSLData, callback: (modifiedData: MGDSL.MGDSLData) => void}) => void) : void /** * @param event a callback function that is triggered when the plugin generates the DSL, and the parameter of the callback function is the custom code, and when the callback returns the custom code, the custom code will be used as the standard, and the code will not be generated according to the DSL */ on(type: 'generate', event: (generateData: {data: MGDSL.MGDSLData, callback: (modifiedData: MGDSL.CustomCode) => void}) => void) : void /** * @param event a callback function that is triggered when the plugin generates the code, and the parameter of the callback function is the generated code */ on(type: 'codeChange', event: (data: MGDSL.CustomCode['data']) => void) : void /** * Set the component template * @description used to set the component mapping relationship * @param template component template */ setComponentTemplate(template: MGTMP.ComponentTemplate): void /** * Get code by id and framework * @param layerId layer id * @param type framework type * @returns code file */ getCode(layerId: string, type: MGDSL.Framework): Promise; /** * Get DSL by id and framework * @param layerId layer id * @param type framework type * @returns DSL data */ getDSL(layerId: string, type: MGDSL.Framework): Promise; /** * Get code by DSL * @param data DSL data * @param type framework type * @returns code file */ getCodeByDSL(data: MGDSL.MGDSLData, type: MGDSL.Framework): Promise; } ``` 该对象在研发模式中生成，用于通过图层信息生成DSL，进而生成代码。 ## on `on`方法允许注册特定事件的处理函数，当事件发生时会执行该回调函数： ### generateDSL ```ts /** * @param event a callback function that is triggered when the plugin generates the DSL, and the parameter of the callback function is the modified DSL data */ on(type: 'generateDSL', event: (generateData: {data: MGDSL.MGDSLData, callback: (modifiedData: MGDSL.MGDSLData) => void}) => void) : void ``` 该回调在生成`DSL`后运行，允许用户修改DSL并通过`callback`函数返回。如果用户这样做,则后续代码生成会根据返回的`dsl`为准。 ### generate ```ts /** * @param event a callback function that is triggered when the plugin generates the DSL, and the parameter of the callback function is the custom code, and when the callback returns the custom code, the custom code will be used as the standard, and the code will not be generated according to the DSL */ on(type: 'generate', event: (generateData: {data: MGDSL.MGDSLData, callback: (modifiedData: MGDSL.CustomCode) => void}) => void) : void ``` 该回调在生成`DSL`后运行，允许用户根据`DSL`生成自定义代码并通过`callback`返回。如果用户这样做，则后续会显示用户生成的代码。暂停对应的`DSL`生成`CODE`的行为。 ### codeChange ```ts /** * @param event a callback function that is triggered when the plugin generates the code */ on(type: 'codeChange', event: (data: MGDSL.CustomCode['data']) => void) : void ``` 该回调在生成代码后运行，返回给用户生成的对应代码。 ## setComponentTemplate ```ts /** * Set the component template * @description used to set the component mapping relationship * @param template component template */ setComponentTemplate(template: MGTMP.ComponentTemplate): void ``` 设置组件模板。当存在组件模板时，图层的实例（`instance`）会根据模板映射方式生成对应的代码。 ::: tip 你可以设置一个button组件集的模板为: ```ts { name: 'Button', props: [ { type: 'STRING', name: 'type', aliasName: 'Type', lowerCase: true, }, { type: 'STRING', name: 'size', aliasName: 'Size', lowerCase: true, }, { type: 'BOOLEAN', name: 'ghost', aliasName: 'Ghost', aliasMap: BOOLEANOPERATION, }, { type: 'BOOLEAN', name: 'danger', aliasName: 'Danger', aliasMap: BOOLEANOPERATION, }, { type: 'BOOLEAN', name: 'disabled', aliasName: 'State', aliasMap: { Disabled: true, }, }, { type: 'STRING', name: 'shape', aliasName: 'Shape', lowerCase: true, }, { type: 'SLOT', name: 'icon', ignoreClass: true, nodePath: ['Content', 'Icon \/ .*'], }, ], slots: [ { name: 'default', relateNodeNames: [['Content', 'Button']], type: 'TEXT', }, ], source: { path: '', export: 'Button', }, id: 'layerId', }, ``` 在d2c面板中你可以得到: ![](/d2c.png) ::: ## getCode ```ts /** * Get code by id and framework * @param layerId layer id * @param type framework type * @returns code file */ getCode(layerId: string, type: MGDSL.Framework): Promise; ``` 根据图层id获取生成代码 ## getDSL ```ts /** * Get DSL by id and framework * @param layerId layer id * @param type framework type * @returns DSL data */ getDSL(layerId: string, type: MGDSL.Framework): Promise; ``` 根据图层id获取DSL ## getCodeByDSL ```ts /** * Get code by DSL * @param data DSL data * @param type framework type * @returns code file */ getCodeByDSL(data: MGDSL.MGDSLData, type: MGDSL.Framework): Promise; ``` 根据DSL生成代码 --- # ComponentNode > 分类: apis | URL: https://developers.mastergo.com/apis/componentNode # ComponentNode `ComponentNode` 代表组件图层节点，组件是可以在你的设计中进行复用的元素。 ## Base node properties ### `type` - Readonly: `true` - Type: `'COMPONENT'` 节点类型，对于 `ComponentNode` 节点来说，其值为字符串 `'COMPONENT'`。 ### `clone` - Type: `clone(): ComponentNode` 复制该组件节点为一个没有实例的新组件节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。 ### `id` - Readonly: `true` - Type: `string` `ComponentNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置组件的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ### `createInstance` - Type: `() => InstanceNode` 创建该组件的一个实例，默认情况下，`mg.document.currentPage` 将作为新创建的实例的父节点。 ## Publishable properties ### `description` - Type: `string` 组件的描述信息。 ### ukey - Readonly: `true` - Type: `string` 组件唯一的key。 ### isExternal - Readonly: `true` - Type: `boolean` 是否是团队库组件。 ### publishStatus - Readonly: `true` - Type: [`PublishStatus`](/types/teamLibrary##publishStatus) 当前组件的团队库发布状态。 ### `documentationLinks` - Type: Array 此组件的文档链接。 :::tip 该API目前仅支持设置单个文档链接。要清除文档链接，请设置为空列表 []。 ::: ```ts node.documentationLinks = [{ uri: "https://mastergo.com" }] // clear documentation links node.documentationLinks = [] ``` ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前 `ComponentNode` 节点的直接子节点。 ### `appendChild` - Type: `appendChild(child: SceneNode): void` 将给定的节点 `child` 添加为当前 `ComponentNode` 节点的直接子节点。 ### `insertChild` - Type: `insertChild(index: number, child: SceneNode): void` 在指定的位置 `index` 处插入子节点 `child`。假设一个组有三个子节点 A、B、C，现在调用 `insertChild` 方法将插入图层节点 D： - `insertChild(0, D)`，子节点顺序为：**`D`**、A、B、C。 - `insertChild(1, D)`，子节点顺序为：A、**`D`**、B、C。 - `insertChild(2, D)`，子节点顺序为：A、B、**`D`**、C。 - `insertChild(3, D)`，子节点顺序为：A、B、C、**`D`**。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 从当前 `ComponentNode` 节点开始查找整个子树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。 ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 从当前 `ComponentNode` 节点开始查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。 ### `findChildren` - Type: `findChildren(callback?: (node: SceneNode) => boolean): ReadonlyArray` 与 `findAll` 类似，不同之处在于，`findChildren` 仅会在当前 `ComponentNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findChild` - Type: `findChild(callback: (node: SceneNode) => boolean): SceneNode | null` 与 `findOne` 类似，不同之处在于，`findChild` 仅会在当前 `ComponentNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找当前节点的所有子节点，返回所有类型符合的节点。 ```js const nodes = node.findAllWithCriteria({types: ['FRAME', 'COMPONENT']}) ``` ## Frame-related properties ### `clipsContent` - Type: `boolean` 容器是否对超出的内容进行裁剪，即超出容器的图层是否可见。 ### `layoutGrids` - Type: [`ReadonlyArray`](/types/layoutGrid) 布局网格。 :::tip 布局网格只有在非自动布局时设置才会生效。 ::: ### `gridStyleId` - Type: string 布局网格样式Id。 ### `flexMode` - Type: `'NONE' | 'HORIZONTAL' | 'VERTICAL'` 表示该 Frame 是否采用自动布局： - `'NONE'`: 没有采用自动布局。 - `'HORIZONTAL'`: 自动布局，水平方向。 - `'VERTICAL'`: 自动布局，垂直方向。 可以通过修改 `node.flexMode` 属性来改变 Frame 图层的布局方式： ```ts const component = document.children[0].children[0] as ComponentNode component.flexMode = 'HORIZONTAL' // 水平方向自动布局 component.flexMode = 'NONE' // 移除自动布局 ``` 改变 `flexMode` 属性会导致 Frame 图层的子节点的位置发生改变，同时也可能使得 Frame 图层本身的尺寸发生改变。 ### `flexWrap` - Type: `'NO_WRAP' | 'WRAP'` 此属性只能在 `flexMode === “HORIZONTAL”` 的图层上设置。在没有此属性的图层上设置它将引发错误。 此属性必须设置为`'WRAP'`，才能使 `crossAxisSpacing` 和 `crossAxisAlignContent` 属性生效。 ### `itemSpacing` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。代表该 Frame 节点的子节点间的间距。 ### `crossAxisSpacing` - Type: `number` | `null` 仅适用于 `flexWrap` 设置为 `WRAP` 的自动布局图层。表达换行的行之间的距离。该值必须为正数。 :::tip 将此属性设置为 `null` 以使其与 `itemSpacing` 同步。但`crossAxisSpacing`不会返回为`null`。设置为 `null` 后，它会返回 `itemSpacing` 的值。 ::: ### `mainAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER' | 'SPACING_BETWEEN'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在主轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - `'SPACING_BETWEEN'` 会使得子节点在主轴方向上均匀的排列，并且仅在子节点之间放置空白。 ### `crossAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在交叉轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 ### `mainAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器主轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的主轴长度。直接设置主轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器交叉轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的交叉轴长度。直接设置交叉轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisAlignContent` - Type: `'AUTO' | 'SPACE_BETWEEN'` 仅适用于自动布局模式为为"WRAP"的自动布局图层。确定不同的行在自动布局图层内的分布方式。 :::tip 在非换行自动布局图层上更改此属性将报错。 * `AUTO`：如果此自动布局帧的所有子帧的 layoutAlign 都设置为“STRETCH”，则轨道将拉伸以填充自动布局帧。这就像 `flexbox align-content： stretch`。否则，每个路径将与路径的最高子路径一样高，并将根据 `crossAxisAlignItem` 的值对齐。这就像 `flexbox align-content： start | center | end` 。 `crossAxisAlignContent` 设置为`AUTO`时，将遵循 `crossAxisSpacing`。 * `SPACE_BETWEEN`：路径的所有大小都基于路径中最高的子图层。自动布局容器内的可用空间在每个路径之间平均分配。如果所有路径的总高度都高于自动布局容器的高度，则间距将为 0。 ::: ### `itemReverseZIndex` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定此容器中图层的画布堆叠顺序。当为`true`时，则第一层将在顶部绘制。 ### `strokesIncludedInLayout` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定描边是否包含在布局计算中。当为`true`时，自动布局容器的行为类似于 `css box-sizing:border-box`。 ### `paddingTop` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的上内边距。 ### `paddingRight` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的右内边距。 ### `paddingBottom` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的下内边距。 ### `paddingLeft` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的左内边距。 ### `resizeToFit` - Type: `resizeToFit(): void` 适应内容大小。 ## Container-related properties ### `expanded` - Type: `boolean` 此容器是否在图层面板中显示为展开。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 - `'SOLID'`: 实线。 - `'DASH'`: 虚线。 - `'CUSTOM'`: 自定义。 ### `strokeWeight` - Type: `number` 四个方向描边的粗细，以像素为单位。必须是非负数，可以是小数。需要注意，若设置了单边描边如`strokeTopWeight`，则以单边描边为准；若设置了`strokeWeight`，会同时设置了四个方向的单边描边。 ### `strokeTopWeight` - Type: `number` 顶侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeTopWeight`或`strokeWeight`更改。 ### `strokeLeftWeight` - Type: `number` 左侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeLeftWeight`或`strokeWeight`更改。 ### `strokeBottomWeight` - Type: `number` 底侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeBottomWeight`或`strokeWeight`更改。 ### `strokeRightWeight` - Type: `number` 右侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeRightWeight`或`strokeWeight`更改。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => ComponentNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `ComponentNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Corner-related properties ### `cornerSmooth` - Type: `number` 控制角的平滑程度，值域为 `[0, 1]`。 ### `cornerRadius` - Type: `number | PluginAPI['mixed']` 圆角。 ::: tip 当数值与[mg.mixed](/apis/mastergo.html#mixed)相等代表该layer的每个角的`radius`属性不相同，需要通过其他api去获取和设置(如`topLeftRadius`等)，如果通过`cornerRadius`设置则会统一修改所有角的`radius`属性。 ::: ### `topLeftRadius` - Type: `number` 左上角的角度。必须是非负数，可以是小数。 ### `topRightRadius` - Type: `number` 右上角的角度。必须是非负数，可以是小数。 ### `bottomLeftRadius` - Type: `number` 左下角的角度。必须是非负数，可以是小数。 ### `bottomRightRadius` - Type: `number` 右下角的角度。必须是非负数，可以是小数。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 图层节点的最大高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minHeight` - Type: `number` 图层节点的最小高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constraints` - Type: [`Constraints`](/types/constraints) 图层约束。 :::tip 该属性仅适用于采用**非自动布局**的容器的子节点。 ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 ### `overflowDirection` - Type: [`readonly OverflowDirection`](/types/overflowDirection) 获取该节点溢出行为。 ## Variant-related properties ### `variantProperties` - Readonly: `true` - Type: `Array | undefined` 读取该组件的可变属性，即组件状态。当组件集不存在时，可变属性为undefined。 ### `setVariantPropertyValues` - Type: `setVariantPropertyValues({ [propertyName: string]: string }): void` 修改组件的可变属性，即组件状态。此方法可同时传入多个属性。当组件集不存在时调用此函数，会先创建组件集，随后添加传入的参数为组件属性值。 ```ts component.setVariantPropertyValues({'属性 1': 'value1', '属性 2': 'value2'}) ``` 当组件集不存在时，调用此方法，调用前： ![](/setVariantPropertyValues1.png) 调用后 ![](/setVariantPropertyValues2.png) 当组件集存在，组件集中含有属性 `属性 1` ，但不含有 `属性 2` 时调用此方法，调用前： ![](/setVariantPropertyValues3.png) 调用后 ![](/setVariantPropertyValues2.png) ## Component properties-related properties ### `componentPropertyValues` - Readonly: `true` - Type: [ComponentPropertyValues](/types/componentPropertiesRelated) 此组件上存在的所有组件属性及其默认值。`VARIANT`属性还将包含所有变体选项的列表。`BOOLEAN`、`TEXT`和`INSTANCE_SWAP`属性具有唯一的`id`。该`id`应用于所有与组件属性相关的 API 方法和属性。 :::tip 组件集子组件无法使用组件属性相关api，需要在组件集上去定义和使用。 ::: ### `addComponentProperty` - ​Type: `addComponentProperty:(propertyName: string, type: Exclude, defaultValue: string | boolean, options?: ComponentPropertyOptions): string`, [AddComponentProperty](/types/componentPropertiesRelated#componentpropertiesmixin) 向此节点添加新的组件属性，并返回属性`id`。此函数支持类型为`BOOLEAN`、`TEXT`、`INSTANCE_SWAP`属性。 ### `editComponentProperty` - Type: `editComponentProperty(propertyId: string, newValue: { name?: string, defaultValue?: string, preferredValues?: InstanceSwapPreferredValue[]}): string`, [EditVariantPropertyValues](/types/componentPropertiesRelated#componentpropertiesmixin) 修改此节点上现有组件属性的名称、默认值或首选值，并返回属性`id`。 此函数支持类型为`BOOLEAN`、`TEXT`、`INSTANCE_SWAP`属性。 `preferredValues` 仅支持`INSTANCE_SWAP`属性。 :::tip 组件修改组件属性不会生成新的`propertyId`。 ::: ### `deleteComponentProperty` - Type: `deleteComponentProperty(propertyId: string): void`, [DeleteComponentProperty](/types/componentPropertiesRelated#componentpropertiesmixin) 删除此节点上的组件属性。 此函数支持类型为`BOOLEAN`、`TEXT`或`INSTANCE_SWAP`的属性。 --- # ComponentSetNode > 分类: apis | URL: https://developers.mastergo.com/apis/componentSetNode # ComponentSetNode `ComponentSetNode` 组件集图层节点，即可变组件的集合。 ## Base node properties ### `type` - Readonly: `true` - Type: `'COMPONENT_SET'` 节点类型，对于 `ComponentSetNode` 节点来说，其值为字符串 `'COMPONENT_SET'`。 ### `clone` - Type: `clone(): ComponentSetNode` 复制该组件集节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。该节点内包含的组件节点仍为组件节点。 ### `id` - Readonly: `true` - Type: `string` `ComponentSetNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置**组件集**的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ## Publishable properties ### `description` - Type: `string` 组件集的描述信息。 ### ukey - Readonly: `true` - Type: `string` 组件集唯一的key。 ### isExternal - Readonly: `true` - Type: `boolean` 是否是团队库组件集。 ### publishStatus - Readonly: `true` - Type: [`PublishStatus`](/types/teamLibrary##publishStatus) 当前组件集的团队库发布状态。 ### `documentationLinks` - Type: Array 此组件的文档链接。 :::tip 该API目前仅支持设置单个文档链接。要清除文档链接，请设置为空列表 []。 ::: ```ts node.documentationLinks = [{ uri: "https://mastergo.com" }] // clear documentation links node.documentationLinks = [] ``` ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前 `ComponentSetNode` 节点的直接子节点。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 从当前 `ComponentSetNode` 节点开始查找整个子树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。 ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 从当前 `ComponentSetNode` 节点开始查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。 ### `findChildren` - Type: `findChildren(callback?: (node: SceneNode) => boolean): ReadonlyArray` 与 `findAll` 类似，不同之处在于，`findChildren` 仅会在当前 `ComponentSetNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findChild` - Type: `findChild(callback: (node: SceneNode) => boolean): SceneNode | null` 与 `findOne` 类似，不同之处在于，`findChild` 仅会在当前 `ComponentSetNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找当前节点的所有子节点，返回所有类型符合的节点。 ```js const nodes = node.findAllWithCriteria({types: ['FRAME', 'COMPONENT']}) ``` ## Frame-related properties ### `clipsContent` - Type: `boolean` 容器是否对超出的内容进行裁剪，即超出容器的图层是否可见。 ### `layoutGrids` - Type: [`ReadonlyArray`](/types/layoutGrid) 布局网格。 :::tip 布局网格只有在非自动布局时设置才会生效。 ::: ### `gridStyleId` - Type: string 布局网格样式Id。 ### `flexMode` - Type: `'NONE' | 'HORIZONTAL' | 'VERTICAL'` 表示该 组件集 是否采用自动布局： - `'NONE'`: 没有采用自动布局。 - `'HORIZONTAL'`: 自动布局，水平方向。 - `'VERTICAL'`: 自动布局，垂直方向。 可以通过修改 `node.flexMode` 属性来改变 组件集 图层的布局方式： ```ts const node = document.children[0].children[0] node.flexMode = 'HORIZONTAL' // 水平方向自动布局 node.flexMode = 'NONE' // 移除自动布局 ``` 改变 `flexMode` 属性会导致图层的子节点的位置发生改变，同时也可能使得图层本身的尺寸发生改变。 ### `flexWrap` - Type: `'NO_WRAP' | 'WRAP'` 此属性只能在 `flexMode === “HORIZONTAL”` 的图层上设置。在没有此属性的图层上设置它将引发错误。 此属性必须设置为`'WRAP'`，才能使 `crossAxisSpacing` 和 `crossAxisAlignContent` 属性生效。 ### `itemSpacing` - Type: `number` 仅适用于采用自动布局的图层节点。代表该节点的子节点间的间距。 ### `crossAxisSpacing` - Type: `number` | `null` 仅适用于 `flexWrap` 设置为 `WRAP` 的自动布局图层。表达换行的行之间的距离。该值必须为正数。 :::tip 将此属性设置为 `null` 以使其与 `itemSpacing` 同步。但`crossAxisSpacing`不会返回为`null`。设置为 `null` 后，它会返回 `itemSpacing` 的值。 ::: ### `mainAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER' | 'SPACING_BETWEEN'` 仅适用于采用自动布局的图层节点。用于决定自动布局容器的子节点在主轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - `'SPACING_BETWEEN'` 会使得子节点在主轴方向上均匀的排列，并且仅在子节点之间放置空白。 ### `crossAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER'` 仅适用于采用自动布局的图层节点。用于决定自动布局容器的子节点在交叉轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 ### `mainAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的图层节点。代表当前容器主轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的主轴长度。直接设置主轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的图层节点。代表当前容器交叉轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的交叉轴长度。直接设置交叉轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisAlignContent` - Type: `'AUTO' | 'SPACE_BETWEEN'` 仅适用于自动布局模式为为"WRAP"的自动布局图层。确定不同的行在自动布局图层内的分布方式。 :::tip 在非换行自动布局图层上更改此属性将报错。 * `AUTO`：如果此自动布局帧的所有子帧的 layoutAlign 都设置为“STRETCH”，则轨道将拉伸以填充自动布局帧。这就像 `flexbox align-content： stretch`。否则，每个路径将与路径的最高子路径一样高，并将根据 `crossAxisAlignItem` 的值对齐。这就像 `flexbox align-content： start | center | end` 。 `crossAxisAlignContent` 设置为`AUTO`时，将遵循 `crossAxisSpacing`。 * `SPACE_BETWEEN`：路径的所有大小都基于路径中最高的子图层。自动布局容器内的可用空间在每个路径之间平均分配。如果所有路径的总高度都高于自动布局容器的高度，则间距将为 0。 ::: ### `itemReverseZIndex` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定此容器中图层的画布堆叠顺序。当为`true`时，则第一层将在顶部绘制。 ### `strokesIncludedInLayout` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定描边是否包含在布局计算中。当为`true`时，自动布局容器的行为类似于 `css box-sizing:border-box`。 ### `paddingTop` - Type: `number` 仅适用于采用自动布局的图层节点。组件集容器的上内边距。 ### `paddingRight` - Type: `number` 仅适用于采用自动布局的图层节点。组件集容器的右内边距。 ### `paddingBottom` - Type: `number` 仅适用于采用自动布局的图层节点。组件集容器的下内边距。 ### `paddingLeft` - Type: `number` 仅适用于采用自动布局的图层节点。组件集容器的左内边距。 ### `resizeToFit` - Type: `resizeToFit(): void` 适应内容大小。 ## Container-related properties ### `expanded` - Type: `boolean` 此容器是否在图层面板中显示为展开。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 - `'SOLID'`: 实线。 - `'DASH'`: 虚线。 - `'CUSTOM'`: 自定义。 ### `strokeWeight` - Type: `number` 四个方向描边的粗细，以像素为单位。必须是非负数，可以是小数。需要注意，若设置了单边描边如`strokeTopWeight`，则以单边描边为准；若设置了`strokeWeight`，会同时设置了四个方向的单边描边。 ### `strokeTopWeight` - Type: `number` 顶侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeTopWeight`或`strokeWeight`更改。 ### `strokeLeftWeight` - Type: `number` 左侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeLeftWeight`或`strokeWeight`更改。 ### `strokeBottomWeight` - Type: `number` 底侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeBottomWeight`或`strokeWeight`更改。 ### `strokeRightWeight` - Type: `number` 右侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeRightWeight`或`strokeWeight`更改。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => ComponentSetNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `ComponentSetNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Corner-related properties ### `cornerSmooth` - Type: `number` 控制角的平滑程度，值域为 `[0, 1]`。 ### `cornerRadius` - Type: `number | PluginAPI['mixed']` 圆角。 ::: tip 当数值与[mg.mixed](/apis/mastergo.html#mixed)相等代表该layer的每个角的`radius`属性不相同，需要通过其他api去获取和设置(如`topLeftRadius`等)，如果通过`cornerRadius`设置则会统一修改所有角的`radius`属性。 ::: ### `topLeftRadius` - Type: `number` 左上角的角度。必须是非负数，可以是小数。 ### `topRightRadius` - Type: `number` 右上角的角度。必须是非负数，可以是小数。 ### `bottomLeftRadius` - Type: `number` 左下角的角度。必须是非负数，可以是小数。 ### `bottomRightRadius` - Type: `number` 右下角的角度。必须是非负数，可以是小数。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 图层节点的最大高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minHeight` - Type: `number` 图层节点的最小高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constraints` - Type: [`Constraints`](/types/constraints) 图层约束。 :::tip 该属性仅适用于采用**非自动布局**的容器的子节点。 ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 ### `overflowDirection` - Type: [`readonly OverflowDirection`](/types/overflowDirection) 获取该节点溢出行为。 ## Variant-related properties 读取该组件集内的所有的可变属性。 ### `createVariantComponent` - Type: `createVariantComponent(): void` 在组件集内创建可变组件。 ### `createVariantProperties` - Type: `createVariantProperties(values: Array): void` 添加可变属性的属性名。 ```ts componentSet.createVariantProperties(['属性 2', '属性 3']); ``` ### `editVariantProperties` - Type: `editVariantProperties({ [propertyName: string]: string }): void` 修改可变属性的属性名。 ```ts componentSet.editVariantProperties({'属性 1': '尺寸', '属性 2': '状态'}); ``` ### `editVariantPropertyValues` - Type: `editVariantPropertyValues({ [propertyName: string]: { oldValue: string, newValue: string } }): void` 修改可变属性的属性值。 ```ts componentSet.editVariantPropertyValues({'尺寸': {oldValue: '默认', newValue: 'xxs'}, '状态': {oldValue: '默认', newValue: 'hover'}}); ``` ### `editVariantPropertiesAlias` - Type: `editVariantPropertiesAlias({ [propertyName: string]: string }): void` 修改可变属性的属性名的别名。 ```ts componentSet.editVariantPropertiesAlias({'属性 1': 'alias 1'}); ``` ### `editVariantPropertyValuesAlias` - Type: `editVariantPropertyValuesAlias({ [propertyName: string]: { name: string, alias: string } }): void` 修改可变属性的属性值的别名。 ```ts componentSet.editVariantPropertyValuesAlias({'属性 1': { name: '默认', alias: 'default'}}); ``` ### `deleteVariantProperty` - Type: `deleteVariantProperty(propertyName: string): void` 删除可变属性，当只有一个可变属性的时候则无法删除。 ```ts componentSet.deleteVariantProperty('尺寸'); ``` ## Component properties-related properties ### `componentPropertyValues` - Readonly: `true` - Type: [ComponentPropertyValues](/types/componentPropertiesRelated) 此组件集上存在的所有组件属性及其默认值。`VARIANT`属性还将包含所有变体选项的列表。`BOOLEAN`、`TEXT`和`INSTANCE_SWAP`属性具有唯一的`id`。该`id`应用于所有与组件属性相关的 API 方法和属性。 ### `addComponentProperty` - ​Type: `addComponentProperty:(propertyName: string, type: Exclude, defaultValue: string | boolean, options?: ComponentPropertyOptions): string`, [AddComponentProperty](/types/componentPropertiesRelated.html#componentpropertiesmixin) 向此节点添加新的组件属性，并返回属性`id`。此函数支持类型为`BOOLEAN`、`TEXT`、`INSTANCE_SWAP`属性。 ### `editComponentProperty` - Type: `editComponentProperty(propertyId: string, newValue: { name?: string, defaultValue?: string, preferredValues?: InstanceSwapPreferredValue[]}): string`, [EditVariantPropertyValues](/types/componentPropertiesRelated.html#componentpropertiesmixin) 修改此节点上现有组件属性的名称、默认值或首选值，并返回属性`id`。 此函数支持类型为`BOOLEAN`、`TEXT`、`INSTANCE_SWAP`属性。 `preferredValues` 仅支持`INSTANCE_SWAP`属性。 ### `deleteComponentProperty` - Type: `deleteComponentProperty(propertyId: string): void`, [DeleteComponentProperty](/types/componentPropertiesRelated.html#componentpropertiesmixin) 删除此节点上的组件属性。 此函数支持类型为`BOOLEAN`、`TEXT`或`INSTANCE_SWAP`的属性。 --- # ConnectorNode > 分类: apis | URL: https://developers.mastergo.com/apis/connectorNode # ConnectorNode `ConnectorNode`是连接线节点，用于连接图层。 ## Base node properties ### `type` - Readonly: `true` - Type: `'CONNECTOR'` 节点类型，对于 `ConnectorNode` 节点来说，其值为字符串 `'CONNECTOR'`。 ### `clone` - Type: `clone(): ConnectorNode` 复制该连接线节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。 ### `id` - Readonly: `true` - Type: `string` `ConnectorNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置节点的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ## ConnectorProperties ### `text` - Readonly: `true` - Type: [`TextSublayerNode`](/apis/textSublayerNode.html) 连接线节点的文字子节点。 ### `createText` - Type: `createText():`[`TextSublayerNode`](/apis/textSublayerNode.html) 为当前连接线创建文字子节点，如果已存在则返回该文字子节点。 ### `cornerRadius` - Type: `number` 连接线拐点的圆角度数。 ### `connectorStart` - Type: [ConnectorEndpoint](/types/connectorEndpoint.html) 连接线起始端点。 ### `connectorEnd` - Type: [ConnectorEndpoint](/types/connectorEndpoint.html) 连接线末尾端点。 ### `connectorStartStrokeCap` - Type: [StrokeCap](/types/penNetwork.html#strokecap) 连接线起始端点样式。 ### `connectorEndStrokeCap` - Type: [StrokeCap](/types/penNetwork.html#strokecap) 连接线末尾端点样式。 ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Geometry-related properties ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 - `'SOLID'`: 实线。 - `'DASH'`: 虚线。 - `'CUSTOM'`: 自定义。 ### `strokeWeight` - Type: `number` 四个方向描边的粗细，以像素为单位。必须是非负数，可以是小数。需要注意，若设置了单边描边如`strokeTopWeight`，则以单边描边为准；若设置了`strokeWeight`，会同时设置了四个方向的单边描边。 ### `strokeAlign` - Type: `'CENTER'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ## Layout-related properties ### `absoluteTransform` - Readonly: `true` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Readonly: `true` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的端点样式、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `width` - Readonly: `true` - Type: `number` 图层节点的宽度。 ### `height` - Readonly: `true` - Type: `number` 图层节点的高度。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 --- # DocumentNode > 分类: apis | URL: https://developers.mastergo.com/apis/documentNode # DocumentNode `DocumentNode` 是整个 MasterGo 文件的根节点，它对应整个 MasterGo 文件，不存在真实的图层与之对应。所有页面节点和图层节点都需要通过 `DocumentNode` 根节点来访问。该节点的所有直接子节点一定是页面节点（即 `PageNode`）。可以通过 `mg.document` 来访问根节点： ```js const root = mg.document // DocumentNode const pages = root.children // PageNode[] ``` ## Base node properties ### `id` - Readonly: `true` - Type: `number` 当前文档的 ID。 ### `type` - Readonly: `true` - Type: `'DOCUMENT'` 代表该节点的类型。 ### `name` - Readonly: `true` - Type: `string` 当前文件的名称。 ### `currentPage` - Type: `PageNode` 获取当前页面节点。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前节点的子节点。对于 `DocumentNode` 来说，它的所有子节点都是页面节点，即 `PageNode`。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 查找整个节点树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。例如，查找所有矩形节点： ```js const rectNodes = mg.document.findAll((node) => node.type === 'RECTANGLE') ``` 需要注意的是，对于 `DocumentNode` 来说，其 `findAll` 方法将不会查找页面节点。因为你总是可以用更快速的办法访问或查找特定的页面节点，例如： ```js mg.document.children // 所有页面节点 mg.document.children.filter(cb) // 过滤出特定的页面节点 ``` ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。例如，查找第一个遇到的矩形节点： ```js const rectNode = mg.document.findOne((node) => node.type === 'RECTANGLE') ``` ::: warning 需要注意，与 `findAll` 方法一样，`findOne` 方法也不会对页面节点进行查找。 ::: ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找整个节点树，返回所有类型符合的节点。 ```js const nodes = mg.document.findAllWithCriteria({types: ['FRAME', 'COMPONENT']}) ``` --- # EllipseNode > 分类: apis | URL: https://developers.mastergo.com/apis/ellipseNode # EllipseNode `EllipseNode` 是椭圆图层节点。圆形即是满足条件 `width === height` 的椭圆。 ## Base node properties ### `type` - Readonly: `true` - Type: `'ELLIPSE'` 节点类型，对于 `EllipseNode` 节点来说，其值为字符串 `'ELLIPSE'`。 ### `clone` - Type: `clone(): EllipseNode` 复制该椭圆节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。 ### `id` - Readonly: `true` - Type: `string` `EllipseNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置节点的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ### `arcData` - Type: [`ArcData`](/types/arcData) 读取或设置椭圆弧度属性。弧度属性与画布面板的弧度属性对应且有一定转换关系，具体可查看[ArcData](/types/arcData)。 ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 - `'SOLID'`: 实线。 - `'DASH'`: 虚线。 - `'CUSTOM'`: 自定义。 ### `strokeWeight` - Type: `number` 描边的粗细，以像素为单位。必须是非负数，可以是小数。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => EllipseNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `EllipseNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 图层节点的最大高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minHeight` - Type: `number` 图层节点的最小高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constraints` - Type: [`Constraints`](/types/constraints) 图层约束。 :::tip 该属性仅适用于采用**非自动布局**的容器的子节点。 ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 --- # FrameNode > 分类: apis | URL: https://developers.mastergo.com/apis/frameNode # FrameNode `FrameNode` 即容器节点，用于定义布局的层级结构。容器节点（`FrameNode`）不同于组节点（`GroupNode`），容器节点更类似于图层的”目录“或”文件夹“。另外，容器通常拥有其自身的尺寸，尽管在自动布局的容器中该尺寸由其子节点决定。 ::: warning 设计师可以通过设计工具在容器节点与组节点之间进行相互转换。因此，如果你的插件持续运行，那么你最好不要假设一个节点的类型会一直是容器节点或组节点。 ::: ## Base node properties ### `type` - Readonly: `true` - Type: `'FRAME'` 节点类型，对于 `FrameNode` 节点来说，其值为字符串 `'FRAME'`。 ### `clone` - Type: `clone(): FrameNode` 复制该容器节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。该容器节点内包含的组件节点将被克隆为以该组件节点作为主组件的实例节点。 ### `id` - Readonly: `true` - Type: `string` `FrameNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置**容器**的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前 `FrameNode` 节点的直接子节点。 ### `appendChild` - Type: `appendChild(child: SceneNode): void` 将给定的节点 `child` 添加为当前 `FrameNode` 节点的直接子节点。 ### `insertChild` - Type: `insertChild(index: number, child: SceneNode): void` 在指定的位置 `index` 处插入子节点 `child`。假设一个组有三个子节点 A、B、C，现在调用 `insertChild` 方法将插入图层节点 D： - `insertChild(0, D)`，子节点顺序为：**`D`**、A、B、C。 - `insertChild(1, D)`，子节点顺序为：A、**`D`**、B、C。 - `insertChild(2, D)`，子节点顺序为：A、B、**`D`**、C。 - `insertChild(3, D)`，子节点顺序为：A、B、C、**`D`**。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 从当前 `FrameNode` 节点开始查找整个子树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。 ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 从当前 `FrameNode` 节点开始查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。 ### `findChildren` - Type: `findChildren(callback?: (node: SceneNode) => boolean): ReadonlyArray` 与 `findAll` 类似，不同之处在于，`findChildren` 仅会在当前 `FrameNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findChild` - Type: `findChild(callback: (node: SceneNode) => boolean): SceneNode | null` 与 `findOne` 类似，不同之处在于，`findChild` 仅会在当前 `FrameNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找当前节点的所有子节点，返回所有类型符合的节点。 ```js const nodes = node.findAllWithCriteria({types: ['FRAME', 'COMPONENT']}) ``` ## Frame-related properties ### `clipsContent` - Type: `boolean` 容器是否对超出的内容进行裁剪，即超出容器的图层是否可见。 ### `layoutGrids` - Type: [`ReadonlyArray`](/types/layoutGrid) 布局网格。 :::tip 布局网格只有在非自动布局时设置才会生效。 ::: ### `gridStyleId` - Type: string 布局网格样式Id。 ### `flexMode` - Type: `'NONE' | 'HORIZONTAL' | 'VERTICAL'` 表示该 Frame 是否采用自动布局： - `'NONE'`: 没有采用自动布局。 - `'HORIZONTAL'`: 自动布局，水平方向。 - `'VERTICAL'`: 自动布局，垂直方向。 可以通过修改 `node.flexMode` 属性来改变 Frame 图层的布局方式： ```ts const frame = document.children[0].children[0] as FrameNode frame.flexMode = 'HORIZONTAL' // 水平方向自动布局 frame.flexMode = 'NONE' // 移除自动布局 ``` 改变 `flexMode` 属性会导致 Frame 图层的子节点的位置发生改变，同时也可能使得 Frame 图层本身的尺寸发生改变。 ### `flexWrap` - Type: `'NO_WRAP' | 'WRAP'` 此属性只能在 `flexMode === “HORIZONTAL”` 的图层上设置。在没有此属性的图层上设置它将引发错误。 此属性必须设置为`'WRAP'`，才能使 `crossAxisSpacing` 和 `crossAxisAlignContent` 属性生效。 ### `itemSpacing` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。代表该 Frame 节点的子节点间的间距。 ### `crossAxisSpacing` - Type: `number` | `null` 仅适用于 `flexWrap` 设置为 `WRAP` 的自动布局图层。表达换行的行之间的距离。该值必须为正数。 :::tip 将此属性设置为 `null` 以使其与 `itemSpacing` 同步。但`crossAxisSpacing`不会返回为`null`。设置为 `null` 后，它会返回 `itemSpacing` 的值。 ::: ### `mainAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER' | 'SPACING_BETWEEN'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在主轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - `'SPACING_BETWEEN'` 会使得子节点在主轴方向上均匀的排列，并且仅在子节点之间放置空白。 ### `crossAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在交叉轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 ### `mainAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器主轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的主轴长度。直接设置主轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器交叉轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的交叉轴长度。直接设置交叉轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisAlignContent` - Type: `'AUTO' | 'SPACE_BETWEEN'` 仅适用于自动布局模式为为"WRAP"的自动布局图层。确定不同的行在自动布局图层内的分布方式。 :::tip 在非换行自动布局图层上更改此属性将报错。 * `AUTO`：如果此自动布局帧的所有子帧的 layoutAlign 都设置为“STRETCH”，则轨道将拉伸以填充自动布局帧。这就像 `flexbox align-content： stretch`。否则，每个路径将与路径的最高子路径一样高，并将根据 `crossAxisAlignItem` 的值对齐。这就像 `flexbox align-content： start | center | end` 。 `crossAxisAlignContent` 设置为`AUTO`时，将遵循 `crossAxisSpacing`。 * `SPACE_BETWEEN`：路径的所有大小都基于路径中最高的子图层。自动布局容器内的可用空间在每个路径之间平均分配。如果所有路径的总高度都高于自动布局容器的高度，则间距将为 0。 ::: ### `itemReverseZIndex` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定此容器中图层的画布堆叠顺序。当为`true`时，则第一层将在顶部绘制。 ### `strokesIncludedInLayout` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定描边是否包含在布局计算中。当为`true`时，自动布局容器的行为类似于 `css box-sizing:border-box`。 ### `paddingTop` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的上内边距。 ### `paddingRight` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的右内边距。 ### `paddingBottom` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的下内边距。 ### `paddingLeft` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的左内边距。 ### `resizeToFit` - Type: `resizeToFit(): void` 适应内容大小。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 - `'SOLID'`: 实线。 - `'DASH'`: 虚线。 - `'CUSTOM'`: 自定义。 ### `strokeWeight` - Type: `number` 四个方向描边的粗细，以像素为单位。必须是非负数，可以是小数。需要注意，若设置了单边描边如`strokeTopWeight`，则以单边描边为准；若设置了`strokeWeight`，会同时设置了四个方向的单边描边。 ### `strokeTopWeight` - Type: `number` 顶侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeTopWeight`或`strokeWeight`更改。 ### `strokeLeftWeight` - Type: `number` 左侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeLeftWeight`或`strokeWeight`更改。 ### `strokeBottomWeight` - Type: `number` 底侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeBottomWeight`或`strokeWeight`更改。 ### `strokeRightWeight` - Type: `number` 右侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeRightWeight`或`strokeWeight`更改。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => FrameNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `FrameNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Corner-related properties ### `cornerSmooth` - Type: `number` 控制角的平滑程度，值域为 `[0, 1]`。 ### `cornerRadius` - Type: `number | PluginAPI['mixed']` 圆角。 ::: tip 当数值与[mg.mixed](/apis/mastergo.html#mixed)相等代表该layer的每个角的`radius`属性不相同，需要通过其他api去获取和设置(如`topLeftRadius`等)，如果通过`cornerRadius`设置则会统一修改所有角的`radius`属性。 ::: ### `topLeftRadius` - Type: `number` 左上角的角度。必须是非负数，可以是小数。 ### `topRightRadius` - Type: `number` 右上角的角度。必须是非负数，可以是小数。 ### `bottomLeftRadius` - Type: `number` 左下角的角度。必须是非负数，可以是小数。 ### `bottomRightRadius` - Type: `number` 右下角的角度。必须是非负数，可以是小数。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 图层节点的最大高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minHeight` - Type: `number` 图层节点的最小高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constraints` - Type: [`Constraints`](/types/constraints) 图层约束。 :::tip 该属性仅适用于采用**非自动布局**的容器的子节点。 ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 ### `overflowDirection` - Type: [`readonly OverflowDirection`](/types/overflowDirection) 获取该节点溢出行为。 --- # GroupNode > 分类: apis | URL: https://developers.mastergo.com/apis/groupNode # GroupNode `GroupNode` 代表一个或者多个图层的编组, 当改变`GroupNode`的圆角、描边、填充等属性时，会作用在编组内所有的图层身上。 ## Base node properties ### `type` - Readonly: `true` - Type: `'GROUP'` 节点类型，对于 `GroupNode` 节点来说，其值为字符串 `'GROUP'`。 ### `clone` - Type: `clone(): GroupNode` 复制该组节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。该组节点内包含的组件节点将被克隆为以该组件节点作为主组件的实例节点。 ### `id` - Readonly: `true` - Type: `string` `GroupNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置**组**的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前 `GroupNode` 节点的直接子节点。 ### `appendChild` - Type: `appendChild(child: SceneNode): void` 将给定的节点 `child` 添加为当前 `GroupNode` 节点的直接子节点。 ### `insertChild` - Type: `insertChild(index: number, child: SceneNode): void` 在指定的位置 `index` 处插入子节点 `child`。假设一个组有三个子节点 A、B、C，现在调用 `insertChild` 方法将插入图层节点 D： - `insertChild(0, D)`，子节点顺序为：**`D`**、A、B、C。 - `insertChild(1, D)`，子节点顺序为：A、**`D`**、B、C。 - `insertChild(2, D)`，子节点顺序为：A、B、**`D`**、C。 - `insertChild(3, D)`，子节点顺序为：A、B、C、**`D`**。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 从当前 `GroupNode` 节点开始查找整个子树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。 ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 从当前 `GroupNode` 节点开始查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。 ### `findChildren` - Type: `findChildren(callback?: (node: SceneNode) => boolean): ReadonlyArray` 与 `findAll` 类似，不同之处在于，`findChildren` 仅会在当前 `GroupNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findChild` - Type: `findChild(callback: (node: SceneNode) => boolean): SceneNode | null` 与 `findOne` 类似，不同之处在于，`findChild` 仅会在当前 `GroupNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找当前节点的所有子节点，返回所有类型符合的节点。 ```js const nodes = node.findAllWithCriteria({types: ['FRAME', 'COMPONENT']}) ``` ## Frame-related properties ### `flexMode` - Type: `'NONE' | 'HORIZONTAL' | 'VERTICAL'` 表示该 Frame 是否采用自动布局： - `'NONE'`: 没有采用自动布局。 - `'HORIZONTAL'`: 自动布局，水平方向。 - `'VERTICAL'`: 自动布局，垂直方向。 可以通过修改 `node.flexMode` 属性来改变 Frame 图层的布局方式： ```ts const frame = document.children[0].children[0] as FrameNode frame.flexMode = 'HORIZONTAL' // 水平方向自动布局 frame.flexMode = 'NONE' // 移除自动布局 ``` 改变 `flexMode` 属性会导致 Frame 图层的子节点的位置发生改变，同时也可能使得 Frame 图层本身的尺寸发生改变。 ### `flexWrap` - Type: `'NO_WRAP' | 'WRAP'` 此属性只能在 `flexMode === “HORIZONTAL”` 的图层上设置。在没有此属性的图层上设置它将引发错误。 此属性必须设置为`'WRAP'`，才能使 `crossAxisSpacing` 和 `crossAxisAlignContent` 属性生效。 ### `itemSpacing` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。代表该 Frame 节点的子节点间的间距。 ### `crossAxisSpacing` - Type: `number` | `null` 仅适用于 `flexWrap` 设置为 `WRAP` 的自动布局图层。表达换行的行之间的距离。该值必须为正数。 :::tip 将此属性设置为 `null` 以使其与 `itemSpacing` 同步。但`crossAxisSpacing`不会返回为`null`。设置为 `null` 后，它会返回 `itemSpacing` 的值。 ::: ### `mainAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER' | 'SPACING_BETWEEN'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在主轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - `'SPACING_BETWEEN'` 会使得子节点在主轴方向上均匀的排列，并且仅在子节点之间放置空白。 ### `crossAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在交叉轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 ### `mainAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器主轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的主轴长度。直接设置主轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisAlignContent` - Type: `'AUTO' | 'SPACE_BETWEEN'` 仅适用于自动布局模式为为"WRAP"的自动布局图层。确定不同的行在自动布局图层内的分布方式。 :::tip 在非换行自动布局图层上更改此属性将报错。 * `AUTO`：如果此自动布局帧的所有子帧的 layoutAlign 都设置为“STRETCH”，则轨道将拉伸以填充自动布局帧。这就像 `flexbox align-content： stretch`。否则，每个路径将与路径的最高子路径一样高，并将根据 `crossAxisAlignItem` 的值对齐。这就像 `flexbox align-content： start | center | end` 。 `crossAxisAlignContent` 设置为`AUTO`时，将遵循 `crossAxisSpacing`。 * `SPACE_BETWEEN`：路径的所有大小都基于路径中最高的子图层。自动布局容器内的可用空间在每个路径之间平均分配。如果所有路径的总高度都高于自动布局容器的高度，则间距将为 0。 ::: ### `itemReverseZIndex` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定此容器中图层的画布堆叠顺序。当为`true`时，则第一层将在顶部绘制。 ### `strokesIncludedInLayout` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定描边是否包含在布局计算中。当为`true`时，自动布局容器的行为类似于 `css box-sizing:border-box`。 ### `crossAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器交叉轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的交叉轴长度。直接设置交叉轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `paddingTop` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的上内边距。 ### `paddingRight` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的右内边距。 ### `paddingBottom` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的下内边距。 ### `paddingLeft` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的左内边距。 ## Container-related properties ### `expanded` - Type: `boolean` 此容器是否在图层面板中显示为展开。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 - `'SOLID'`: 实线。 - `'DASH'`: 虚线。 - `'CUSTOM'`: 自定义。 ### `strokeWeight` - Type: `number` 四个方向描边的粗细，以像素为单位。必须是非负数，可以是小数。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => GroupNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `GroupNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Corner-related properties ### `cornerSmooth` - Type: `number` 控制角的平滑程度，值域为 `[0, 1]`。 ### `cornerRadius` - Type: `number | PluginAPI['mixed']` 圆角。 ::: tip 当数值与[mg.mixed](/apis/mastergo.html#mixed)相等代表该layer的每个角的`radius`属性不相同，需要通过其他api去获取和设置(如`topLeftRadius`等)，如果通过`cornerRadius`设置则会统一修改所有角的`radius`属性。 ::: ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 图层节点的最大高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minHeight` - Type: `number` 图层节点的最小高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 --- # API Reference > 分类: apis | URL: https://developers.mastergo.com/apis/ # API Reference `MasterGo` 的插件代码运行在受限的沙盒中，你无法在插件代码中访问浏览器 API。但我们仍然为你暴露了一些非常有用且常用的全局 API。 ## [mg](./mastergo) 大部分插件 API 都需要通过全局变量 `mg` 来访问，包括对节点的增删改查等操作。例如： ```js mg.createRectangle mg.clientStorage ``` ## `setTimeout` - Type: `function setTimeout(callback: Function, timeout: number): number` 设置一个定时器，当到期时执行指定的回调函数。参考：https://developer.mozilla.org/en-US/docs/Web/API/setTimeout。 ## `setInterval` - Type: `function setInterval(callback: Function, timeout: number): number` 设置一个定时器，会在指定的时间间隔内重复地调用回调函数。参考：https://developer.mozilla.org/en-US/docs/Web/API/setInterval。 ## `clearTimeout` - Type: `function clearTimeout(timeoutID: number): void` 清除由 `setTimeout` 函数创建的定时器。参考：https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout。 ## `clearInterval` - Type: `function clearInterval(timeoutID: number): void` 清除由 `setInterval` 函数创建的定时器。参考：https://developer.mozilla.org/en-US/docs/Web/API/clearInterval。 ## `requestAnimationFrame` - Type: `function requestAnimationFrame(cb: (ts: number) => void): number` 请求动画帧。参考：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame。 ## `cancelAnimationFrame` - Type: `function cancelAnimationFrame(requestID: number): void` 清除/取消由 `requestAnimationFrame` 请求的动画帧。参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame。 ## `console` - Type: ```ts interface Console { log(message?: any, ...optionalParams: any[]): void error(message?: any, ...optionalParams: any[]): void assert(condition?: boolean, message?: string, ...data: any[]): void info(message?: any, ...optionalParams: any[]): void warn(message?: any, ...optionalParams: any[]): void clear(): void } ``` 参考：https://developer.mozilla.org/en-US/docs/Web/API/console。 --- # InstanceNode > 分类: apis | URL: https://developers.mastergo.com/apis/instanceNode # InstanceNode `InstanceNode` 代表组件的实例节点。 ## Base node properties ### `type` - Readonly: `true` - Type: `'INSTANCE'` 节点类型，对于 `InstanceNode` 节点来说，其值为字符串 `'INSTANCE'`。 ### `clone` - Type: `clone(): InstanceNode` 复制该实例节点，新的实例节点与原节点具有相同的主组件。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。 ### `id` - Readonly: `true` - Type: `string` `InstanceNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置**容器**的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ### `mainComponent` - Type: `ComponentNode | null` 该实例的主组件。 ### `swapComponent` - Type: `swapComponent(componentNode): void` 改变实例节点继承的主组件。 ### `detachInstance` - Type: `detachInstance() : FrameNode` 将给定实例与其组件分离。返回分离实例所产生的[FrameNode](/apis/frameNode.html)。对于嵌套实例（其他实例内的实例），还会分离作为实例的所有祖先节点。 ### `exposedInstances` - Readonly: `true` - Type: `InstanceNode[]` 已公开到此实例节点的所有嵌套实例。这些嵌套实例的组件属性将在此实例节点的顶层可见。 ### `isExposedInstance` - Type: `boolean` 表示此实例是否向包含自己的 `ComponentNode` 或 `ComponentSetNode` 公开自身的组件属性。仅在 `ComponentNode` 或 `ComponentSetNode` 中包含的主 `InstanceNode` 上可写，只在嵌套的 `InstanceNode` 上继承。 :::tip ``` ├── component │ ├── frame │ ├── instance1 │ │ ├── instance2 ├── instance3 ├── instance4 ``` - `instance1`为主实例，因为它是属于组件包含的嵌套的实例中的第一层实例 - `instance2`为非主实例 - `instance3`也是主实例，因为它也是嵌套实例中的第一层实例。 - `instance4`为非主实例, 因为它没有被嵌套，`isExposedInstance`为`false`。 ::: ### `resetOverrides` - Type: `resetOverrides(): void` 重置此实例上的所有直接变动。(子实例的变动不算在内) ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前 `InstanceNode` 节点的直接子节点。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 从当前 `InstanceNode` 节点开始查找整个子树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。 ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 从当前 `InstanceNode` 节点开始查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。 ### `findChildren` - Type: `findChildren(callback?: (node: SceneNode) => boolean): ReadonlyArray` 与 `findAll` 类似，不同之处在于，`findChildren` 仅会在当前 `InstanceNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findChild` - Type: `findChild(callback: (node: SceneNode) => boolean): SceneNode | null` 与 `findOne` 类似，不同之处在于，`findChild` 仅会在当前 `InstanceNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找当前节点的所有子节点，返回所有类型符合的节点。 ```js const nodes = node.findAllWithCriteria({types: ['FRAME', 'COMPONENT']}) ``` ## Frame-related properties ### `clipsContent` - Type: `boolean` 容器是否对超出的内容进行裁剪，即超出容器的图层是否可见。 ### `layoutGrids` - Type: [`ReadonlyArray`](/types/layoutGrid) 布局网格。 :::tip 布局网格只有在非自动布局时设置才会生效。 ::: ### `gridStyleId` - Type: string 布局网格样式Id。 ### `flexMode` - Type: `'NONE' | 'HORIZONTAL' | 'VERTICAL'` 表示该 Frame 是否采用自动布局： - `'NONE'`: 没有采用自动布局。 - `'HORIZONTAL'`: 自动布局，水平方向。 - `'VERTICAL'`: 自动布局，垂直方向。 可以通过修改 `node.flexMode` 属性来改变 Frame 图层的布局方式： ```ts const instance = document.children[0].children[0] as InstanceNode instance.flexMode = 'HORIZONTAL' // 水平方向自动布局 instance.flexMode = 'NONE' // 移除自动布局 ``` 改变 `flexMode` 属性会导致 Frame 图层的子节点的位置发生改变，同时也可能使得 Frame 图层本身的尺寸发生改变。 ### `flexWrap` - Type: `'NO_WRAP' | 'WRAP'` 此属性只能在 `flexMode === “HORIZONTAL”` 的图层上设置。在没有此属性的图层上设置它将引发错误。 此属性必须设置为`'WRAP'`，才能使 `crossAxisSpacing` 和 `crossAxisAlignContent` 属性生效。 ### `itemSpacing` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。代表该 Frame 节点的子节点间的间距。 ### `crossAxisSpacing` - Type: `number` | `null` 仅适用于 `flexWrap` 设置为 `WRAP` 的自动布局图层。表达换行的行之间的距离。该值必须为正数。 :::tip 将此属性设置为 `null` 以使其与 `itemSpacing` 同步。但`crossAxisSpacing`不会返回为`null`。设置为 `null` 后，它会返回 `itemSpacing` 的值。 ::: ### `mainAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER' | 'SPACING_BETWEEN'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在主轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - `'SPACING_BETWEEN'` 会使得子节点在主轴方向上均匀的排列，并且仅在子节点之间放置空白。 ### `crossAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER'` 仅适用于采用自动布局的 Frame 图层节点。用于决定自动布局容器的子节点在交叉轴上的对齐方式。改变该属性值可能会间接地更新其子节点的 `x` 属性值和 `y` 属性值。 - 当 `flexMode` 为 `'HORIZONTAL'`，即水平方向自动布局时。`'FLEX_START'` 相当于容器的上边，`'FLEX_END'` 相当于容器的下边。 - 当 `flexMode` 为 `'VERTICAL'`，即垂直方向自动布局时。`'FLEX_START'` 相当于容器的左边，`'FLEX_END'` 相当于容器的右边。 ### `mainAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器主轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的交叉轴长度。直接设置交叉轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的 Frame 图层节点。代表当前容器交叉轴方向上的长度： - `'FIXED'`: 固定长度，即由用户决定容器的交叉轴长度。直接设置交叉轴长度，也会改成`'FIXED'`。 - `'AUTO'`: 自动长度，即由自动布局引擎自动计算的长度。 ### `crossAxisAlignContent` - Type: `'AUTO' | 'SPACE_BETWEEN'` 仅适用于自动布局模式为为"WRAP"的自动布局图层。确定不同的行在自动布局图层内的分布方式。 :::tip 在非换行自动布局图层上更改此属性将报错。 * `AUTO`：如果此自动布局帧的所有子帧的 layoutAlign 都设置为“STRETCH”，则轨道将拉伸以填充自动布局帧。这就像 `flexbox align-content： stretch`。否则，每个路径将与路径的最高子路径一样高，并将根据 `crossAxisAlignItem` 的值对齐。这就像 `flexbox align-content： start | center | end` 。 `crossAxisAlignContent` 设置为`AUTO`时，将遵循 `crossAxisSpacing`。 * `SPACE_BETWEEN`：路径的所有大小都基于路径中最高的子图层。自动布局容器内的可用空间在每个路径之间平均分配。如果所有路径的总高度都高于自动布局容器的高度，则间距将为 0。 ::: ### `itemReverseZIndex` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定此容器中图层的画布堆叠顺序。当为`true`时，则第一层将在顶部绘制。 ### `strokesIncludedInLayout` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定描边是否包含在布局计算中。当为`true`时，自动布局容器的行为类似于 `css box-sizing:border-box`。 ### `paddingTop` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的上内边距。 ### `paddingRight` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的右内边距。 ### `paddingBottom` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的下内边距。 ### `paddingLeft` - Type: `number` 仅适用于采用自动布局的 Frame 图层节点。Frame 容器的左内边距。 ## Container-related properties ### `expanded` - Type: `boolean` 此容器是否在图层面板中显示为展开。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` ### `strokeWeight` - Type: `number` 四个方向描边的粗细，以像素为单位。必须是非负数，可以是小数。需要注意，若设置了单边描边如`strokeTopWeight`，则以单边描边为准；若设置了`strokeWeight`，会同时设置了四个方向的单边描边。 ### `strokeTopWeight` - Type: `number` 顶侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeTopWeight`或`strokeWeight`更改。 ### `strokeLeftWeight` - Type: `number` 左侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeLeftWeight`或`strokeWeight`更改。 ### `strokeBottomWeight` - Type: `number` 底侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeBottomWeight`或`strokeWeight`更改。 ### `strokeRightWeight` - Type: `number` 右侧单边描边的粗细，以像素为单位。有效值范围为[0， 1000]的整数或小数。可通过设置`strokeRightWeight`或`strokeWeight`更改。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => InstanceNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `InstanceNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Corner-related properties ### `cornerSmooth` - Type: `number` 控制角的平滑程度，值域为 `[0, 1]`。 ### `cornerRadius` - Type: `number | PluginAPI['mixed']` 圆角。 ::: tip 当数值与[mg.mixed](/apis/mastergo.html#mixed)相等代表该layer的每个角的`radius`属性不相同，需要通过其他api去获取和设置(如`topLeftRadius`等)，如果通过`cornerRadius`设置则会统一修改所有角的`radius`属性。 ::: ### `topLeftRadius` - Type: `number` 左上角的角度。必须是非负数，可以是小数。 ### `topRightRadius` - Type: `number` 右上角的角度。必须是非负数，可以是小数。 ### `bottomLeftRadius` - Type: `number` 左下角的角度。必须是非负数，可以是小数。 ### `bottomRightRadius` - Type: `number` 右下角的角度。必须是非负数，可以是小数。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 图层节点的最大高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minHeight` - Type: `number` 图层节点的最小高度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constraints` - Type: [`Constraints`](/types/constraints) 图层约束。 :::tip 该属性仅适用于采用**非自动布局**的容器的子节点。 ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 ### `overflowDirection` - Type: [`readonly OverflowDirection`](/types/overflowDirection) 获取该节点溢出行为。 ## Variant-related properties ### `variantProperties` - Readonly: `true` - Type: `Array | undefined` 读取该组件的可变属性，即组件状态。当组件集不存在时，可变属性为undefined。 ### `setVariantPropertyValues` - Type: `setVariantPropertyValues({ [propertyName: string]: string }): void` 根据属性值切换实例的主组件。其参数必须是其主组件所在组件集中已有的属性和属性值。当传入多个属性时，以匹配成功的最后一个属性为准。当主组件不是组件集中的组件时，实例无法设置可变状态。 ```ts instance.setVariantPropertyValues({'属性 1': 'defaultValue'}) ``` ## Component properties-related properties ### `componentProperties` - Readonly: `true` - Type: `Array`, [ComponentProperties](/types/componentPropertiesRelated.html#componentproperties) 此实例的组件属性和值。 ### `setProperties` - Type: `setProperties(properties: { [propertyId: string]: string | boolean }): void` 设置此实例的组件属性和值。`propertyId` 对应于[ComponentPropertyValues](/types/componentPropertiesRelated.html#componentpropertiesmixin)为`TEXT`、`BOOLEAN`和`INSTANCE_SWAP`属性提供的唯一`id`。函数中未指定的现有属性将保持其当前值。 --- # IntelligentContainerNode > 分类: apis | URL: https://developers.mastergo.com/apis/intelligentContainerNode # IntelligentContainerNode `IntelligentContainerNode` 即智能容器节点，用于承载 GLSL shader 动画效果。智能容器节点继承自容器节点（`FrameNode`），拥有容器节点的所有属性和能力，并额外支持 shader 代码的读写和播放控制。 智能容器节点特有的属性如下： | 属性名 | 类型 | 读/写 | 说明 | | --- | --- | --- | --- | | `shaderCode` | `string` | 读/写 | GLSL 着色器代码，用于控制智能容器的渲染效果。 | | `isPlaying` | `boolean` | 读/写 | 动画的播放状态，`true` 为播放，`false` 为暂停。 | ## GLSL 代码格式要求说明 智能容器对 GLSL 代码有以下格式要求： 1. 仅需片段着色器 只需提供片段着色器（Fragment Shader）代码，不需要顶点着色器，也不从顶点着色器传入坐标。 2. 必须声明的 uniform 参数 代码中必须声明以下两个 uniform 变量，名称固定不可更改： ```glsl uniform float u_time; // 时间戳，单位：毫秒 uniform sampler2D u_texture; // 画布纹理 ``` 3. UV 坐标的获取方式 计算 UV 坐标时，必须通过 textureSize 获取纹理尺寸，不可硬编码分辨率： ```glsl vec2 uv = gl_FragCoord.xy / vec2(textureSize(u_texture, 0)); ``` 4. 自定义参数须声明为 const 除上述两个 uniform 外，其他可调参数一律声明为 const，并附上默认值。每个参数上方需添加注释，说明其功能和取值范围，格式如下： ```glsl // 单个波纹生命周期（秒）：[1，20] const float WAVE_LIFETIME = 8.0; ``` 这个注释格式是设置面板自动解析参数的依据——面板会读取注释中的范围信息，将其映射为可拖拽调整的滑块。 完整实例 ```glsl precision highp float; uniform float u_time; uniform sampler2D u_texture; out vec4 fragColor; // 极光强度: [0.2, 3.0] const float AURORA_INTENSITY = 1.4; // 流动速度: [0.0, 3.0] const float FLOW_SPEED = 0.35; // 条带数量: [1.0, 6.0] const float BAND_COUNT = 3.0; // 条带宽度: [0.02, 0.4] const float BAND_WIDTH = 0.14; // 主色 (青): vec3 const vec3 COLOR_CYAN = vec3(0.10, 0.95, 0.75); // 次色 (紫): vec3 const vec3 COLOR_PURPLE = vec3(0.55, 0.25, 0.95); // 辅色 (粉): vec3 const vec3 COLOR_PINK = vec3(0.95, 0.40, 0.75); // 夜空底色: vec3 const vec3 NIGHT_COLOR = vec3(0.02, 0.03, 0.08); float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y); } float fbm(vec2 p) { float v = 0.0; float a = 0.5; for (int i = 0; i < 5; i++) { v += a * noise(p); p *= 2.0; a *= 0.5; } return v; } void main() { vec2 resolution = vec2(textureSize(u_texture, 0).xy); vec2 uv = gl_FragCoord.xy / resolution; float t = u_time * 0.001 * FLOW_SPEED; float wave = fbm(vec2(uv.x * 3.0 + t, uv.y * 1.5 - t * 0.5)); float curtain = 0.0; for (float i = 0.0; i < BAND_COUNT; i += 1.0) { float cy = 0.55 + 0.22 * sin(t * 0.7 + i * 1.7); float d = abs(uv.y - cy + (wave - 0.5) * 0.45); curtain += smoothstep(BAND_WIDTH, 0.0, d); } curtain = curtain / BAND_COUNT * AURORA_INTENSITY; vec3 col = mix(COLOR_PURPLE, COLOR_CYAN, uv.y); col = mix(col, COLOR_PINK, wave); col = NIGHT_COLOR + col * curtain; vec4 tex = texture(u_texture, uv); fragColor = vec4(col, tex.a); } ``` ## Base node properties ### `type` - Readonly: `true` - Type: `'INTELLIGENT_CONTAINER'` 节点类型，对于 `IntelligentContainerNode` 节点来说，其值为字符串 `'INTELLIGENT_CONTAINER'`。 ### `clone` - Type: `clone(): IntelligentContainerNode` 复制该智能容器节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。 ### `id` - Readonly: `true` - Type: `string` `IntelligentContainerNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置**智能容器**的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会阻止用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Children-related properties ### `children` - Readonly: `true` - Type: `ReadonlyArray` 当前 `IntelligentContainerNode` 节点的直接子节点。 ### `appendChild` - Type: `appendChild(child: SceneNode): void` 将给定的节点 `child` 添加为当前 `IntelligentContainerNode` 节点的直接子节点。 ### `insertChild` - Type: `insertChild(index: number, child: SceneNode): void` 在指定的位置 `index` 处插入子节点 `child`。假设一个组有三个子节点 A、B、C，现在调用 `insertChild` 方法将插入图层节点 D： - `insertChild(0, D)`，子节点顺序为：**`D`**、A、B、C。 - `insertChild(1, D)`，子节点顺序为：A、**`D`**、B、C。 - `insertChild(2, D)`，子节点顺序为：A、B、**`D`**、C。 - `insertChild(3, D)`，子节点顺序为：A、B、C、**`D`**。 ### `findAll` - Type: `findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray` 从当前 `IntelligentContainerNode` 节点开始查找整个子树，对每个节点调用 `callback` 函数，并返回所有对于 `callback` 函数的返回值为 `true` 的节点。 ### `findOne` - Type: `findOne(callback: (node: SceneNode) => boolean): SceneNode | null` 从当前 `IntelligentContainerNode` 节点开始查找整个节点树，对每个节点调用 `callback` 函数，并返回第一个对于 `callback` 函数的返回值为 `true` 的节点。 ### `findChildren` - Type: `findChildren(callback?: (node: SceneNode) => boolean): ReadonlyArray` 与 `findAll` 类似，不同之处在于，`findChildren` 仅会在当前 `IntelligentContainerNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findChild` - Type: `findChild(callback: (node: SceneNode) => boolean): SceneNode | null` 与 `findOne` 类似，不同之处在于，`findChild` 仅会在当前 `IntelligentContainerNode` 节点的**直接**子节点（不包括子节点的子节点）中进行查找。 ### `findAllWithCriteria` - Type: `findAllWithCriteria(criteria: { types: T }): Array<{ type: T[number] } & SceneNode>` 查找当前节点的所有子节点，返回所有类型符合的节点。 ## IntelligentContainer-related properties ### `shaderCode` - Type: `string` 智能容器的 GLSL shader 代码。可以读取或设置该属性来控制智能容器的渲染效果。 ```js const ic = mg.createIntelligentContainer() ic.shaderCode = 'void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }' ``` ### `isPlaying` - Type: `boolean` 智能容器的播放状态。`true` 表示正在播放动画，`false` 表示暂停。 ```js const ic = mg.getNodeById('xxx') console.log(ic.isPlaying) // true or false ic.isPlaying = false // 暂停播放 ic.isPlaying = true // 继续播放 ``` ## Frame-related properties ### `clipsContent` - Type: `boolean` 容器是否对超出的内容进行裁剪，即超出容器的图层是否可见。 ### `layoutGrids` - Type: [`ReadonlyArray`](/types/layoutGrid) 布局网格。 :::tip 布局网格只有在非自动布局时设置才会生效。 ::: ### `gridStyleId` - Type: string 布局网格样式Id。 ### `flexMode` - Type: `'NONE' | 'HORIZONTAL' | 'VERTICAL'` 表示该容器是否采用自动布局： - `'NONE'`: 没有采用自动布局。 - `'HORIZONTAL'`: 自动布局，水平方向。 - `'VERTICAL'`: 自动布局，垂直方向。 ### `flexWrap` - Type: `'NO_WRAP' | 'WRAP'` 此属性只能在 `flexMode === "HORIZONTAL"` 的图层上设置。此属性必须设置为`'WRAP'`，才能使 `crossAxisSpacing` 和 `crossAxisAlignContent` 属性生效。 ### `itemSpacing` - Type: `number` 仅适用于采用自动布局的容器图层。代表该容器的子节点间的间距。 ### `crossAxisSpacing` - Type: `number` | `null` 仅适用于 `flexWrap` 设置为 `WRAP` 的自动布局图层。表达换行的行之间的距离。 ### `mainAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER' | 'SPACING_BETWEEN'` 仅适用于采用自动布局的容器图层。用于决定自动布局容器的子节点在主轴上的对齐方式。 ### `crossAxisAlignItems` - Type: `'FLEX_START' | 'FLEX_END' | 'CENTER'` 仅适用于采用自动布局的容器图层。用于决定自动布局容器的子节点在交叉轴上的对齐方式。 ### `mainAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的容器图层。代表当前容器主轴方向上的长度。 ### `crossAxisSizingMode` - Type: `'FIXED' | 'AUTO'` 仅适用于采用自动布局的容器图层。代表当前容器交叉轴方向上的长度。 ### `crossAxisAlignContent` - Type: `'AUTO' | 'SPACE_BETWEEN'` 仅适用于自动布局模式为"WRAP"的自动布局图层。确定不同的行在自动布局图层内的分布方式。 ### `itemReverseZIndex` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定此容器中图层的画布堆叠顺序。 ### `strokesIncludedInLayout` - Type: `boolean` 仅适用于采用自动布局的容器图层。用于决定描边是否包含在布局计算中。 ### `paddingTop` - Type: `number` 仅适用于采用自动布局的容器图层。容器的上内边距。 ### `paddingRight` - Type: `number` 仅适用于采用自动布局的容器图层。容器的右内边距。 ### `paddingBottom` - Type: `number` 仅适用于采用自动布局的容器图层。容器的下内边距。 ### `paddingLeft` - Type: `number` 仅适用于采用自动布局的容器图层。容器的左内边距。 ### `resizeToFit` - Type: `resizeToFit(): void` 适应内容大小。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` 描边类型。 ### `strokeWeight` - Type: `number` 描边的粗细，以像素为单位。必须是非负数，可以是小数。 ### `strokeTopWeight` - Type: `number` 顶侧单边描边的粗细。 ### `strokeLeftWeight` - Type: `number` 左侧单边描边的粗细。 ### `strokeBottomWeight` - Type: `number` 底侧单边描边的粗细。 ### `strokeRightWeight` - Type: `number` 右侧单边描边的粗细。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 ### `strokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 端点的装饰。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。 ### `outlineStroke` - Type: `() => FrameNode | null` 该方法执行的动作与右键菜单中的"轮廓化"功能相同。如果该节点存在描边则该方法创建并返回描边的 `FrameNode` 节点，否则返回 `null`。 ## Corner-related properties ### `cornerSmooth` - Type: `number` 控制角的平滑程度，值域为 `[0, 1]`。 ### `cornerRadius` - Type: `number | PluginAPI['mixed']` 圆角。 ### `topLeftRadius` - Type: `number` 左上角的角度。 ### `topRightRadius` - Type: `number` 右上角的角度。 ### `bottomLeftRadius` - Type: `number` 左下角的角度。 ### `bottomRightRadius` - Type: `number` 右下角的角度。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。 ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。 ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: `number` 图层节点的高度。 ### `maxWidth` - Type: `number` 图层节点的最大宽度。 ### `minWidth` - Type: `number` 图层节点的最小宽度。 ### `maxHeight` - Type: `number` 图层节点的最大高度。 ### `minHeight` - Type: `number` 图层节点的最小高度。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` 等比缩放图层。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。 ### `constraints` - Type: [`Constraints`](/types/constraints) 图层约束。 ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。 ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性。 ### `overflowDirection` - Type: [`readonly OverflowDirection`](/types/overflowDirection) 获取该节点溢出行为。 --- # LineNode > 分类: apis | URL: https://developers.mastergo.com/apis/lineNode # LineNode `LineNode` 相当于一个一维的对象，给它一个描边使该对象可见。`LineNode` 的两个主要属性是它的长度和旋转的角度，在 API 层面分别用 `width` 和 `rotation` 来描述直线的长度和角度。直线的高度 `height` 始终为 `0`。 ## Base node properties ### `type` - Readonly: `true` - Type: `'LINE'` 节点类型，对于 `LineNode` 节点来说，其值为字符串 `'LINE'`。 ### `clone` - Type: `clone(): LineNode` 复制该直线节点。默认情况下，复制的新节点的父级节点为 `mg.document.currentPage`。 ### `id` - Readonly: `true` - Type: `string` `LineNode` 节点的 ID。 ### `remove` - Type: `remove():void` 将当前节点从`parent`节点中移除。 ### `removed` - Type: `boolean` 如果节点被移除了，则值为 `true`。如果插件保持运行状态，并且插件代码对某个节点存在引用，那么您应该始终检查节点的 `removed` 属性，在对节点进行操作之前先确保它没有被移除。 ### `parent` - Readonly: `true` - Type: `(BaseNode & ChildrenMixin) | void` 获取当前节点的父节点。 ### `name` - Type: `string` 读取或设置节点的名字，即图层面板中所展示的图层名称。 ### `getPluginData` - Type: `getPluginData(key: string): string` 获取节点上存储自定义信息，对您的插件来说是私有的。如果要获取字符串以外的值类型，请先通过 JSON.parse 将其解码。 ### `setPluginData` - Type: `setPluginData(key: string, value: string): void` 允许您在任何节点上存储自定义信息，对您的插件来说是私有的。如果要存储字符串以外的值类型，请先通过 JSON.stringify 将其编码。 ### `getPluginDataKeys` - Type: `getPluginDataKeys(): string[]` 获取当前插件存储信息的所有键名。 ### `removePluginData` - Type: `removePluginData(key: string): void` 移除当前插件存储的自定义信息。 ### `clearPluginData` - Type: `clearPluginData(): void` 清除当前插件所有存储的自定义信息。 ### `getSharedPluginData` - Type: `getSharedPluginData(namespace: string, key: string): string` 获取存储在特定命名空间上的共享数据。 ### `setSharedPluginData` - Type: `setSharedPluginData(namespace: string, key: string, value: string): void` 这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据，请使用 getSharedPluginDataKeys。 您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据，请改用`setPluginData`。 您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的，以防止多个插件使用通用键名（如数据）并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者，以便他们可以从您的插件中读取数据。 ::: warning `namespace`用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。 ::: ### `getSharedPluginDataKeys` - Type: `getSharedPluginDataKeys(namespace: string): string[]` 查找存储在特定命名空间中的节点上的所有数据的键名。 ### `removeSharedPluginData` - Type: `removeSharedPluginData(namespace: string, key: string): void` 移除存储在特定命名空间中的自定义信息。 ### `clearSharedPluginData` - Type: `clearSharedPluginData(namespace: string): void` 清除存储在特定命名空间上的所有数据。 ::: warning 请谨慎调用此api，这样会导致其他人正在使用的共享的数据丢失。 ::: ## Scene node properties ### `isVisible` - Type: `boolean` 节点是否可见。无论节点是否可见，都不影响插件对节点的访问。节点的 `.isVisible` 属性独立于它的父代节点。这意味着：即使该节点的 `.isVisible === true`，它也未必可见（父代节点中，任何一个节点不可见，那么该节点都不可见）。所以判断节点是否真的可见的正确方法是：确保该节点以及它的所有父代节点都满足条件 `.isVisible === true`。 ### `isLocked` - Type: `boolean` 节点是否被锁定。锁定的节点会组织用户在画布上对其进行特定的交互，例如拖动、选中图层。但无论图层节点是否被选中，都不影响插件代码对图层节点属性的读写操作。与判断节点是否可见的方式类似，判断节点是否真的被锁定正确方法是：只要该节点或**任何一个**它的父代节点满足条件 `.isVisible === true`，则认为该节点被锁定。 ### `attachedConnectors` - Readonly: `true` - Type: [ConnectorNode[]](/apis/connectorNode.html) 吸附到节点的连接线节点数组。 ### `componentPropertyReferences` - Type: `{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']: string } | null`, [ComponentPropertyReferences](/types/componentPropertiesRelated#componentpropertyreferences) 此节点上附加的所有组件属性。仅当节点是组件子图层且未嵌套在实例节点中时，该节点才能具有组件属性引用。否则为空。键值对中的值是组件或组件集上的组件属性定义返回的组件属性`id`。 ## Blend-related properties ### `opacity` - Type: `number` 读取或设置图层的透明度，其值必须在 `[0, 1]` 区间。 ### `blendMode` - Type: [`BlendMode`](/types/blend) 图层的混合模式。 ### `isMask` - Type: `boolean` 图层是否是蒙版。 ### `isMaskOutline` - Type: `boolean` 图层是否是轮廓蒙版，值为false时为透明蒙层。只有当`isMask`为true时设置才能生效。 ### `isMaskVisible` - Type: `boolean` 图层是否显示蒙版。只有当`isMask`为true时设置才能生效，只有为轮廓蒙层的时候，才会在画布中显示蒙层。 ### `effects` - Type: `ReadonlyArray`, [Effect](/types/effect) 返回一个特效数组，具体数据结构可以查看 [Effect](/types/effect)。 ### `effectStyleId` - Type: `string` 当前节点所链接的特效样式的 id。即当前节点的 `effects` 属性所链接的 [EffectStyle](/types/style.html#effectstyle) 对象的 `id`。 ## Geometry-related properties ### `fills` - Type: [`ReadonlyArray`](/types/paint) 图层的填充。 ### `strokes` - Type: [`ReadonlyArray`](/types/paint) 图层的描边。 ### `strokeStyle` - Type: `'SOLID' | 'DASH' | 'CUSTOM'` ### `strokeWeight` - Type: `number` 描边的粗细，以像素为单位。必须是非负数，可以是小数。 ### `strokeAlign` - Type: `'CENTER' | 'INSIDE' | 'OUTSIDE'` 描边相对于图层边界的对齐方式。 - `'CENTER'`: 居中。 - `'INSIDE'`: 内部。 - `'OUTSIDE'`: 外部。 ### `leftStrokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 起点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `rightStrokeCap` - Type: `'NONE' | 'ROUND' | 'SQUARE' | 'LINE_ARROW' | 'TRIANGLE_ARROW' | 'ROUND_ARROW' | 'RING' | 'DIAMOND' | 'LINE'` 终点的装饰。 - `'NONE'`: 正常。 - `'ROUND'`: 圆角。 - `'SQUARE'`: 方型。 - `'LINE_ARROW'`: 普通箭头。 - `'TRIANGLE_ARROW'`: 三角箭头。 - `'ROUND_ARROW'` 圆箭头。 - `'RING'` 圆环。 - `'DIAMOND'` 方块。 - `'LINE'`直线。 ### `strokeJoin` - Type: `'MITER' | 'BEVEL' | 'ROUND'` 边角的装饰。 - `'MITER'`: 直角。 - `'BEVEL'`: 斜切。 - `'ROUND'`: 圆角。 ### `strokeDashes` - Type: `ReadonlyArray<[number, number]>` 包含数字的数组。数组偶数下标元素代表虚线的长度，奇数下标元素代表虚线的间距。 ### `dashCap` - Type: `'NONE' | 'ROUND' | 'SQUARE'` 虚线端点装饰。 ### `fillStyleId` - Type: `string` 当前节点所链接的填充样式的 id。即当前节点的 `fills` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `strokeStyleId` - Type: `string` 当前节点所链接的描边样式的 id。即当前节点的 `strokes` 属性所链接的 [PaintStyle](/types/style.html#paintstyle) 对象的 `id`。 ### `outlineStroke` - Type: `() => LineNode | null` 该方法执行的动作与右键菜单中的“轮廓化”功能相同。如果该节点存在描边则该方法创建并返回描边的 `LineNode` 节点，否则返回 `null`。 ::: tip 注意： - 在调用`outlineStroke`轮廓化后，layer的描边会被清除，也就是`strokes`会变成空数组。 ::: ## Layout-related properties ### `absoluteTransform` - Type: [`Transform`](/types/transform) 图层节点相对于包含它的页面的位置，以变换矩阵的方式呈现。 ### `relativeTransform` - Type: [`Transform`](/types/transform) 图层节点相对于它的父级节点的位置，作为变换矩阵呈现。 ### `absoluteBoundingBox` - Readonly: `true` - Type: [`Rect`](/types/rect) 图层节点相对于包含它的页面的位置，以[Rect](/types/rect)对象的方式呈现。 ### `absoluteRenderBounds` - Readonly: `true` - Type: [`Rect | null`](/types/rect) 图层节点在画布中的实际渲染效果的定位和宽高，其值会受到该图层的旋转、填充、阴影、描边等效果影响，返回的坐标值为相对于画布的坐标，以[Rect](/types/rect)对象的方式呈现，当该图层不存在时，返回值为null。 ### `x` - Type: `number` 图层节点的位置，等价于 `relativeTransform[0][2]`。 ### `y` - Type: `number` 图层节点的位置，等价于 `relativeTransform[1][2]`。 ### `bound` - Type: [`Rect`](/types/rect) 图层节点的rect。 ### `rotation` - Type: `number` 图层节点的旋转角度。值域为 `[-180, 180]`。其值等价于： ```js Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]) ``` ### `width` - Type: `number` 图层节点的宽度。 ### `height` - Type: 0 图层节点的高度, 直线的高度始终为0。 ### `maxWidth` - Type: `number` 图层节点的最大宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `minWidth` - Type: `number` 图层节点的最小宽度，该图层必须设置为自动布局或者是一个自动布局图层的直接子节点。 ### `maxHeight` - Type: `number` 直线的高度始终为0。 ### `minHeight` - Type: `number` 直线的高度始终为0。 ### `flip` - Type: `flip(direction: 'HORIZONTAL' | 'VERTICAL'): void` 翻转图层。 - `HORIZONTAL`: 水平翻转。 - `VERTICAL`: 垂直翻转。 ### `resize` - Type: `resize(width: number, height: number): void` 调整图层大小。同时设置图层的宽度和高度。 ### `rescale` - Type: `rescale(scale: number, scaleOption?: ScaleOption): void` ```ts type ScaleCenter = 'TOPLEFT' | 'TOP' | 'TOPRIGHT' | 'LEFT' | 'CENTER' | 'RIGHT' | 'BOTTOMLEFT' | 'BOTTOM' | 'BOTTOMRIGHT' interface ScaleOption { scaleCenter?: ScaleCenter } ``` `rescale`方法用于等比缩放图层，且等比影响子图层的大小（width、height 或 fontSize）和相对定位，使其占百分比相等。 传入`scale`控制缩放系数，缩放后的宽高最小为0.01。设置`scaleOption`可设置缩放的行为，如设置`scaleCenter`控制缩放中心，默认为左上角`TOPLEFT`。 ### `flexGrow` - Type: `0 | 1` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的主轴，行为与 CSS 的 `flex-grow` 属性一致。 - `0`: 固定宽度。 - `1`: 充满容器。 ### `alignSelf` - Type: `"STRETCH" | "INHERIT"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点是否撑满容器的交叉轴，行为与 CSS 的 `align-self` 属性一致。 - `"STRETCH"`: 撑满交叉轴。 - `"INHERIT"`: 固定高度。 ### `layoutPositioning` - Type: `"AUTO" | "ABSOLUTE"` 该属性仅适用于采用自动布局的容器的直接子节点。代表该图层节点的大小和位置是否通过自动布局设置或手动调整。 :::tip 实例中的直接子节点始终为AUTO. ::: ### `constraints` - Type: [`Constraints`](/types/constraints) 图层约束。 :::tip 该属性仅适用于采用**非自动布局**的容器的子节点。 ::: ### `constrainProportions` - Type: `boolean` 锁定节点宽高比例。当为`true`时,修改节点的`width`或`height`会等比例修改`height`和`width`。 ## Export-related properties ### `exportSettings` - Type: [`ReadonlyArray`](/types/exportSettings.html) 节点的导出设置。 ### `export` - Type: `export(settings?: ExportSettings): Uint8Array | string`, [ExportSettings](/types/exportSettings.html) 将节点导出为对应的编码图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js function exportImage() { const svgString = node.export({ format: 'SVG' }) const uint8arr = node.export({ format: 'PNG' }) } ``` ### `exportAsync` - Type: `exportAsync(settings?: ExportSettings): Promise`, [ExportSettings](/types/exportSettings.html) 将节点异步导出为对应的编码图片。如果导出图层包含图片，该方法会加载原图，如果原图加载失败，会降级为预览图片。如果是 `SVG` 格式，则返回字符串；否则返回 `Uint8Array`。 ```js async function exportImage() { const svgString = await node.exportAsync({ format: 'SVG' }) const uint8arr = await node.exportAsync({ format: 'PNG' }) } ``` ### `exportPng` 【私有化】 - Type: `exportPng(setting?: { filterIds?: string[], scale?: number }): string` 将节点导出为 PNG 图片，返回 base64 编码的 data URL 字符串（`data:image/png;base64,...`）。 - `filterIds`：要排除的子图层 ID 数组，排除的子图层不会被导出。默认为空数组。 - `scale`：缩放比例，默认为 `1`。 ## Reaction prototyping-related properties ### `reactions` - Type: [`Array`](/types/reaction) 获取或设置该节点设置的原型属性，若该图层没有任何以此为起点的原型交互，则返回空数组。每次设置原型属性都会将原有原型覆盖，若想清空该图层的所有原型，赋值空数组即可；若需要添加某原型交互，在原有原型数组上，添加完整的原型设置即可。 --- # mg > 分类: apis | URL: https://developers.mastergo.com/apis/mastergo # mg 下面给出的属性和方法可以通过全局对象 `mg` 来访问。 ## 属性 ### `apiVersion` - Readonly: `true` - Type: `string` 运行插件的 MasterGo API 版本号，即定义在 `manifest.json` 中的 `api` 字段的值。 ### `document` - Readonly: `true` - Type: `DocumentNode` MasterGo 文档的根节点，可以通过它来访问其他页面节点，或查找子代节点。例如，可以通过 `document.currentPage` 来访问当前页面节点。 ### `documentId` - Readonly: `true` - Type: `number` 当前文档的 ID。 ### `command` - Readonly: `true` - Type: `string` 当前运行的command值， 当以[子菜单](/guide/setup.html#manifest-json)为入口运行插件时，其值为[子菜单](/guide/setup.html#manifest-json)的command。默认为空串。 ### `mixed` - Readonly: `true` - Type: `string | symbol` 混合标记。如矩形图层的[cornerRadius](/apis/rectangleNode.html#cornerradius)属性，若设置了单个角的圆角，则[cornerRadius](/apis/rectangleNode.html#cornerradius)的值为`mg.mixed`。 ::: tip 注意：不建议使用字面量代替`mg.mixed`进行开发，特别是当其类型为`symbol`时。 ::: ### `ui` - Readonly: `true` - Type: ```ts interface UIAPI { show(): void; hide(): void; close(): void; postMessage(pluginMessage: any, options?: UIPostMessageOptions): void; onmessage: | ((pluginMessage: any, props: OnMessageProperties) => void) | undefined; } ``` 该属性是一个对象，包含了用来操作用户界面并与用户界面进行信息交流的接口。详情请查看 [mg.ui](/apis/ui)。 ### `themeColor` - Readonly: `true` - Type: `'dark' | 'light'` Master Go 系统的主题色, 值为 `dark` 或 `light` ### `viewport` - Readonly: `true` - Type: ```ts interface ViewportAPI { center: Vector; zoom: number; readonly bounds: Rect; } ``` 该属性是一个对象，可以用来读取或设置当前页面的用户可视区（即画布的可见区域）。详情请查看 [mg.viewport](/apis/viewport)。 ### `clientStorage` - Readonly: `true` - Type: ClientStorageAPI ```ts interface ClientStorageAPI { getAsync(key: string): Promise setAsync(key: string, value: any): Promise keysAsync(): Promise deleteAsync(key: string): Promise } ``` 该属性是一个对象，包含了用来在用户机器上完成数据本地持久化存储的方法。详情请查看 [mg.clientStorage](/apis/clientStorage)。 ### `currentUser` - Readonly: `true` - Type: [User](/types/user) | null 该属性是一个对象，包含了当前用户的相关信息，需要在manifest.json中设置[permissions](/guide/setup.html#manifest-json)。 ### `codegen` - Readonly: `true` - Type: [CodegenAPI](/apis/codegen) | null 该属性是一个对象，包含了研发模式代码生成相关的模块。详情请查看 [mg.codegen](/apis/codegen)。 ### `variables` - Readonly: `true` - Type: VariablesAPI 该属性是一个对象，包含了变量管理相关的模块，用于管理设计变量（Design Variables）的集合、模式、分组、创建、绑定等。详情请查看 [mg.variables](/apis/variables)。 ## 方法 ### `showUI` - Type: ```ts showUI(HTMLString: string, options?: ShowUIOptions): void type ShowUIOptions = { width?: number height?: number visible?: boolean x?: number | string y?: number | string withoutHeader?: boolean headerVisible?: boolean // 私有化特有 style?: Record // 私有化特有 } ``` 用来展示插件的用户界面，调用该方法会创建一个模态框。该模态框中会包含 `