fabric.js中文API-自学php网

Name	Type	Attributes	Description
`fromColor`	String		十六进制或rgb(a)格式的起始颜色。
`toColor`	String		十六进制或rgb(a)格式的起始颜色。
`duration`	Number	<optional>	变化持续时间(以毫秒为单位)。
`options`	Object	<optional>	回调;在每次值更改时调用回调;在完成值更改时调用宽松的功能。注意，这个函数只有两个参数(currentTime, duration)。因此不能使用常规的动画缓动功能。附加功能与逻辑。如果返回true，则调用onComplete。动画选项属性名字类型属性描述 onChange 函数回调;在每次值更改时调用 onComplete 函数回调;在完成值更改时调用 colorEasing 函数宽松的功能。注意，这个函数只有两个参数(currentTime, duration)。因此不能使用常规的动画缓动功能。中止函数附加功能与逻辑。如果返回true，则调用onComplete。

Source:

fabric.js, line 3832

Returns:

abort function

Type: function

(static) applyTransformToObject(object, transform)

放弃对象转换状态并应用矩阵中的转换状态。

Parameters:

Name	Type	Description
`object`	fabric.Object	要变换的对象
`transform`	Array	目标变换

Source:

fabric.js, line 1743

(static) calcAngleBetweenVectors(a, b)

使用点积计算两个向量之间的夹角

Parameters:

Name	Type	Description
`a`	Point
`b`	Point

Source:

fabric.js, line 790

Returns:

the angle in radian between the vectors

(static) calcDimensionsMatrix(options) → {Array.<Number>}

返回从相同类型的对象开始的变换矩阵从qr分解返回的一个，如果你想计算一些也很有用从尚未激活的对象进行转换。叫做dimensionstrtransformmatrix因为这些属性会影响对象的结果框的大小。

Parameters:

Name	Type	Description
`options`	Object	属性名字类型属性描述 scaleX 数量写入scaleY 数量 flipX 布尔 flipY 布尔 skewX 数量 skewY 数量

Source:

fabric.js, line 1446

Returns:

transform matrix

Type: Array.<Number>

(static) calcRotateMatrix(options) → {Array.<Number>}

返回从相同类型的对象开始的变换矩阵从qr分解返回的一个，如果你想计算一些也很有用从尚未激活的对象进行转换

Parameters:

Name	Type	Description
`options`	Object	度数角属性名字类型属性描述角数量度数角

Source:

fabric.js, line 1419

Returns:

transform matrix

Type: Array.<Number>

(static) clearFabricFontCache(fontFamilyopt)

清除给定字体族的字符宽度缓存，如果没有，则清除所有缓存指定fontFamily。如果你知道你正在以一种懒惰的方式加载字体，并且你没有等待，那么使用它用于在向画布添加文本对象时正确加载自定义字体。如果一个文本对象在它自己的字体还没有加载的时候被添加，你就会出错测量和错误的边界框。清除字体缓存后，更改textObject文本内容或调用 initDimensions()触发重新计算

Parameters:

Name	Type	Attributes	Description
`fontFamily`	String	<optional>	要清除的字体族

Source:

fabric.js, line 1627

(static) composeMatrix(options) → {Array.<Number>}

返回从相同类型的对象开始的变换矩阵从qr分解返回的一个，如果你想计算一些也很有用从尚未激活的对象进行转换

Parameters:

Name	Type	Description
`options`	Object	属性名字类型属性描述角数量 scaleX 数量写入scaleY 数量 flipX 布尔 flipY 布尔 skewX 数量 skewX 数量 translateX 数量 translateY 数量

Source:

fabric.js, line 1491

Returns:

transform matrix

Type: Array.<Number>

(static) copyCanvasElement(canvas) → {CanvasElement}

创建一个画布元素，该元素是另一个元素的副本，并且也被绘制

Parameters:

Name	Type	Description
`canvas`	CanvasElement	复制…的大小和内容

Source:

fabric.js, line 1333

Returns:

initialized canvas element

Type: CanvasElement

(static) cos(angle) → {Number}

计算角度的余弦值，避免返回已知结果的浮点数

