ComponentNode
ComponentNode
代表组件图层节点,组件是可以在你的设计中进行复用的元素。
Component node properties
type
- Readonly:
true
- Type:
COMPONENT
此节点的类型,由字符串 COMPONENT
表示
clone
- Type:
clone(): ComponentNode
将组件节点复制为没有实例的新组件。
createInstance
- Type:
createInstance(): InstanceNode
- Type Declaration: InstanceNode
创建该组件的一个实例,默认情况下,pixso.currentPage
将作为新创建的实例的父节点。
instances
- Readonly:
true
- Type: InstanceNode[]
返回当前文档中该组件的所有实例的数组。
variantProperties
- Readonly:
true
- Type:
{ [property: string]: string } | null
获取定义在组件集中变体的属性。
Publishable properties
key
- Readonly:
true
- Type:
string
与 pixso.importComponentByKeyAsync
一起使用。请注意,虽然此键存在于本地和已发布的组件/组件集上,但您只能导入已发布的组件/组件集。
remote
- Readonly:
true
- Type:
boolean
获取当前组件/组件集是否来自团队库。远程组件/组件集是只读的:尝试更改其属性将抛出。
description
- Type:
string
组件/组件集的描述。
pageName
- Readonly:
true
- Type:
string
返回当前组件/组件集所属的页面名称。
containerName
- Readonly:
true
- Type:
string
返回当前组件/组件集所属的顶层容器名称。
getPublishStatusAsync
- Type:
getPublishStatusAsync(): Promise<PublishStatus>
- Type Declaration: PublishStatus
获取团队库中此组件/组件集的状态。
getLibraryInfoAsync
- Type:
getLibraryInfoAsync(): Promise<{key: string, name: string}>
获取组件/组件集所属资源库的 key 值,可通过pixso.getLibraryByKeyAsync(key)
获取该资源库的信息。
Component properties-related
componentPropertyDefinitions
- Readonly:
true
- Type: ComponentPropertyDefinitions
获取当前节点上存在的所有组件属性及其默认值。 VARIANT
属性将包含所有变体选项的列表。 BOOLEAN
、TEXT
和 INSTANCE_SWAP
属性的名称将以 #
开头的唯一标识符作为后缀,这有助于在 Pixso UI 中快速区分多个具有相同名称的组件属性。 属性名称应用于所有与组件属性相关的 API 方法和属性。
addComponentProperty
- Type:
addComponentProperty(propertyName: string, type: ComponentPropertyType, defaultValue: string | boolean): string
- Type Declaration: ComponentPropertyType
向当前节点添加一个新的组件属性,并返回带有唯一标识符后缀的属性名称。
editComponentProperty
- Type:
editComponentProperty(propertyName: string, newValue: { name?: string; defaultValue?: string | boolean }): string
修改当前节点上现有组件属性的名称或默认值,并返回带有唯一标识符后缀的属性名称。
deleteComponentProperty
- Type:
deleteComponentProperty(propertyName: string): void
删除此节点上的现有组件属性。 此函数仅支持类型为BOOLEAN
、TEXT
或 INSTANCE_SWAP
的属性。
Base node properties
id
- Readonly:
true
- Type:
string
当前节点的 ID。
parent
- Readonly:
true
- Type:
(BaseNode & ChildrenMixin) | null
获取当前节点的父节点。
index
- Readonly:
true
- Type: number
获取当前节点在同一层级下的顺序索引。
name
- Type:
string
读取或设置组件的名字,即图层面板中所展示的图层名称。
removed
- Readonly:
true
- Type:
boolean
如果节点被移除了,则返回 true
。如果插件保持打开一段时间并存储对节点的引用,您应该防御性地编写代码并检查节点是否未被用户删除。
remove
- Type:
remove():void
从文档中删除此节点及其所有子节点。
toString
- Type:
string
返回节点的字符串表示形式。
setRelaunchData
- Type:
data: {[command: string]: string}): void
在节点上设置状态以在选择节点时显示按钮和描述。
getRelaunchData
- Type:
getRelaunchData(): { [command: string]: string }
检索存储在此节点上的重新启动数据,使用 setRelaunchData
。
getPluginData
- Type:
getPluginData(key: string): string
获取节点上存储自定义信息,对您的插件来说是私有的。如果要获取字符串以外的值类型,请先通过 JSON.parse
将其解码。
setPluginData
- Type:
setPluginData(key: string, value: string): void
允许您在任何节点上存储自定义信息,对您的插件来说是私有的。如果要存储字符串以外的值类型,请先通过 JSON.stringify
将其编码。
getPluginDataKeys
- Type:
getPluginDataKeys(): string[]
获取当前插件存储信息的所有键名。
getSharedPluginData
- Type:
getSharedPluginData(namespace: string, key: string): string
获取存储在特定命名空间上的共享数据。
setSharedPluginData
- Type:
setSharedPluginData(namespace: string, key: string, value: string): void
这使您可以在任何节点上存储自定义信息。您可以稍后通过使用相同的命名空间和键调用 getSharedPluginData 来检索它。要查找存储在特定命名空间中的节点上的所有数据,请使用 getSharpedPluginDataKeys
。
您使用此 API 编写的任何数据都可以被任何插件读取。目的是允许插件相互操作。如果您不希望其他插件能够读取您的数据,请改用 setPluginData
。
您还必须提供命名空间参数以避免与其他插件的键冲突。此参数是强制性的,以防止多个插件使用通用键名(如数据)并相互覆盖。我们建议传递一个标识您的插件的值。可以将此命名空间提供给其他插件的作者,以便他们可以从您的插件中读取数据。
namespace 用于标识您的插件并避免与其他插件发生键冲突的唯一字符串。命名空间必须至少包含 3 个字母数字字符。
getSharedPluginDataKeys
- Type:
getSharedPluginDataKeys(namespace: string): string[]
查找存储在特定命名空间中的节点上的所有数据的键名。
Scene node properties
visible
- Type:
boolean
节点是否可见。该属性不影响插件访问节点的能力。
locked
- Type:
boolean
节点是否被锁定,防止在画布上进行某些用户交互,例如选择和拖动。该属性不影响插件写入这些属性的能力。
componentPropertyReferences
- Type:
{ [nodeProperty in 'visible' | 'characters' | 'mainComponent']?: string} | null
获取应用在当前节点上的所有组件属性。键值对当中的值会对应组件或组件集节点上通过 componentPropertyDefinitions
获取到的组件属性名称。
只有组件或实例节点的子节点才具有
componentPropertyReferences
属性。
Children-related
children
- Readonly:
true
- Type:
ReadonlyArray<SceneNode>
- Type Declaration: SceneNode
当前节点的直接子节点。
childrenCount
- Readonly:
true
- Type:
number
获取当前节点的直接子节点的数量。
appendChild
- Type:
appendChild(child: SceneNode, preserveAbsolutePostion?: boolean): void
将给定的节点 child
添加为当前节点的直接子节点。
appendChild 之后,默认保持
child
节点的relativeTransform
,由于child
的父图层的改变,可能导致child
节点在画布上的位置发生变更;若想保持child
节点的位置,可以将preserveAbsolutePostion
设为true
。
insertChild
- Type:
insertChild(index: number, child: SceneNode, preserveAbsolutePostion?: boolean): 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
。
findChildren
- Type:
findChildren(callback?: (node: SceneNode) => boolean): SceneNode[]
与 findAll
类似,不同之处在于,findChildren
仅会在当前节点的直接子节点(不包括子节点的子节点)中进行查找。
findChild
- Type:
findChild(callback: (node: SceneNode) => boolean): SceneNode | null
与 findOne
类似,不同之处在于,findChild
仅会在当前 ComponentNode
节点的直接子节点(不包括子节点的子节点)中进行查找。
findAll
- Type:
findAll(callback?: (node: SceneNode) => boolean): SceneNode[]
搜索整个子树(此节点的子节点、其子节点的子节点等)。 返回回调为其返回 true 的所有节点。
findOne
- Type:
findOne(callback: (node: SceneNode) => boolean): SceneNode | null
从当前节点开始查找整个节点树,对每个节点调用 callback
函数,并返回第一个对于 callback
函数的返回值为 true
的节点。
findAllWithCriteria
- Type:
findAllWithCriteria<T extends NodeType[]>(criteria: {types: T;}): Array<{ type: T[number] } & SceneNode>
- Type Declaration: NodeType
搜索整个子树(此节点的子节点、其子节点的子节点等)。返回满足条件中定义的任何类型的所有节点。
Frame-related
layoutMode
- Type:
"NONE" | "HORIZONTAL" | "VERTICAL"
确定此图层是否使用自动布局来定位其子级。默认为 NONE
。
layoutWrap
- Type:
"NO_WRAP" | "WRAP"
确定此图层是否使用换行自动布局。 默认为 NO_WRAP
。
primaryAxisSizingMode
- Type:
"FIXED" | "AUTO"
仅适用于自动布局画板。确定主轴是否具有固定长度(由用户确定)或自动长度(由布局引擎确定)。
counterAxisSizingMode
- Type:
"FIXED" | "AUTO"
仅适用于自动布局画板。确定计数器轴是具有固定长度(由用户确定)还是自动长度(由布局引擎确定)。
primaryAxisAlignItems
- Type:
"MIN" | "MAX" | "CENTER" | "SPACE_BETWEEN"
仅适用于自动布局画板,否则忽略。确定自动布局画板的子画板应如何在主轴方向上对齐。
counterAxisAlignItems
- Type:
"MIN" | "MAX" | "CENTER"
仅适用于自动布局画板,否则忽略。确定自动布局画板的子画板应如何在反轴方向上对齐。
paddingLeft
- Type:
number
仅适用于采用自动布局的 Frame
图层节点。Frame
容器的左内边距。
paddingRight
- Type:
number
仅适用于采用自动布局的 Frame
图层节点。Frame
容器的右内边距。
paddingTop
- Type:
number
仅适用于采用自动布局的 Frame
图层节点。Frame
容器的上内边距。
paddingBottom
- Type:
number
仅适用于采用自动布局的 Frame
图层节点。Frame
容器的下内边距。
itemSpacing
- Type:
number
仅适用于采用自动布局的 Frame
图层节点。代表该 Frame
节点的子节点间的间距。
counterAxisSpacing
- Type:
number
仅适用于将 layoutWrap
设置为 WRAP
的自动布局框架。 确定换行的距离。
itemReverseZIndex
- Type:
boolean
仅适用于自动布局画板。确定容器中图层的堆叠顺序。为 true
时,第一个图层将绘制在顶部。
strokesIncludedInLayout
- Type:
boolean
仅适用于自动布局画板。 确定边框是否包含在布局计算中。 当为 true
时,自动布局画板的行为类似于 css box-sizing: border-box
。
layoutGrids
- Type:
ReadonlyArray<LayoutGrid>
- Type Declaration: LayoutGrid
布局网格数组。
gridStyleId
- Type:
string
布局网格样式 Id
。赋值为空即解绑样式。
clipsContent
- Type:
boolean
容器是否对超出的内容进行裁剪,即超出容器的图层是否可见。
Container-related
expanded
- Type:
boolean
此容器是否在图层面板中显示为展开状态。
Blend-related
opacity
- Type:
number
读取或设置图层的透明度,其值必须在 [0, 1]
区间。
blendMode
- Type:
BlendMode
- Type Declaration: BlendMode
图层的混合模式。
isMask
- Type:
boolean
图层是否是蒙版。
effects
- Type:
ReadonlyArray<Effect>
返回一个特效数组,具体数据结构可以查看 Effect。
effectStyleId
- Type:
string
当前节点所链接的特效样式的 id
。即当前节点的 effects
属性所链接的 EffectStyle
对象的 id
。赋值为空即解绑样式。
Layout-related
x
- Type:
number
图层节点的位置,等价于 relativeTransform[0][2]。
y
- Type:
number
图层节点的位置,等价于 relativeTransform[1][2]。
width
- Readonly:
true
- Type:
number
图层节点的宽度。
height
- Readonly:
true
- Type:
number
图层节点的高度。
relativeTransform
- Type:
Transform
- Type Declaration: Transform
图层节点相对于其父节点的位置,以变换矩阵的方式呈现。注意:relativeTransform 对自动布局普通子图层不生效,带有绝对定位的子图层依然生效。
absoluteTransform
- Readonly:
true
- Type:
Transform
- Type Declaration: Transform
图层节点相对于包含它的页面的位置,以变换矩阵的方式呈现。
absoluteBoundingBox
- Readonly:
true
- Type:
Rect | null
- Type Declaration: Rect
不包括阴影或笔触等渲染属性的节点边界。
getNestedBoundaryBox
- Type:
getNestedBoundaryBox(): NestedBoundaryBox
- Type Declaration: NestedBoundaryBox
获取当前图层及其所有子图层的 boundaryBox 信息
absoluteRenderBounds
- Readonly:
true
- Type:
Rect | null
- Type Declaration: Rect
节点的实际边界,包括阴影、粗笔画和任何其他可能落在节点常规边界框之外的内容,这些边界框在 x
、y
、width
和中定义 height
。这个属性里面的 x
和y
代表节点在页面上的绝对位置。 如果节点不可见,此值将为 null
。
constrainProportions
- Type:
boolean
切换后,当用户通过属性面板调整图层大小时,使图层保持其比例。
rotation
- Type:
number
图层节点的旋转角度。值域为 [-180, 180]。其值等价于:
Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]);
layoutAlign
- Type:
"STRETCH" | "INHERIT"
仅适用于自动布局画板的直接子级,否则忽略。确定图层是否应沿父级的反轴拉伸。默认为 INHERIT
。
layoutGrow
- Type:
number
此属性仅适用于自动布局画板的直接子级,否则忽略。确定图层是否应沿父级的主轴拉伸。0 对应于固定大小,1 对应于拉伸。
resize
- Type:
resize(width: number, height: number): void
调整节点大小。如果节点包含具有约束的子节点,它会在调整大小期间应用这些约束。如果父级具有自动布局,则导致父级调整大小。
resizeWithoutConstraints
- Type:
resizeWithoutConstraints(width: number, height: number): void
调整节点大小。如果父级没有自动布局,则节点的子节点永远不会调整大小,即使这些子节点有约束。如果父级具有自动布局,则节点父级子节点和都会调整大小(不能忽略此约束)。
rescale
- Type:
rescale(scale: number): void
缩放图层节点, 此 API 功能等同于使用工具栏中的缩放工具。
constraints
- Type:
Constraints
- Type Declaration: Constraints
如果当前节点被包含在画板图层内,constraints
表示约束的类型。
Corner-related
cornerRadius
- Type:
number | pixso.mixed
圆角。
cornerSmoothing
- Type:
number
控制角的平滑程度,值域为 [0, 1]。
Individual corner-related
topLeftRadius
- Type:
number
左上角的角度。必须是非负数,可以是小数。
topRightRadius
- Type:
number
右上角的角度。必须是非负数,可以是小数。
bottomLeftRadius
- Type:
number
左下角的角度。必须是非负数,可以是小数。
bottomRightRadius
- Type:
number
右下角的角度。必须是非负数,可以是小数。
Geometry-related
fills
- Type:
ReadonlyArray<Paint> | pixso.mixed
- Type Declaration: Paint
图层的填充。
// 设置 fills
node.fills = newFills;
fillStyleId
- Type:
string | pixso.mixed
当前节点所链接的填充样式的 id。即当前节点的 fills
属性所链接的 PaintStyle 对象的 id。赋值为空即解绑样式。
strokes
- Type:
ReadonlyArray<Paint>
- Type Declaration: Paint
图层的描边。
strokeStyleId
- Type:
string
当前节点所链接的描边样式的 id。即当前节点的 strokes 属性所链接的 PaintStyle 对象的 id。赋值为空即解绑样式。
strokeWeight
- Type:
number
四个方向描边的粗细,以像素为单位。必须是非负数,可以是小数。需要注意,若设置了单边描边如strokeTopWeight
,则以单边描边为准;若设置了 strokeWeight
,会同时设置了四个方向的单边描边。
strokeJoin
- Type:
StrokeJoin | pixso.mixed
- Type Declaration: StrokeJoin
边角的装饰。
- 'MITER': 直角。
- 'BEVEL': 斜切。
- 'ROUND': 圆角。
strokeAlign
- Type:
"CENTER" | "INSIDE" | "OUTSIDE"
描边相对于图层边界的对齐方式。
'CENTER'
: 居中。'INSIDE'
: 内部。'OUTSIDE'
: 外部。
dashPattern
- Type:
ReadonlyArray<number>
指定交替短划线和间隙长度的数字列表,以像素为单位。
strokeCap
- Type:
StrokeCap | pixso.mixed
- Type Declaration: StrokeCap
端点的装饰。
strokeMiterLimit
- Type:
number
行程的斜接限制。这与 SVG 斜接限制相同。
Individual strokes-related
您可以为矩形节点或画板状节点的四个边中的每一个设置单独的笔画粗细。 与 strokeWeight
类似,这些值必须是非负的并且可以是小数。 要隐藏一侧,请将值设置为 0。
设置 strokeWeight 设置所有四个边的值。
strokeTopWeight
- Type:
number
确定矩形节点或画板状节点上的顶部笔划粗细。 必须是非负数,并且可以是小数。
strokeBottomWeight
- Type:
number
确定矩形节点或画板状节点上的底部笔划粗细。 必须是非负数,并且可以是小数。
strokeLeftWeight
- Type:
number
确定矩形节点或画板状节点上的左笔画粗细。 必须是非负数,并且可以是小数。
strokeRightWeight
- Type:
number
确定矩形节点或画板状节点上的右笔画粗细。 必须是非负数,并且可以是小数。
Reaction prototyping-related
reactions
- Type:
ReadonlyArray<Reaction>
此节点上的反应列表,其中包括原型中与此节点交互的方法以及该交互的行为。
Frame prototyping-related
overflowDirection
- Type:
"NONE" | "HORIZONTAL" | "VERTICAL" | "BOTH"
确定当画板包含超出画板边界的内容时,画板是否将在演示模式下滚动。反映原型选项卡中“溢出行为”中显示的值。
numberOfFixedChildren
- Type:
number
确定画板的哪些子级是滚动画板中的固定子级。
overlayPositionType
- Readonly:
true
- Type:
OverlayPositionType
当作为叠加层打开时,此画板的定位方式。
OverlayBackground
- Readonly:
true
- Type:
OverlayBackground
当作为叠加层打开时,此画板如何遮盖其下方的内容。
overlayBackgroundInteraction
- Readonly:
true
- Type:
overlayBackgroundInteraction
当作为叠加层打开时,用户如何与此画板下的内容进行交互。
Export-related
exportSettings
- Type:
exportSettings: ReadonlyArray<ExportSettings>
- Type Declaration: ExportSettings
节点的导出设置。
exportAsync
- Type:
exportAsync(settings?: ExportSettings): Promise<Uint8Array>
- Type Declaration: ExportSettings
将节点导出为编码图像。
HWDC
exportJsonAsync
- Type:
exportJsonAsync(): Promise<string>
导出节点的 JSON 数据,该数据中包括节点的所有信息。
exportHexAsync
- Type:
exportHexAsync(hex: string): Promise<string>
导出节点的 Hex 数据,该数据中包括节点的所有信息。