LinearGradient

Kind: class

In a linear gradient, colors blend smoothly along a straight line, extending out perpendicularly from that line. The gradient fills the entire area of the shape it is applied to.

new LinearGradient()

▸ new LinearGradient(): LinearGradient

Create a new LinearGradient instance.

clone()

▸ clone(): LinearGradient

Returns a copy of this instance.

Kind: instance method of LinearGradient

colorStops

▸ colorStops: Array<{stop:number, color:Color}>

Array of objects representing each color and its position along the gradient line. The position (stop value) is a number 0.0 - 1.0.

Example

Copy
let gradient = new LinearGradient();
gradient.colorStops = [{ stop: 0, color: new Color("Red") },
    { stop: 1, color: new Color("Blue") }];
selection.items[0].fill = gradient;
Copied to your clipboard
let gradient = new LinearGradient();
gradient.colorStops = [{ stop: 0, color: new Color("Red") },
    { stop: 1, color: new Color("Blue") }];
selection.items[0].fill = gradient;

Kind: instance property of LinearGradient

startX

▸ startX: number

X position of the start of the gradient line, as a multiple of the object's bounding box: X=0 indicates the left edge of the bounding box and X=1 indicates the right edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.

Kind: instance property of LinearGradient

startY

▸ startY: number

Y position of the start of the gradient line, as a multiple of the object's bounding box: Y=0 indicates the top edge of the bounding box and Y=1 indicates the bottom edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.

Kind: instance property of LinearGradient

endX

▸ endX: number

X position of the end of the gradient line, as a multiple of the object's bounding box: X=0 indicates the left edge of the bounding box and X=1 indicates the right edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.

Kind: instance property of LinearGradient

endY

▸ endY: number

Y position of the end of the gradient line, as a multiple of the object's bounding box: Y=0 indicates the top edge of the bounding box and Y=1 indicates the bottom edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.

Kind: instance property of LinearGradient

getEndPoints()

▸ getEndPoints(): Array<number>

Returns an array of [startX, startY, endX, endY].

Kind: instance method of LinearGradient

setEndPoints()

▸ setEndPoints(startX, startY, endX, endY)

Shorthand for setting all four start/endpoint properties.

Kind: instance method of LinearGradient

type

▸ type: string

Since: XD 42

String representing the type of the gradient, in this case linear gradient.

Kind: instance property of LinearGradient

Last updated 8/10/2021

Was this helpful?

Yes

No