Parameters:

Name	Type	Description
`angle`	Number	角:以弧度或角度表示的角

Source:

fabric.js, line 644

Returns:

Type: Number

(static) createCanvasElement() → {CanvasElement}

创建画布元素

Source:

fabric.js, line 1322

Returns:

initialized canvas element

Type: CanvasElement

(static) createClass(parentopt, propertiesopt)

帮助创建“类”。

Parameters:

Name	Type	Attributes	Description
`parent`	function	<optional>	要继承的可选“类”
`properties`	Object	<optional>	由该类的所有实例共享的属性 (修改此处定义的对象时要小心，因为这会影响所有实例)

Source:

fabric.js, line 3044

(static) createImage() → {HTMLImageElement}

创建图像元素(适用于客户端和节点)

Source:

fabric.js, line 1360

Returns:

HTML image element

Type: HTMLImageElement

(static) degreesToRadians(degrees) → {Number}

将角度转换为弧度。

Parameters:

Name	Type	Description
`degrees`	Number	度值

Source:

fabric.js, line 716

Returns:

value in radians

Type: Number

(static) enlivenObjectEnlivables(object, contextopt)

创建驻留在对象中的相应结构实例。“clipPath”

Parameters:

Name	Type	Attributes	Description
`object`	Object
`context`	Object	<optional>	为该对象分配enlived props(传递null跳过此操作)

Source:

fabric.js, line 1213

See:

fabric.Object.ENLIVEN_PROPS

(static) enlivenObjects(objects, callback, namespace, reviver)

从它们的对象表示创建相应的结构实例

Parameters:

Name	Type	Description
`objects`	Array	对象要活泼
`callback`	function	在创建所有对象时调用的回调
`namespace`	String	命名空间来获取类"Class"对象
`reviver`	function	方法，用于进一步解析对象元素; 在创建每个fabric对象后调用。

Source:

fabric.js, line 1170

(static) enlivenPatterns(patterns, callback)

创建并等待模式的加载

Parameters:

Name	Type	Description
`patterns`	Array	对象要活泼
`callback`	function	在创建所有对象时调用的回调在创建每个fabric对象后调用。

Source:

fabric.js, line 1233

(static) falseFunction() → {Boolean}

函数总是返回' false '。

Source:

fabric.js, line 1016

Returns:

Type: Boolean

(static) findScaleToCover(source, destination) → {Number}

查找对象源覆盖整个对象目的地的比例，保持长宽比不变。尊重缓存的总允许区域。

Parameters:

Name	Type	Description
`source`	Object \| fabric.Object	对象的自然未缩放高度对象的自然未缩放宽度属性名字类型描述高度数量对象的自然未缩放高度宽度数量对象的自然未缩放宽度
`destination`	Object \| fabric.Object	对象的自然未缩放高度对象的自然未缩放宽度属性名字类型描述高度数量对象的自然未缩放高度宽度数量对象的自然未缩放宽度

Source:

fabric.js, line 1686

Returns:

scale factor to apply to source to cover destination

Type: Number

(static) findScaleToFit(source, destination) → {Number}

查找对象源的比例以适应对象目标，保持长宽比不变。尊重缓存的总允许区域。

Parameters:

Name	Type	Description
`source`	Object \| fabric.Object	对象的自然未缩放高度对象的自然未缩放宽度属性名字类型描述高度数量对象的自然未缩放高度宽度数量对象的自然未缩放宽度
`destination`	Object \| fabric.Object	对象的自然未缩放高度对象的自然未缩放宽度属性名字类型描述高度数量对象的自然未缩放高度宽度数量对象的自然未缩放宽度

Source:

fabric.js, line 1669

Returns:

scale factor to apply to source to fit into destination

Type: Number

(static) getBisector(A, B, C) → {Object}

Parameters:

Name	Type	Description
`A`	Point
`B`	Point
`C`	Point

Source:

fabric.js, line 812

Returns:

vector representing the bisector of A and A's angle

Type: Object

(static) getById(id) → {HTMLElement|null}

接受id并返回带有该id的元素(如果文档中存在该元素)

