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渐变导入，不应用于中心的当前变换。在应用这个变换之前，原点在物体的左上角加上offset和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属性的height部分
`width`	Object.number	width part of the svg tag if viewBox is not specified如果viewBox未指定，则为svg标记的宽度部分
`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 增加了另一个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.包含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 数量仅为径向梯度，外圆半径

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

在线工具

快捷菜单返回顶部