GraphicNode

Kind: abstract class Extends: SceneNode

Base class for nodes that have a stroke and/or fill. This includes leaf nodes such as Rectangle, as well as BooleanGroup which is a container node. If you create a shape node, it will not be visible unless you explicitly give it either a stroke or a fill.

fill

▸ fill: Color | LinearGradient | RadialGradient | AngularGradient | ImageFill

Updated XD 42

Default: null

The fill applied to this shape, if any. If this property is null or fillEnabled is false, no fill is drawn. Freshly created nodes have no fill by default.

For Line nodes, fill is ignored. For Text nodes, only solid Color fill values are allowed. For Artboard nodes, image fill values are not allowed.

Example

ellipse.fill = new Color("red");
Copied to your clipboard
ellipse.fill = new Color("red");

To modify an existing fill, always be sure to re-invoke the fill setter rather than just changing the fill object's properties inline. See "Properties with object values".

Kind: instance property of GraphicNode

fillEnabled

▸ fillEnabled: boolean

Default: true

If false, the fill is not rendered. The user can toggle this via a checkbox in the Properties panel.

Kind: instance property of GraphicNode

stroke

▸ stroke: Color

Default: Color(0) or null

The stroke color applied to this shape, if any. If this property is null or strokeEnabled is false, no stroke is drawn. Freshly created rectangles, polygons, and ellipses have a transparent stroke (RGBA value of 0) by default. For new lines and paths, the default stroke is null. Artboard objects ignore stroke settings.

Depending on the strokeWidth and strokePosition, the path outline of a node may need to be positioned on fractional pixels in order for the stroke itself to be crisply aligned to the pixel grid. For example, if a horizontal line uses a 1px center stroke, the line's y should end in .5 to keep the stroke on-pixel.

Example

ellipse.stroke = new Color("red");
Copied to your clipboard
ellipse.stroke = new Color("red");

To modify an existing stroke, always be sure to re-invoke the stroke setter rather than just changing the Color object's properties inline. See "Properties with object values".

Kind: instance property of GraphicNode

strokeEnabled

▸ strokeEnabled: boolean

Default: true

If false, the stroke is not rendered. The user can toggle this via a checkbox in the Properties panel.

Kind: instance property of GraphicNode

strokeWidth

▸ strokeWidth: number >= 0

Default: 1.0

Thickness in pixels of the stroke.

Kind: instance property of GraphicNode

strokePosition

▸ strokePosition: string

Default: CENTER_STROKE for most shapes, INNER_STROKE for Rectangle, Ellipse & Polygon

Position of the stroke relative to the shape's path outline: GraphicNode.INNER_STROKE, OUTER_STROKE, or CENTER_STROKE. Ignored by Text and Line, which always render using CENTER_STROKE.

Kind: instance property of GraphicNode

strokeEndCaps

▸ strokeEndCaps: string

Default: STROKE_CAP_NONE

For Lines and non-closed Paths, how the dangling ends of the stroke are rendered: GraphicNode.STROKE_CAP_NONE, STROKE_CAP_SQUARE, or STROKE_CAP_ROUND.

Kind: instance property of GraphicNode

strokeJoins

▸ strokeJoins: string

Default: STROKE_JOIN_MITER

How sharp corners in the shape are rendered: GraphicNode.STROKE_JOIN_BEVEL, STROKE_JOIN_ROUND, or STROKE_JOIN_MITER.

Kind: instance property of GraphicNode

strokeMiterLimit

▸ strokeMiterLimit: number >= 0

Default: 4

Expressed as a multiple of stroke width. Only used when strokeJoins = STROKE_JOIN_MITER.

Kind: instance property of GraphicNode

strokeDashArray

▸ strokeDashArray: Array<number>

Default: []

Empty array indicates a solid stroke. If non-empty, values represent the lengths of rendered and blank segments of the stroke's dash pattern, repeated along the length of the stroke. The first value is the length of the first solid segment. If the array is odd length, the items are copied to double the array length. For example, [3] produces the same effect as [3, 3].

The appearance of each segment's start/end follows the strokeEndCaps setting.

Kind: instance property of GraphicNode

strokeDashOffset

▸ strokeDashOffset: number

Default: 0

Ignored unless strokeDashArray is non-empty. Shifts the "phase" of the repeating dash pattern along the length of the stroke.

Kind: instance property of GraphicNode

shadow

▸ shadow: ?Shadow

Default: null

The node's drop shadow, if any. If there is no shadow applied, this property may be null or shadow.visible may be false.

To modify an existing shadow, always be sure to re-invoke the shadow setter rather than just changing the Shadow object's properties inline. See "Properties with object values".

Kind: instance property of GraphicNode

blur

▸ blur: ?Blur

Default: null

The node's object blur or background blur settings, if applicable (a node may not have both types of blur at once). If there is no blur effect applied, this property may be null or blur.visible may be false.

To modify an existing blur, always be sure to re-invoke the blur setter rather than just changing the Blur object's properties inline. See "Properties with object values".

Kind: instance property of GraphicNode

pathData

▸ pathData: string

Returns a representation of the node's outline in SVG <path> syntax. Note that only nodes with strokePosition == GraphicNode.CENTER_STROKE can be faithfully rendered in actual SVG using the exact pathData shown here.

Kind: instance property of GraphicNode Read only: true

hasLinkedGraphicFill

▸ hasLinkedGraphicFill: boolean

True if the node has an image fill that comes from a link to an external resource, such as Creative Cloud Libraries. Equivalent to the expression: node.fill && node.fill.linked.

Kind: instance property of GraphicNode Read only: true

Ellipse

Group