Parameters:

Name	Type	Description
`id`	String \| HTMLElement

Source:

fabric.js, line 3212

Returns:

Type: HTMLElement | null

(static) getElementOffset(element) → {Object}

返回给定元素的偏移量

Parameters:

Name	Type	Description
`element`	HTMLElement	要获得偏移量的元素

Source:

fabric.js, line 3344

Returns:

Object with "left" and "top" properties

Type: Object

(static) getHatVector(v) → {Point}

Parameters:

Name	Type	Description
`v`	Point

Source:

fabric.js, line 800

Returns:

vector representing the unit vector of pointing to the direction of `v`

Type: Point

(static) getKlass(type, namespace) → {Object}

返回给定命名空间的类"Class"对象

Parameters:

Name	Type	Description
`type`	String	对象的类型(例如:“圆”)
`namespace`	String	命名空间来获取类"Class"对象

Source:

fabric.js, line 1027

Returns:

klass "Class"

Type: Object

(static) getRandomInt(min, max) → {Number}

返回两个指定数字之间的随机数。

Parameters:

Name	Type	Description
`min`	Number	下限
`max`	Number	上限

Source:

fabric.js, line 705

Returns:

random value (between min and max)

Type: Number

(static) getScrollLeftTop(element) → {Object}

返回元素滚动偏移量

Parameters:

Name	Type	Description
`element`	HTMLElement	要操作的元素

Source:

fabric.js, line 3302

Returns:

Object with left/top values

Type: Object

(static) getSvgAttributes(type) → {Array}

返回fabric解析的给定svg的属性数组

Parameters:

Name	Type	Description
`type`	String	svg元素的类型(例如:“圆”)

Source:

fabric.js, line 1039

Returns:

string names of supported attributes

Type: Array

(static) groupSVGElements(elements, optionsopt, path) → {fabric.Object|fabric.Group}

对SVG元素进行分组(通常是从SVG文档中检索的元素)

Parameters:

Name	Type	Attributes	Description
`elements`	Array		SVG元素分组
`options`	Object	<optional>	选择对象
`path`	String		将sourcePath设置为的值

Source:

fabric.js, line 1274

Returns:

Type: fabric.Object | fabric.Group

(static) invertTransform(t) → {Array}

逆变换t

Parameters:

Name	Type	Description
`t`	Array	转换

Source:

fabric.js, line 952

Returns:

The inverted transform

Type: Array

(static) isTransparent(ctx, x, y, tolerance)

如果上下文具有透明像素则返回true 在指定位置(考虑公差)

Parameters:

Name	Type	Description
`ctx`	CanvasRenderingContext2D	上下文
`x`	Number	x坐标
`y`	Number	y坐标
`tolerance`	Number	宽容

Source:

fabric.js, line 1549

(static) joinPath(pathData) → {String}

连接路径命令返回到svg格式

Parameters:

Name	Type	Description
`pathData`	Array	fabricJS解析路径命令

Source:

fabric.js, line 2663

Returns:

joined path 'M 0 0 L 20 30'

Type: String

(static) limitDimsByArea(ar, maximumArea) → {Object.x|Object.y}

给定当前宽高比，确定可以的最大宽度和高度尊重缓存的总允许区域。

Parameters:

Name	Type	Description
`ar`	Number	纵横比
`maximumArea`	Number	你想达到的最大面积

Source:

fabric.js, line 1646

Returns:

Limited dimensions by X

Type

Object.x
Limited dimensions by Y

Type

Object.y

(static) loadImage(url, callback, contextopt, crossOriginopt)

从给定的url加载图像元素并将其传递给回调函数

Parameters:

Name	Type	Attributes	Description
`url`	String		表示图像的URL
`callback`	function		回调;用加载的图像调用
`context`	*	<optional>	上下文中调用回调
`crossOrigin`	Object	<optional>	设置图像元素的值

Source:

fabric.js, line 1090

(static) loadImageInDom(img, callback) → {Object}

将带有data: URL的SVG图像附加到dom

Parameters:

Name	Type	Description
`img`	Object	带有数据的图像对象:Image /svg src
`callback`	function	回调;用加载的图像调用

