Class Gradient<S, T>

Gradient class

Tutorial

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

Type Parameters

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

Hierarchy

Gradient

Index

Constructors

constructor

new Gradient<S, T>(__namedParameters): Gradient<S, T>
Type Parameters
- S
- T extends GradientType = S extends GradientType
  ? S
  : "linear"
Parameters
- __namedParameters: GradientOptions<T>
Returns Gradient<S, T>
- Defined in src/gradient/Gradient.ts:102

Properties

colorStops

colorStops: ColorStop[]

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

coords

coords: GradientCoords<T>

Defines how the gradient is located in space and spread

`Optional` excludeFromExport

excludeFromExport?: boolean

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

`Optional` gradientTransform

gradientTransform?: TMat2D

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

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'

`Readonly` id

id: string | number

ID used for SVG export functionalities

offsetX

offsetX: number

Horizontal offset for aligning gradients coming from SVG when outside pathgroups

Default

offsetY

offsetY: number

Vertical offset for aligning gradients coming from SVG when outside pathgroups

Default

type

type: T

Gradient type linear or radial

Default

'linear'

`Static` type

type: string = 'Gradient'

Methods

addColorStop

addColorStop(colorStops): Gradient<S, T>
Adds another colorStop
Parameters
- colorStops: Record<string, string>
Returns Gradient<S, T>
thisArg
- Defined in src/gradient/Gradient.ts:134

toLive

toLive(ctx): CanvasGradient
Returns an instance of CanvasGradient
Parameters
- ctx: CanvasRenderingContext2D
  
  Context to render on
Returns CanvasGradient
- Defined in src/gradient/Gradient.ts:298

toObject

toObject(propertiesToInclude?): Partial<Gradient<S, T>> & {
    colorStops: ColorStop[];
    coords: GradientCoords<T>;
    gradientTransform: undefined | number[];
    gradientUnits: GradientUnits;
    offsetX: number;
    offsetY: number;
    type: T;
}
Returns object representation of a gradient
Parameters
- Optional propertiesToInclude: string[]
  
  Any properties that you might want to additionally include in the output
Returns Partial<Gradient<S, T>> & {
    colorStops: ColorStop[];
    coords: GradientCoords<T>;
    gradientTransform: undefined | number[];
    gradientUnits: GradientUnits;
    offsetX: number;
    offsetY: number;
    type: T;
}
- Defined in src/gradient/Gradient.ts:151

toSVG

toSVG(object, __namedParameters?): string
Returns SVG representation of an gradient
Parameters
- object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
  
  Object to create a gradient for
- __namedParameters: {
  additionalTransform?: string;
  } = {}
  - Optional additionalTransform?: string
Returns string
SVG representation of an gradient (linear/radial)
- Defined in src/gradient/Gradient.ts:172

`Static` fromElement

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

Returns Gradient instance from an SVG element

Parameters

el: SVGGradientElement

SVG gradient element
instance: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
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>

Class Gradient<S, T>

Tutorial

Type Parameters

S

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

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

S

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

Parameters

__namedParameters: GradientOptions<T>

Returns Gradient<S, T>

Properties

colorStops

coords

Optional excludeFromExport

Optional gradientTransform

Default

gradientUnits

Default

Readonly id

offsetX

Default

offsetY

Default

type

Default

Static type

Methods

addColorStop

Parameters

colorStops: Record<string, string>

Returns Gradient<S, T>

toLive

Parameters

ctx: CanvasRenderingContext2D

Returns CanvasGradient

toObject

Parameters

Optional propertiesToInclude: string[]

Returns Partial<Gradient<S, T>> & { colorStops: ColorStop[]; coords: GradientCoords<T>; gradientTransform: undefined | number[]; gradientUnits: GradientUnits; offsetX: number; offsetY: number; type: T; }

toSVG

Parameters

object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

__namedParameters: { additionalTransform?: string; } = {}

Optional additionalTransform?: string

Returns string

Static fromElement

Parameters

el: SVGGradientElement

instance: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

svgOptions: SVGOptions

Returns Gradient<GradientType, GradientType>

Static

Member Of

See

Example

Settings

Member Visibility

Theme

On This Page

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

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

`Optional` excludeFromExport

`Optional` gradientTransform

`Readonly` id

`Static` type

`Optional` propertiesToInclude: string[]

Returns Partial<Gradient<S, T>> & {
colorStops: ColorStop[];
coords: GradientCoords<T>;
gradientTransform: undefined | number[];
gradientUnits: GradientUnits;
offsetX: number;
offsetY: number;
type: T;
}

__namedParameters: {
additionalTransform?: string;
} = {}

`Optional` additionalTransform?: string

`Static` fromElement