fabric.js中文API-自学php网

new Gradient()

Gradient class 梯度类

Source:

fabric.js, line 7937

Tutorials:

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

See:

fabric.Gradient#initialize for constructor definition

Members

gradientTransform :Array.<Number>

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. 在绘制前应用于渐变的变换矩阵。从svg渐变导入，不应用于中心的当前变换。在应用此转换之前，原点位于对象的左上角加上offsetty和offsetX。

Type:

Array.<Number>

Default Value:

null

Source:

fabric.js, line 7967

gradientUnits :String

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. 坐标单位表示坐标。如果是' pixels '，则以相同的宽度/高度为单位的线数。如果设置为“百分比”，则坐标仍然是一个数字，但1表示宽度的100% X的高度和y的高度的100%它可以大于1并且是负的。允许的值像素或百分比。

Type:

String

Default Value:

'pixels'

Source:

fabric.js, line 7978

offsetX :Number

Horizontal offset for aligning gradients coming from SVG when outside pathgroups 水平偏移量用于在外部路径组时对齐来自SVG的梯度

Type:

Number

Default Value:

Source:

fabric.js, line 7950

offsetY :Number

Vertical offset for aligning gradients coming from SVG when outside pathgroups 垂直偏移量用于在外部路径组时对齐来自SVG的梯度

Type:

Number

Default Value:

Source:

fabric.js, line 7957

type :String

Gradient type linear or radial 梯度型线性或径向

Type:

String

Default Value:

'pixels'

Source:

fabric.js, line 7985

Methods

(static) fromElement(el, instance, opacityAttr, svgOptions, viewBoxWidth, viewBoxHeight, width, height) → {fabric.Gradient}

Returns fabric.Gradient instance from an SVG element 返回织物。来自SVG元素的渐变实例

Parameters:

Name	Type	Description
`el`	SVGGradientElement	SVG gradient elementSVG渐变元素
`instance`	fabric.Object
`opacityAttr`	String	A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity.填充不透明度或描边不透明度属性，以乘以每个图层的不透明度。
`svgOptions`	Object	an object containing the size of the SVG in order to parse correctly gradients that uses gradientUnits as 'userSpaceOnUse' and percentages.一个包含SVG大小的对象，以便正确解析渐变它使用gradientUnits作为userSpaceOnUse和百分比。
`viewBoxWidth`	Object.number	width part of the viewBox attribute on svgsvg上viewBox属性的width部分
`viewBoxHeight`	Object.number	height part of the viewBox attribute on svgsvg的viewBox属性的高度部分
`width`	Object.number	width part of the svg tag if viewBox is not specified如果未指定viewBox，则使用svg标签的width部分
`height`	Object.number	height part of the svg tag if viewBox is not specified如果未指定viewBox，则使用svg标签的height部分

Source:

fabric.js, line 8234

See:

Returns:

Gradient instance

Type: fabric.Gradient

addColorStop(colorStop) → {fabric.Gradient}

Adds another colorStop 添加另一个颜色

Parameters:

Name	Type	Description
`colorStop`	Object	Object with offset and color带有偏移和颜色的对象

Source:

fabric.js, line 8043

Returns:

thisArg

Type: fabric.Gradient

initialize(options) → {fabric.Gradient}

Constructor 构造函数

Parameters:

Name Type Description

options

Object

Options object with type, coords, gradientUnits and colorStops

Properties

Name Type Attributes Description

type Object <optional> gradient type linear or radial梯度型线性或径向

gradientUnits Object <optional> gradient units梯度单元

offsetX Object <optional> SVG import compatibilitySVG导入兼容性

offsetY Object <optional> SVG import compatibilitySVG导入兼容性

colorStops Array.<Object> contains the colorstops.包含色块。

coords

Object

contains the coords of the gradient

Properties

Name	Type	Attributes	Description
`x1`	Number	<optional>	X coordiante of the first point for linear or of the focal point for radial直线为第一点的X坐标，径向为焦点的X坐标
`y1`	Number	<optional>	Y coordiante of the first point for linear or of the focal point for radial直线为第一点的Y坐标，径向为焦点的Y坐标
`x2`	Number	<optional>	X coordiante of the second point for linear or of the center point for radial第二点的X坐标为直线，中心点的X坐标为径向
`y2`	Number	<optional>	Y coordiante of the second point for linear or of the center point for radial第二点的Y坐标为直线，中心点的Y坐标为径向
`r1`	Number	<optional>	only for radial gradient, radius of the inner circle只适用于径向梯度，半径为内圆
`r2`	Number	<optional>	only for radial gradient, radius of the external circle只对径向梯度，半径外圆

包含梯度的坐标属性名字类型属性描述 x1 数量直线为第一点的X坐标，径向为焦点的X坐标日元数量直线为第一点的Y坐标，径向为焦点的Y坐标 x2 数量第二点的X坐标为直线，中心点的X坐标为径向 y2 数量第二点的Y坐标为直线，中心点的Y坐标为径向 r1 数量只适用于径向梯度，半径为内圆 r2 数量只对径向梯度，半径外圆

选项对象的类型，坐标，梯度单位和colorStops 属性名字类型属性描述类型对象梯度型线性或径向 gradientUnits 对象梯度单元 offsetX 对象 SVG导入兼容性 offsetY 对象 SVG导入兼容性 colorStops 数组。包含色块。坐标对象包含梯度的坐标属性名字类型属性描述 x1 数量直线为第一点的X坐标，径向为焦点的X坐标日元数量直线为第一点的Y坐标，径向为焦点的Y坐标 x2 数量第二点的X坐标为直线，中心点的X坐标为径向 y2 数量第二点的Y坐标为直线，中心点的Y坐标为径向 r1 数量只适用于径向梯度，半径为内圆 r2 数量只对径向梯度，半径外圆

Source:

fabric.js, line 8004

Returns:

thisArg

Type: fabric.Gradient

toLive(ctx) → {CanvasGradient}

Returns an instance of CanvasGradient 返回CanvasGradient的实例

Parameters:

Name	Type	Description
`ctx`	CanvasRenderingContext2D	Context to render on要渲染的上下文

Source:

fabric.js, line 8183

Returns:

Type: CanvasGradient

toObject(propertiesToIncludeopt) → {Object}

Returns object representation of a gradient 返回渐变的对象表示形式

Parameters:

Name	Type	Attributes	Description
`propertiesToInclude`	Array	<optional>	Any properties that you might want to additionally include in the output您可能希望在输出中额外包含的任何属性

Source:

fabric.js, line 8060

Returns:

Type: Object

toSVG(object) → {String}

Returns SVG representation of an gradient 返回渐变的SVG表示形式

Parameters:

Name	Type	Description
`object`	Object	Object to create a gradient for对象，为其创建渐变

Source:

fabric.js, line 8081

Returns:

SVG representation of an gradient (linear/radial)

Type: String

在线工具

快捷菜单返回顶部