Source:

fabric.js, line 1141

Returns:

DOM element (div containing the SVG image)

Type: Object

(static) makeBoundingBoxFromPoints(points, transformopt) → {Object}

返回点的边界矩形的坐标(左，上，宽，高)

Parameters:

Name	Type	Attributes	Description
`points`	Array		四点阵列
`transform`	Array	<optional>	一个由6个数字组成的数组，表示2x3变换矩阵

Source:

fabric.js, line 922

Returns:

Object with left, top, width, height properties

Type: Object

(static) makeElement(tagName, attributesopt) → {HTMLElement}

创建具有指定属性的指定元素

Parameters:

Name	Type	Attributes	Description
`tagName`	String		要创建的元素类型
`attributes`	Object	<optional>	要在元素上设置的属性

Source:

fabric.js, line 3249

Returns:

Newly created element

Type: HTMLElement

(static) makeElementSelectable(element) → {HTMLElement}

使元素可选

Parameters:

Name	Type	Description
`element`	HTMLElement	元素使其可选

Source:

fabric.js, line 3439

Returns:

Element that was passed in

Type: HTMLElement

(static) makeElementUnselectable(element) → {HTMLElement}

使元素不可选择

Parameters:

Name	Type	Description
`element`	HTMLElement	元素使其不可选择

Source:

fabric.js, line 3420

Returns:

Element that was passed in

Type: HTMLElement

(static) matrixToSVG(transform) → {String|Object.y}

给定6个数字的数组返回类似于“矩阵(…数字)”的东西。“‘

Parameters:

Name	Type	Description
`transform`	Array	一个包含6个数字的数组

Source:

fabric.js, line 1697

Returns:

transform matrix for svg

Type

String
Limited dimensions by Y

Type

Object.y

(static) mergeClipPaths(c1, c2) → {fabric.Object}

将2个剪辑路径合并为一个视觉上相等的剪辑路径 * *重要* *:\ 不**不**克隆参数，必要时克隆它们。创建包含一个剪辑路径并被另一个剪辑路径剪辑的包装器(组)，以便内容保留在两者重叠的地方。如果两个剪辑路径可能都有它们自己的嵌套剪辑路径，因此无法将一个剪辑路径分配给另一个剪辑路径属性，则使用此方法。为了处理“倒置”属性，我们遵循以下情况下描述的逻辑 **(1)**两个剪辑路径都是反向的-剪辑路径将反向的道具传递给包装器并自己松散它 **(2)**一个是倒立的，另一个不是-包装不应该变成倒立的，倒立的剪辑路径必须夹住非倒立的剪辑路径，以产生相同的视觉效果 **(3)**两个剪辑路径都不是反向的-包装器和剪辑路径保持不变。

Parameters:

Name	Type	Description
`c1`	fabric.Object
`c2`	fabric.Object

Source:

fabric.js, line 1818

Returns:

merged clip path

Type: fabric.Object

(static) multiplyTransformMatrices(a, b, is2x2) → {Array}

矩阵A乘以矩阵B来嵌套变换

Parameters:

Name	Type	Description
`a`	Array	第一个transformMatrix
`b`	Array	第二个transformMatrix
`is2x2`	Boolean	标志矩阵相乘为2x2矩阵

Source:

fabric.js, line 1373

Returns:

The product of the two transform matrices

Type: Array

(static) parsePreserveAspectRatioAttribute(attribute) → {Object}

从元素中解析preserveAspectRatio属性

Parameters:

Name	Type	Description
`attribute`	string	待解析

Source:

fabric.js, line 1591

Returns:

an object containing align and meetOrSlice attribute

Type: Object

(static) parseUnit(value, fontSize) → {Number|String}

如果适用，将属性值转换为像素值。返回转换后的像素或未转换的原始值。

Parameters:

Name	Type	Description
`value`	Number \| String	手术编号
`fontSize`	Number

Source:

fabric.js, line 980

Returns:

Type: Number | String

(static) populateWithProperties(source, destination) → {Array}

用另一个对象的属性填充一个对象

Parameters:

