Gradient

Defined in: src/gradient/Gradient.ts:29

Gradient class Gradient

Tutorial

http://fabricjs.com/fabric-intro-part-2#gradients

Type Parameters

• S

• T extends GradientType = S extends GradientType ? S : "linear"

Constructors

new Gradient()

new Gradient<S, T>(options): Gradient<S, T>

Defined in: src/gradient/Gradient.ts:102

Parameters

options

GradientOptions<T>

Returns

Gradient<S, T>

Properties

colorStops

colorStops: ColorStop[]

Defined in: src/gradient/Gradient.ts:86

Defines how many colors a gradient has and how they are located on the axis defined by coords

coords

coords: GradientCoords<T>

Defined in: src/gradient/Gradient.ts:79

Defines how the gradient is located in space and spread

excludeFromExport?

optional excludeFromExport: boolean

Defined in: src/gradient/Gradient.ts:92

If true, this object will not be exported during the serialization of a canvas

gradientTransform?

optional gradientTransform: TMat2D

Defined in: src/gradient/Gradient.ts:55

A transform matrix to apply to the gradient before painting. Imported from svg gradients, is not applied with the current transform in the center. Before this transform is applied, the origin point is at the top left corner of the object plus the addition of offsetY and offsetX.

Default

null

gradientUnits

gradientUnits: GradientUnits

Defined in: src/gradient/Gradient.ts:66

coordinates units for coords. If pixels, the number of coords are in the same unit of width / height. If set as percentage the coords are still a number, but 1 means 100% of width for the X and 100% of the height for the y. It can be bigger than 1 and negative. allowed values pixels or percentage.

Default

'pixels'

id

readonly id: string | number

Defined in: src/gradient/Gradient.ts:98

ID used for SVG export functionalities

offsetX

offsetX: number

Defined in: src/gradient/Gradient.ts:38

Horizontal offset for aligning gradients coming from SVG when outside pathgroups

Default

offsetY

offsetY: number

Defined in: src/gradient/Gradient.ts:45

Vertical offset for aligning gradients coming from SVG when outside pathgroups

Default

type

type: T

Defined in: src/gradient/Gradient.ts:73

Gradient type linear or radial

Default

'linear'

type

static type: string = 'Gradient'

Defined in: src/gradient/Gradient.ts:100

Methods

addColorStop()

addColorStop(colorStops): Gradient<S, T>

Defined in: src/gradient/Gradient.ts:133

Adds another colorStop

Parameters

colorStops

Record<string, string>

Returns

Gradient<S, T>

thisArg

toLive()

toLive(ctx): CanvasGradient

Defined in: src/gradient/Gradient.ts:299

Returns an instance of CanvasGradient

Parameters

ctx

CanvasRenderingContext2D

Context to render on

Returns

CanvasGradient

toObject()

toObject(propertiesToInclude?): Partial<Gradient<S, T>> & object

Defined in: src/gradient/Gradient.ts:150

Returns object representation of a gradient

Parameters

propertiesToInclude?

string[]

Any properties that you might want to additionally include in the output

Returns

Partial<Gradient<S, T>> & object

toSVG()

toSVG(object, __namedParameters): string

Defined in: src/gradient/Gradient.ts:171

Returns SVG representation of an gradient

Parameters

object

FabricObject

Object to create a gradient for

__namedParameters

additionalTransform

string

Returns

string

SVG representation of an gradient (linear/radial)

fromElement()

static fromElement(el, instance, svgOptions): Gradient<GradientType, GradientType>

Defined in: src/gradient/Gradient.ts:382

Returns Gradient instance from an SVG element

Parameters

el

SVGGradientElement

SVG gradient element

instance

FabricObject

svgOptions

SVGOptions

an object containing the size of the SVG in order to parse correctly gradients that uses gradientUnits as ‘userSpaceOnUse’ and percentages.

Returns

Gradient<GradientType, GradientType>

Gradient instance

Static

Member Of

Gradient

See

Example

<linearGradient id="linearGrad1">
   <stop offset="0%" stop-color="white"/>
   <stop offset="100%" stop-color="black"/>
 </linearGradient>

 OR

 <linearGradient id="linearGrad2">
   <stop offset="0" style="stop-color:rgb(255,255,255)"/>
   <stop offset="1" style="stop-color:rgb(0,0,0)"/>
 </linearGradient>

 OR

 <radialGradient id="radialGrad1">
   <stop offset="0%" stop-color="white" stop-opacity="1" />
   <stop offset="50%" stop-color="black" stop-opacity="0.5" />
   <stop offset="100%" stop-color="white" stop-opacity="1" />
 </radialGradient>

 OR

 <radialGradient id="radialGrad2">
   <stop offset="0" stop-color="rgb(255,255,255)" />
   <stop offset="0.5" stop-color="rgb(0,0,0)" />
   <stop offset="1" stop-color="rgb(255,255,255)" />
 </radialGradient>

fromObject()

Call Signature

static fromObject(options): Promise<Gradient<"radial", "radial">>

Defined in: src/gradient/Gradient.ts:318

Parameters

options

GradientOptions<"linear">

Returns

Promise<Gradient<"radial", "radial">>

Call Signature

static fromObject(options): Promise<Gradient<"radial", "radial">>

Defined in: src/gradient/Gradient.ts:321

Parameters

options

GradientOptions<"radial">

Returns

Promise<Gradient<"radial", "radial">>