Name	Type	Description
`source`	Object	源对象
`destination`	Object	目标物体

Source:

fabric.js, line 1306

Returns:

properties Properties names to include

Type: Array

(static) projectStrokeOnPoints(points, options, openPathopt) → {Array.<fabric.Point>}

投影点的描边宽度，每个点返回2个投影，如下所示: -“人字”:两个点对应笔画的外边界和内边界。 -“斜面”:对应斜面边界的2个点，与平分线相切。 - ' round ':与' bevel '相同用于计算对象的边界框

Parameters:

Name	Type	Attributes	Description
`points`	Array.<Point>
`options`	Object		https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit 属性名字类型描述 strokeWidth 数量 strokeLineJoin “斜” \| “斜” \| “圆” strokeMiterLimit 数量 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit strokeUniform 布尔 scaleX 数量写入scaleY 数量
`openPath`	boolean	<optional>	形状是否开放，影响第一个点和最后一个点的计算

Source:

fabric.js, line 843

Returns:

array of size 2n/4n of all suspected points

Type: Array.<fabric.Point>

(static) qrDecompose(a) → {Object}

将标准2x3矩阵分解为变换分量

Parameters:

Name	Type	Description
`a`	Array	transformMatrix

Source:

fabric.js, line 1392

Returns:

Components of transform

Type: Object

(static) radiansToDegrees(radians) → {Number}

将弧度转换为角度。

Parameters:

Name	Type	Description
`radians`	Number	弧度值

Source:

fabric.js, line 727

Returns:

value in degrees

Type: Number

(static) removeFromArray(array, value) → {Array}

从数组中移除值。值的存在(及其在数组中的位置)是通过' array .prototype. indexof '来确定的

Parameters:

Name	Type	Description
`array`	Array
`value`	*

Source:

fabric.js, line 689

Returns:

original array

Type: Array

(static) removeListener(element, eventName, handler)

从元素中删除事件侦听器

Parameters:

Name	Type	Description
`element`	HTMLElement
`eventName`	String
`handler`	function

Source:

fabric.js, line 3102

(static) removeTransformFromObject(object, transform)

给定一个对象和一个变换，对这个对象应用逆变换，这等价于从那个对象移除那个变换，所以在移除变换后的空间中添加，对象将与之前相同。从一个对象移除缩放2的变换就像缩放1/2。从一个物体上移去一个旋转30度的位移就像旋转了30度相反的方向。此工具用于在转换后的组或嵌套组中添加对象。

Parameters:

Name	Type	Description
`object`	fabric.Object	要变换的对象
`transform`	Array	目标变换

Source:

fabric.js, line 1715

(static) request(url, optionsopt) → {XMLHttpRequest}

发送XMLHttpRequest的跨浏览器抽象

Parameters:

Name	Type	Attributes	Description
`url`	String		将XMLHttpRequest发送到的URL
`options`	Object	<optional>	在GET或body中附加到url的参数与POST或PUT请求一起发送的请求完成时要调用的回调选择对象属性名字类型属性默认的描述方法字符串 “获得” 参数字符串在GET或body中附加到url的参数身体字符串与POST或PUT请求一起发送的 onComplete 函数请求完成时要调用的回调

Source:

fabric.js, line 3523

Returns:

request

Type: XMLHttpRequest

(static) requestAnimFrame(callback, element)

requestAnimationFrame polyfill基于http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 为了获得精确的开始时间，应该调用' requestAnimFrame '作为方法的入口

Parameters:

Name	Type	Description
`callback`	function	要调用的回调
`element`	DOMElement	与动画关联的可选元素

Source:

fabric.js, line 3789

(static) resetObjectTransform(target)

将对象转换状态重置为中性。上面和左边没有考虑

Parameters:

Name	Type	Description
`target`	fabric.Object	要转换的对象

Source:

fabric.js, line 1510

(static) resolveNamespace(namespace) → {Object}

返回给定命名空间的对象

Parameters:

Name	Type	Description
`namespace`	String	命名空间字符串。“fabric.Image。“过滤器”或“织物”

Source:

fabric.js, line 1066

Returns:

Object for given namespace (default fabric)

Type: Object

(static) rotatePoint(point, origin, radians) → {fabric.Point}

用弧度围绕原点旋转“点”

Parameters:

Name	Type	Description
`point`	fabric.Point	要旋转的点
`origin`	fabric.Point	旋转的原点
`radians`	Number	旋转角度的弧度

Source:

fabric.js, line 740

Returns:

The new rotated point

Type: fabric.Point

(static) rotateVector(vector, radians) → {Object}

用“弧度”旋转“矢量”

Parameters:

Name	Type	Description
`vector`	Object	要旋转的向量(x和y)
`radians`	Number	旋转角度的弧度

Source:

fabric.js, line 754

Returns:

The new rotated point

Type: Object

(static) saveObjectTransform(target) → {Object}

提取对象变换值

Parameters:

Name	Type	Description
`target`	fabric.Object	要读取的对象

Source:

fabric.js, line 1527

Returns:

Components of transform

Type: Object

(static) setStyle(element, styles) → {HTMLElement}

用于设置元素样式的跨浏览器包装器

Parameters:

Name	Type	Description
`element`	HTMLElement
`styles`	Object

Source:

fabric.js, line 3139

Returns:

Element that was passed as a first argument

Type: HTMLElement

(static) sin(angle) → {Number}

计算角度的正弦值，避免返回已知结果的浮点数

Parameters:

Name	Type	Description
`angle`	Number	角:以弧度或角度表示的角

Source:

fabric.js, line 665

Returns:

Type: Number

(static) sizeAfterTransform(width, height, options) → {Object.x|Object.y}

给定宽度和高度，返回边界框的大小它可以包含应用了变换的具有宽度/高度的框在选项中描述。用于计算控件对象周围的方框。

Parameters:

Name	Type	Description
`width`	Number
`height`	Number
`options`	Object	属性名字类型描述 scaleX 数量写入scaleY 数量 skewX 数量 skewY 数量

Source:

fabric.js, line 1772

Returns:

width of containing

Type

Object.x
height of containing

Type

Object.y

(static) toArray(arrayLike) → {Array}

将类数组对象(如arguments或NodeList)转换为数组

Parameters:

Name	Type	Description
`arrayLike`	Object

Source:

fabric.js, line 3223

Returns:

Type: Array

(static) toDataURL(canvasEl, format, quality) → {String}

自2.6.0以来，从画布实例移动到实用程序。

Parameters:

Name	Type	Description
`canvasEl`	CanvasElement	复制…的大小和内容
`format`	String	'jpeg'或'png'，在某些浏览器中'webp'也可以
`quality`	Number	0

Source:

fabric.js, line 1350

Returns:

data url

Type: String

(static) toFixed(number, fractionDigits) → {Number}

number# toFixed的包装器，与本机方法相反，它返回数字，而不是字符串。

Parameters:

Name	Type	Description
`number`	Number \| String	手术编号
`fractionDigits`	Number	要“留下”的分数位数

Source:

fabric.js, line 969

Returns:

Type: Number

(static) transformPoint(p, t, ignoreOffsetopt) → {fabric.Point}

对点p应用变换t

Parameters:

Name	Type	Attributes	Description
`p`	fabric.Point		要变换的点
`t`	Array		转换
`ignoreOffset`	Boolean	<optional>	指示不应用偏移量

Source:

fabric.js, line 903

Returns:

The transformed point

Type: fabric.Point

(static) wrapElement(element, wrapper, attributesopt) → {HTMLElement}

用另一个元素包裹一个元素

Parameters:

Name	Type	Attributes	Description
`element`	HTMLElement		要包装的元素
`wrapper`	HTMLElement \| String		元素进行换行
`attributes`	Object	<optional>	要在包装器上设置的属性

Source:

fabric.js, line 3285

Returns:

wrapper

Type: HTMLElement

Type Definitions

Point

从表示为点的点创建一个矢量

Type:

Object

Properties:

Name	Type	Description
`x`	number
`y`	number

Source:

fabric.js, line 765

在线工具

快捷菜单 返回顶部