new Object()
所有2d形状类都从其继承的根对象类
- Source:
- Tutorials:
- See:
-
- fabric.Object#initialize for constructor definition
Fires:
- event:added
- event:removed
- event:selected
- event:deselected
- event:modified
- event:modified
- event:moved
- event:scaled
- event:rotated
- event:skewed
- event:rotating
- event:scaling
- event:moving
- event:skewing
- event:mousedown
- event:mouseup
- event:mouseover
- event:mouseout
- event:mousewheel
- event:mousedblclick
- event:dragover
- event:dragenter
- event:dragleave
- event:drop
Members
(static) __uid :Number
创建SVG元素时在内部使用的唯一id
Type:
- Number
- Source:
(static, constant) ENLIVEN_PROPS :Array.<string>
定义应该从传递给fabric.Object._fromObject的对象激活哪些属性
Type:
- Array.<string>
- Source:
(static, constant) NUM_FRACTION_DIGITS :Number
定义序列化对象值时要使用的分数位数。
您可以使用它来增加/减少诸如left, top, scaleX, scaleY等值的精度。
Type:
- Number
- Source:
__corner :number|string|any
在鼠标移动期间保持最后一个悬停角的值。
0没有角,或者'mt', 'ml', 'mtr'等。
它应该是私人的,但把它当作
只读属性。
Type:
- number | string | any
- Default Value:
-
- 0
- Source:
absolutePositioned :boolean
只有当对象用作clipPath时才有意义。
如果为true,则clipPath的顶部和左侧相对于画布
不受对象变换的影响。这将使clipPath相对
到画布,但是只裁剪一个特定的对象。
警告:这是测试版,此功能可能会更改或重命名。
自从测试盒框
Type:
- boolean
- Default Value:
-
- false
- Source:
aCoords
在画布对象绝对坐标中描述对象的角位置
属性是tl,tr,bl,br和描述四个主要角。
每个属性都是一个对象,有x, y, Fabric.Point的实例。
坐标取决于以下属性:宽度,高度,scaleX, scaleY
skewX, skewY, angle, strokeWidth, top, left。
这些坐标对于了解物体的位置很有用。它们会更新
使用ocoord,但是当缩放或平移改变时,它们不需要更新。
坐标通过@method setcoord得到更新。
你可以使用@method calcACoords()计算它们而不需要更新;
- Source:
angle :Number
物体的旋转角度(以度为单位)
Type:
- Number
- Source:
backgroundColor :String
对象的背景颜色。
取css颜色https://www.w3.org/TR/css-color-3/
Type:
- String
- Source:
borderColor :String
控制对象边界的颜色(当它处于活动状态时)
Type:
- String
- Default Value:
-
- rgb(178,204,255)
- Source:
borderDashArray :Array
指定对象边界的破折号模式的数组(hasBorder必须为true)
Type:
- Array
- Since:
-
- 1.6.2
- Source:
borderOpacityWhenMoving :Number
当物体处于活动和移动状态时,物体控制边界的不透明度
Type:
- Number
- Default Value:
-
- 0.4
- Source:
borderScaleFactor :Number
对象控制边界的比例因子
数字越大边框越粗
Border是1,这是边框的厚度
因为没有办法改变边界本身。
Type:
- Number
- Default Value:
-
- 1
- Source:
cacheProperties :Array
检查缓存是否需要刷新时要考虑的属性列表
这些属性通过statfullcache ON(或者我们想要的惰性模式)或从single检查
调用对象。集(关键字,值)。如果键在此列表中,则该对象被标记为脏对象
并在下一次渲染时刷新
Type:
- Array
- Source:
centeredRotation :Boolean
当为true时,该对象将使用中心点作为转换的原点
当通过控件旋转时。
向后不兼容注意:此属性取代"centerTransform"(布尔值)。
Type:
- Boolean
- Since:
-
- 1.3.4
- Default Value:
-
- true
- Source:
centeredScaling :Boolean
当为true时,该对象将使用中心点作为转换的原点
当通过控件缩放时。
向后不兼容注意:此属性取代"centerTransform"(布尔值)。
Type:
- Boolean
- Since:
-
- 1.3.4
- Source:
clipPath :fabric.Object
一个没有描边的fabricObject,用它们的形状定义一个裁剪区域。用黑色填充
clipPath对象在对象呈现完毕时使用,并且上下文被放置在中心位置
对象cacheccanvas。
如果您希望clipPath的0,0与对象中心对齐,请使用clipPath。originX/Y到'center'
Type:
- Source:
colorProperties :Array
动画颜色时要考虑的属性列表。
Type:
- Array
- Source:
controls
自定义控件界面
控件由default_controls.js添加
- Source:
cornerColor :String
对象控制角的颜色(当它处于活动状态时)
Type:
- String
- Default Value:
-
- rgb(178,204,255)
- Source:
cornerDashArray :Array
指定对象控件的破折号模式的数组(hasBorder必须为true)
Type:
- Array
- Since:
-
- 1.6.2
- Source:
cornerSize :Number
对象控制角的大小(以像素为单位)
Type:
- Number
- Default Value:
-
- 13
- Source:
cornerStrokeColor :String
对象控制角的颜色(当它处于活动状态且为transparentCorners false时)
Type:
- String
- Since:
-
- 1.6.2
- Source:
cornerStyle :String
指定控件样式,“矩形”或“圆形”
Type:
- String
- Since:
-
- 1.6.2
- Source:
dirty :Boolean
当设置为“true”时,对象的缓存将在下一次渲染调用中重新渲染。
自从1.7.0
Type:
- Boolean
- Default Value:
-
- true
- Source:
evented :Boolean
当设置为“false”时,对象不能成为事件的目标。所有事件都通过它传播。在v1.3.4中引入
Type:
- Boolean
- Default Value:
-
- true
- Source:
excludeFromExport :Boolean
当' true '时,object不会在object /JSON中导出
Type:
- Boolean
- Since:
-
- 1.6.3
- Source:
fill :String
物体填充的颜色
取css颜色https://www.w3.org/TR/css-color-3/
Type:
- String
- Default Value:
-
- rgb(0,0,0)
- Source:
fillRule :String
填充规则,用于填充对象
可接受的值是非零、偶奇
向后不兼容注意:此属性在v1.4.12之前用于设置globalCompositeOperation(使用' fabric. info ')。对象# globalCompositeOperation '而不是)
Type:
- String
- Default Value:
-
- nonzero
- Source:
flipX :Boolean
当为true时,对象呈现为水平翻转
Type:
- Boolean
- Source:
flipY :Boolean
当为true时,对象呈现为垂直翻转
Type:
- Boolean
- Source:
globalCompositeOperation :String
用于画布的复合规则
Type:
- String
- Default Value:
-
- source-over
- Source:
hasBorders :Boolean
当设置为“false”时,不渲染对象的控制边界
Type:
- Boolean
- Default Value:
-
- true
- Source:
hasControls :Boolean
当设置为' false '时,对象的控件不显示,并且不能用于操作对象
Type:
- Boolean
- Default Value:
-
- true
- Source:
height :Number
对象的高度
Type:
- Number
- Source:
hoverCursor :String
当鼠标悬停在画布上的对象上时使用的默认光标值
Type:
- String
- Source:
includeDefaultValues :Boolean
当' false '时,默认对象的值不包含在其序列化中
Type:
- Boolean
- Default Value:
-
- true
- Source:
inverted :boolean
只有当对象用作clipPath时才有意义。
如果为true,则该clipPath将使对象剪辑到clipPath的外部
自从测试盒框
Type:
- boolean
- Default Value:
-
- false
- Source:
left :Number
对象的左侧位置。注意,默认情况下它是相对于左对象的。你可以通过设置originX={left/center/right}来改变它
Type:
- Number
- Source:
lineCoords
在画布元素坐标中描述对象的角位置。
包括填充。用于对象检测。
设置并使用setcoord刷新。
- Source:
lockMovementX :Boolean
当为true时,对象水平移动被锁定
Type:
- Boolean
- Source:
lockMovementY :Boolean
当为true时,对象的垂直移动被锁定
Type:
- Boolean
- Source:
lockRotation :Boolean
当为true时,对象旋转被锁定
Type:
- Boolean
- Source:
lockScalingFlip :Boolean
当为true时,对象不能通过缩放为负值来翻转
Type:
- Boolean
- Source:
lockScalingX :Boolean
当为true时,对象水平缩放被锁定
Type:
- Boolean
- Source:
lockScalingY :Boolean
当为true时,对象垂直缩放被锁定
Type:
- Boolean
- Source:
lockSkewingX :Boolean
当为true时,对象水平倾斜被锁定
Type:
- Boolean
- Source:
lockSkewingY :Boolean
当为true时,对象垂直倾斜被锁定
Type:
- Boolean
- Source:
matrixCache
存储对象的完整变换矩阵
- Source:
minScaleLimit :Number
对象的最小允许缩放值
Type:
- Number
- Source:
moveCursor :String
在画布上移动此对象时使用的默认游标值
Type:
- String
- Source:
noScaleCache :Boolean
当为true时,缓存在扩展期间不会更新。如果缩放,这幅画会变得块状
太多,将在缩放结束时用正确的细节重新绘制。
此设置依赖于性能和应用程序。
默认为true
自从1.7.0
Type:
- Boolean
- Default Value:
-
- true
- Source:
objectCaching :Boolean
当为true时,对象被缓存在另一个画布上。
当' false '时,对象不缓存,除非必要(clipPath)
默认为true
Type:
- Boolean
- Since:
-
- 1.7.0
- Default Value:
-
- true
- Source:
oCoords
在画布元素坐标中描述对象的角位置。
属性依赖于控制键和填充主控件。
每个属性都是一个具有x, y和角的对象。
' corner '属性以类似的方式包含
角落的互动区域。
坐标依赖于控件positionHandler并被使用
绘制和定位控件
- Source:
opacity :Number
对象的不透明度
Type:
- Number
- Default Value:
-
- 1
- Source:
originX :String
对象转换的水平原点(“左”、“右”、“中”之一)
请参阅http://jsfiddle.net/1ow02gea/244/了解originX/originY如何影响组中的对象
Type:
- String
- Default Value:
-
- left
- Source:
originY :String
对象变换的垂直原点(“顶”、“底”、“中”之一)
请参阅http://jsfiddle.net/1ow02gea/244/了解originX/originY如何影响组中的对象
Type:
- String
- Default Value:
-
- top
- Source:
ownMatrixCache
存储对象变换矩阵
- Source:
padding :Number
对象与其控制边界之间的填充(以像素为单位)
Type:
- Number
- Source:
paintFirst :String
确定是先绘制填充还是描边("fill"或"stroke"中的一个)
Type:
- String
- Default Value:
-
- fill
- Source:
perPixelTargetFind :Boolean
当设置为“true”时,对象是按像素在画布上“找到”的,而不是根据边界框
Type:
- Boolean
- Source:
scaleX :Number
物体比例因子(水平)
Type:
- Number
- Default Value:
-
- 1
- Source:
scaleY :Number
物体比例因子(垂直)
Type:
- Number
- Default Value:
-
- 1
- Source:
selectable :Boolean
当设置为“false”时,不能选择对象进行修改(使用基于点点击或基于组的选择)。
但事件仍在发生。
Type:
- Boolean
- Default Value:
-
- true
- Source:
selectionBackgroundColor :String
选择对象的背景颜色。当对象处于活动状态时,它后面的彩色图层。
不能很好地与globalCompositeOperation方法混合使用。
Type:
- String
- Source:
shadow :fabric.Shadow
表示此形状的阴影的阴影对象
Type:
- Source:
skewX :Number
物体在x轴上的倾斜角(以度为单位)
Type:
- Number
- Source:
skewY :Number
物体y轴上的倾斜角(以度为单位)
Type:
- Number
- Source:
statefullCache :Boolean
当' true '时,将检查对象属性是否缓存无效。在某些方面
您可能希望禁用此功能的情况(喷雾刷,非常大,组)
或者如果您的应用程序不允许您修改您想要的组子的属性
为组禁用它。
默认为false
自从1.7.0
Type:
- Boolean
- Default Value:
-
- false
- Source:
stateProperties :Array
检查if状态时要考虑的属性列表
(fabric. object# hasstatechange)
以及用于历史(撤销/重做)目的
Type:
- Array
- Source:
stroke :String
定义后,对象通过描边呈现,此属性指定其颜色
取css颜色https://www.w3.org/TR/css-color-3/
Type:
- String
- Source:
strokeDashArray :Array
指定对象笔画的破折号模式的数组(必须定义笔画)
Type:
- Array
- Source:
strokeDashOffset :Number
对象笔画的线偏移量
Type:
- Number
- Source:
strokeLineCap :String
对象笔画的行尾样式(“尾”、“圆”、“方”之一)
Type:
- String
- Default Value:
-
- butt
- Source:
strokeLineJoin :String
对象描边的角样式("bevel", "round", "miter"之一)
Type:
- String
- Default Value:
-
- miter
- Source:
strokeMiterLimit :Number
对象笔画的最大斜接长度(用于strokeLineJoin = "斜接")
Type:
- Number
- Default Value:
-
- 4
- Source:
strokeUniform :Boolean
当为“false”时,斯托克宽度将随对象缩放。
当为true时,笔画将始终与输入笔画宽度的精确像素大小相匹配。
此属性不适用于使用strokeText,fillText方法的文本类或绘图调用
默认为false
Type:
- Boolean
- Since:
-
- 2.6.0
- Default Value:
-
- false
- Source:
strokeWidth :Number
用于渲染此对象的描边宽度
Type:
- Number
- Default Value:
-
- 1
- Source:
top :Number
对象的顶部位置。注意,默认情况下它是相对于对象top的。你可以通过设置originY={top/center/bottom}来改变它
Type:
- Number
- Source:
touchCornerSize :Number
当检测到触摸交互时,对象控制角的大小
Type:
- Number
- Default Value:
-
- 24
- Source:
transparentCorners :Boolean
当为true时,对象的控制角被渲染为透明的内部(即描边而不是填充)
Type:
- Boolean
- Default Value:
-
- true
- Source:
type :String
对象的类型(矩形、圆形、路径等)。
注意,这个属性是只读的,不能修改。
如果进行修改,Fabric的某些部分(如JSON加载)将无法正常工作。
Type:
- String
- Default Value:
-
- object
- Source:
visible :Boolean
当设置为“false”时,对象不会在画布上渲染
Type:
- Boolean
- Default Value:
-
- true
- Source:
width :Number
对象的宽度
Type:
- Number
- Source:
Methods
_calcRotateMatrix() → {Array}
计算对象的旋转矩阵
- Source:
Returns:
rotation matrix for the object
- Type
- Array
_calcTranslateMatrix() → {Array}
计算对象变换的平移矩阵
- Source:
Returns:
rotation matrix for the object
- Type
- Array
_drawClipPath(ctx, clipPath)
准备clipPath状态和缓存,并在实例的缓存上绘制它
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | |
clipPath |
fabric.Object |
- Source:
_getCoords(absolute) → {Object}
返回交点的正确坐标集
这将返回acoord或linecoord。
Parameters:
Name | Type | Description |
---|---|---|
absolute |
Boolean | 如果为true或lineCoords |
- Source:
Returns:
{tl, tr, br, bl} points
- Type
- Object
_limitCacheSize(dims) → {Object|Object|Object|Object}
限制缓存尺寸,使X * Y不跨越fabric.perfLimitSizeTotal
并且每条边都不跨越fabric.cacheSideLimit
这些数字是可配置的,因此您可以获得尽可能多的细节
与演出讨价还价。
Parameters:
Name | Type | Description |
---|---|---|
dims |
Object | 帆布宽度帆布高度zoomX缩放值用于在绘制缓存之前取消画布的缩放缩放值用于在绘制缓存之前取消画布的缩放 属性 名字 类型 描述 宽度 对象 帆布宽度 高度 对象 帆布高度 zoomX 对象 zoomX缩放值用于在绘制缓存之前取消画布的缩放 利用促镜拍摄的 对象 缩放值用于在绘制缓存之前取消画布的缩放 |
- Source:
Returns:
-
.width width of canvas
- Type
- Object
-
.height height of canvas
- Type
- Object
-
.zoomX zoomX zoom value to unscale the canvas before drawing cache
- Type
- Object
-
.zoomY zoomY zoom value to unscale the canvas before drawing cache
- Type
- Object
_removeCacheCanvas()
从对象中移除cacheccanvas及其维度
- Source:
_renderControls(ctx, styleOverrideopt)
渲染对象的控件和边框
这里的上下文没有被转换
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
ctx |
CanvasRenderingContext2D | 要渲染的上下文 | |
styleOverride |
Object |
<optional> |
属性来覆盖对象样式 |
- Source:
_setupCompositeOperation(ctx)
为特定对象设置画布globalCompositeOperation
可以使用globalCompositeOperation属性指定特定对象的自定义组合操作
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 渲染画布上下文 |
- Source:
adjustPosition(to)
Parameters:
Name | Type | Description |
---|---|---|
to |
String | 左,中,右中的一个 |
- Source:
animate(property, value) → {fabric.Object|fabric.AnimationContext|Array.<fabric.AnimationContext>}
动画对象的属性
Parameters:
Name | Type | Description |
---|---|---|
property |
String | Object | 动画属性(if string)或动画属性(if object) |
value |
Number | Object | 动画属性的值(如果先给出字符串)或选项对象 |
- Source:
- Tutorials:
Returns:
-
thisArg
- Type
- fabric.Object
-
animation context (or an array if passed multiple properties) As object — multiple properties object.animate({ left: ..., top: ... }); object.animate({ left: ..., top: ... }, { duration: ... }); As string — one property object.animate('left', ...); object.animate('left', { duration: ... });
- Type
- fabric.AnimationContext | Array.<fabric.AnimationContext>
bringForward(intersectingopt) → {fabric.Object}
在绘制的对象堆栈中向上移动一个对象
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
intersecting |
Boolean |
<optional> |
如果' true ',则将对象发送到下一个上部相交对象的前面 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
bringToFront() → {fabric.Object}
将一个对象移动到绘制对象堆栈的顶部
- Source:
Returns:
thisArg
- Type
- fabric.Object
calcOwnMatrix() → {Array}
计算表示从的当前变换的变换矩阵
对象的属性,这个矩阵不包括群变换
- Source:
Returns:
transform matrix for the object
- Type
- Array
calcTransformMatrix(skipGroupopt) → {Array}
计算表示从的当前变换的变换矩阵
对象的属性。
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
skipGroup |
Boolean |
<optional> |
返回对象的变换矩阵,不包括父变换 在某些情况下,这有助于避免假旋转。 |
- Source:
Returns:
transform matrix for the object
- Type
- Array
center() → {fabric.Object}
对象在最后添加到的画布上垂直和水平居中
你可能需要在定心之后在一个对象上调用setcoord来更新控件区域。
- Source:
Returns:
thisArg
- Type
- fabric.Object
centerH() → {fabric.Object}
将对象水平居中于最后添加到的画布上。
你可能需要在定心之后在一个对象上调用setcoord来更新控件区域。
- Source:
Returns:
thisArg
- Type
- fabric.Object
centerV() → {fabric.Object}
将对象垂直放置在最后添加到的画布上。
你可能需要在定心之后在一个对象上调用setcoord来更新控件区域。
- Source:
Returns:
thisArg
- Type
- fabric.Object
clone(callback, propertiesToIncludeopt)
克隆一个实例,使用回调方法将适用于每个对象。
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
function | 使用克隆作为第一个参数调用回调 | |
propertiesToInclude |
Array |
<optional> |
您可能希望在输出中额外包含的任何属性 |
- Source:
cloneAsImage(callback, optionsopt) → {fabric.Object}
创建fabric实例。一个物体的图像
使用toCanvasElement。
一旦这个方法是基于toDataUrl和loadImage,那么它也有一个质量
和格式选项。toCanvasElement更快,并且不会产生质量损失。
如果您需要从对象中获取真正的Jpeg或Png,那么使用toDataURL是正确的方法。
toCanvasElement,然后从获得的画布toBlob也是一个不错的选择。
这个方法现在是同步的,但仍然支持回调,因为我们不想中断。
当计划发布fabricJS 5.0时,这可能会被更改为没有回调。
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
function | 回调,使用实例作为第一个参数调用 | |
options |
Object |
<optional> |
乘数乘以裁剪左偏移。在v1.2.14中引入裁剪顶部偏移。在v1.2.14中引入裁剪宽度。在v1.2.14中引入种植的高度。在v1.2.14中引入启用视网膜缩放克隆图像。1.6.4引入移除当前对象变换(无缩放、无角度、无翻转、无倾斜)。在2.3.4中引入移除当前对象阴影。2.4.2引入将克隆作为图像传递给toDataURL 属性 名字 类型 属性 默认的 描述 乘数 数量 1 乘数乘以 左 数量 裁剪左偏移。在v1.2.14中引入 前 数量 裁剪顶部偏移。在v1.2.14中引入 宽度 数量 裁剪宽度。在v1.2.14中引入 高度 数量 种植的高度。在v1.2.14中引入 enableRetinaScaling 布尔 启用视网膜缩放克隆图像。1.6.4引入 withoutTransform 布尔 移除当前对象变换(无缩放、无角度、无翻转、无倾斜)。在2.3.4中引入 withoutShadow 布尔 移除当前对象阴影。2.4.2引入 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
complexity() → {Number}
返回实例的复杂度
- Source:
Returns:
complexity of this instance (is 1 unless subclassed)
- Type
- Number
containsPoint(point, linesopt, absoluteopt, calculateopt) → {Boolean}
检查point是否在对象内部
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
point |
fabric.Point | 指向核对 | |
lines |
Object |
<optional> |
从@method _getImageLines返回的对象 |
absolute |
Boolean |
<optional> |
使用不带viewportTransform的坐标 |
calculate |
Boolean |
<optional> |
使用当前位置的坐标而不是。ocoordinates |
- Source:
Returns:
true if point is inside the object
- Type
- Boolean
dispose()
取消实例的运行动画
- Source:
drawBorders(ctx, styleOverride) → {fabric.Object}
绘制对象的边界框的边界。
需要公共属性:宽度,高度
需要公共选项:padding, borderColor
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要借鉴的背景 |
styleOverride |
Object | 对象来覆盖对象样式 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
drawBordersInGroup(ctx, options, styleOverride) → {fabric.Object}
当对象处于组中时,绘制对象的边界框的边界。
需要公共属性:宽度,高度
需要公共选项:padding, borderColor
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要借鉴的背景 |
options |
object | 对象,表示当前对象参数 |
styleOverride |
Object | 对象来覆盖对象样式 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
drawCacheOnCanvas(ctx)
在目标上下文中绘制对象的缓存副本。
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要渲染的上下文 |
- Source:
drawClipPathOnCache(ctx, clipPath)
执行对象clipPath的绘图操作
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要渲染的上下文 |
clipPath |
fabric.Object |
- Source:
drawControls(ctx, styleOverride) → {fabric.Object}
绘制对象边界框的角。
需要公共属性:宽度,高度
需要公共选项:cornerSize, padding
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要借鉴的背景 |
styleOverride |
Object | 对象来覆盖对象样式 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
drawObject(ctx)
在指定的上下文中对对象执行绘图操作
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要渲染的上下文 |
- Source:
drawSelectionBackground(ctx) → {fabric.Object}
在对象后面的选择边界内绘制一个彩色图层。
需要公共选项:padding, selectionBackgroundColor
在转换上下文时调用此函数
当对象在静态画布上时,是否有检查要跳过
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要借鉴的背景 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
forEachControl(fn)
为每个控件调用一个函数。函数被调用,
对于控件,调用迭代器的对象和控件的键
Parameters:
Name | Type | Description |
---|---|---|
fn |
function | 函数来迭代控件 |
- Source:
fxStraighten(callbacks) → {fabric.Object}
与fabric. object .prototype.straight相同,但带有动画
Parameters:
Name | Type | Description |
---|---|---|
callbacks |
Object | 完成时调用在动画的每一步调用具有回调函数的对象 属性 名字 类型 属性 描述 onComplete 函数 完成时调用 onChange 函数 在动画的每一步调用 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
getBoundingRect(absoluteopt, calculateopt) → {Object}
返回对象的边界矩形的坐标(左,上,宽,高)
该框要与画布的轴线对齐。
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
absolute |
Boolean |
<optional> |
使用不带viewportTransform的坐标 |
calculate |
Boolean |
<optional> |
使用当前位置的坐标,而不是. ocoordinates / . acoord |
- Source:
Returns:
Object with left, top, width, height properties
- Type
- Object
getCenterPoint() → {fabric.Point}
返回对象的真实中心坐标
- Source:
Returns:
- Type
- fabric.Point
getCoords() → {Array}
返回交点的正确坐标集
这将返回acoord或linecoord。
字符串以数组形式返回。
- Source:
Returns:
[tl, tr, br, bl] of points
- Type
- Array
getLocalPointer(e, pointeropt) → {Object}
返回指针相对于对象的坐标
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
e |
Event | 要操作的事件 | |
pointer |
Object |
<optional> |
要操作的指针(而不是事件) |
- Source:
Returns:
Coordinates of a pointer (x, y)
- Type
- Object
getObjectOpacity() → {Number}
返回对象的不透明度计数和组属性
- Source:
Returns:
- Type
- Number
getObjectScaling() → {Object}
返回对象缩放因子计数以及组缩放
- Source:
Returns:
object with scaleX and scaleY properties
- Type
- Object
getPointByOrigin(originX, originY) → {fabric.Point}
返回对象的坐标,就好像它有不同的原点一样
Parameters:
Name | Type | Description |
---|---|---|
originX |
String | 水平原点:“左”、“中”或“右” |
originY |
String | 垂直原点:'top', 'center'或'bottom' |
- Source:
Returns:
- Type
- fabric.Point
getScaledHeight() → {Number}
返回计算转换的对象边界框的高度
在2.0之前,它被命名为getHeight();
- Source:
Returns:
height value
- Type
- Number
getScaledWidth() → {Number}
返回对象的边界框计数转换的宽度
在2.0之前,它被命名为getWidth();
- Source:
Returns:
width value
- Type
- Number
getSvgCommons() → {String}
返回svg输出的id属性
- Source:
Returns:
- Type
- String
getSvgFilter() → {String}
返回svg阴影滤镜
- Source:
Returns:
- Type
- String
getSvgSpanStyles(style, useWhiteSpace) → {String}
返回svg-export的样式字符串
Parameters:
Name | Type | Description |
---|---|---|
style |
Object | 要从中检索样式属性的对象 |
useWhiteSpace |
Boolean | 布尔值,用于在样式中包含附加属性。 |
- Source:
Returns:
- Type
- String
getSvgStyles(skipShadow) → {String}
返回svg-export的样式字符串
Parameters:
Name | Type | Description |
---|---|---|
skipShadow |
Boolean | 跳过阴影过滤器输出的布尔值 |
- Source:
Returns:
- Type
- String
getSvgTextDecoration(style) → {String}
返回svg-export的文本装饰属性
Parameters:
Name | Type | Description |
---|---|---|
style |
Object | 要从中检索样式属性的对象 |
- Source:
Returns:
- Type
- String
getSvgTransform(use) → {String}
返回svg导出的转换字符串
Parameters:
Name | Type | Description |
---|---|---|
use |
Boolean | 完整的变换或者单个对象的变换。 |
- Source:
Returns:
- Type
- String
getTotalObjectScaling() → {Object}
返回对象缩放因子计数以及组缩放、缩放和视网膜
- Source:
Returns:
object with scaleX and scaleY properties
- Type
- Object
getViewportTransform() → {Array}
如果可能的话,从对象的画布中检索viewportTransform
- Source:
Returns:
- Type
- Array
hasFill()
如果对象要绘制填充,则返回true
不考虑文本样式。这只是在渲染时使用的快捷方式
我们希望它是一个近似值,而且要快。
为了避免额外的缓存,它必须在填充发生时返回true,
能以100%的几率猜出什么时候不会发生,错过了也没关系
一些用例中填充是不可见的。
- Since:
-
- 3.0.0
- Source:
Returns:
Boolean
hasStateChanged(propertySetopt) → {Boolean}
如果对象状态(它的状态属性之一)被改变,返回true
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
propertySet |
String |
<optional> |
要保存的属性集的可选名称 |
- Source:
Returns:
true if instance' state has changed since `fabric.Object#saveState` was called
- Type
- Boolean
hasStroke()
如果对象将绘制笔画,则返回true
不考虑文本样式。这只是在渲染时使用的快捷方式
我们希望它是一个近似值,而且要快。
为了避免额外的缓存,它必须在笔划发生时返回true,
能以100%的几率猜出什么时候不会发生,错过了也没关系
在某些用例中,笔画是不可见的。
- Since:
-
- 3.0.0
- Source:
Returns:
Boolean
initialize(optionsopt)
构造函数
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
Object |
<optional> |
选择对象 |
- Source:
intersectsWithObject(other, absoluteopt, calculateopt) → {Boolean}
检查对象是否与另一个对象相交
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
other |
Object | 测试对象 | |
absolute |
Boolean |
<optional> |
使用不带viewportTransform的坐标 |
calculate |
Boolean |
<optional> |
使用当前位置的坐标而不是。ocoordinates |
- Source:
Returns:
true if object intersects with another object
- Type
- Boolean
intersectsWithRect(pointTL, pointBR, absoluteopt, calculateopt) → {Boolean}
检查对象是否与由两点组成的区域相交
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pointTL |
Object | 区域的左上角点 | |
pointBR |
Object | 区域的右下点 | |
absolute |
Boolean |
<optional> |
使用不带viewportTransform的坐标 |
calculate |
Boolean |
<optional> |
使用当前位置的坐标而不是。ocoordinates |
- Source:
Returns:
true if object intersects with an area formed by 2 points
- Type
- Boolean
isCacheDirty(skipCanvas)
检查缓存是否脏
Parameters:
Name | Type | Description |
---|---|---|
skipCanvas |
Boolean | 跳过画布检查,因为该对象已被绘制 在父画布上。 |
- Source:
isContainedWithinObject(other, absoluteopt, calculateopt) → {Boolean}
检查对象是否完全包含在另一个对象的区域内
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
other |
Object | 测试对象 | |
absolute |
Boolean |
<optional> |
使用不带viewportTransform的坐标 |
calculate |
Boolean |
<optional> |
使用当前位置的坐标而不是。ocoordinates |
- Source:
Returns:
true if object is fully contained within area of another object
- Type
- Boolean
isContainedWithinRect(pointTL, pointBR, absoluteopt, calculateopt) → {Boolean}
检查物体是否完全包含在由2个点组成的区域内
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pointTL |
Object | 区域的左上角点 | |
pointBR |
Object | 区域的右下点 | |
absolute |
Boolean |
<optional> |
使用不带viewportTransform的坐标 |
calculate |
Boolean |
<optional> |
使用当前位置的坐标而不是。ocoordinates |
- Source:
Returns:
true if object is fully contained within area formed by 2 points
- Type
- Boolean
isControlVisible(controlKey) → {Boolean}
如果指定的控件可见则返回true,否则返回false。
Parameters:
Name | Type | Description |
---|---|---|
controlKey |
String | 控制键。可能的值是“tl”,“tr”,“品牌”,“提单”、“毫升”、“太”,“先生”,“m”,“地铁”。 |
- Source:
Returns:
true if the specified control is visible, false otherwise
- Type
- Boolean
isOnScreen(calculateopt) → {Boolean}
检查对象是否包含在当前viewportTransform的画布中
检查在屏幕上出现的第一个点停止
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
calculate |
Boolean |
<optional> |
使用当前位置的坐标而不是。acoord |
- Source:
Returns:
true if object is fully or partially contained within canvas
- Type
- Boolean
isPartiallyOnScreen(calculateopt) → {Boolean}
使用当前viewportTransform检查对象是否部分包含在画布中
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
calculate |
Boolean |
<optional> |
使用当前位置的坐标而不是。ocoordinates |
- Source:
Returns:
true if object is partially contained within canvas
- Type
- Boolean
isType(type) → {Boolean}
如果指定的类型与实例的类型相同,则返回true
Parameters:
Name | Type | Description |
---|---|---|
type |
String | 要检查的类型 |
- Source:
Returns:
- Type
- Boolean
moveTo(index) → {fabric.Object}
将对象移动到绘制对象堆栈中的指定位置
Parameters:
Name | Type | Description |
---|---|---|
index |
Number | 物体的新位置 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
needsItsOwnCache()
当设置为' true '时,强制对象拥有自己的缓存,即使它在一个组中
当您的对象在缓存上以特定方式运行并且总是需要时,可能需要
它自己独立的画布来正确渲染。
创建用于重写
自从1.7.12
- Source:
Returns:
Boolean
onDeselect(optionsopt)
每次_discardActiveObject或_setActiveObject调用这个回调函数
尝试取消选择此对象。如果函数返回true,则进程被取消
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
Object |
<optional> |
如果流程是由事件生成的,则为事件从上层函数发送的选项 属性 名字 类型 属性 描述 e 事件 如果流程是由事件生成的,则为事件 |
- Source:
onSelect(optionsopt)
每次_discardActiveObject或_setActiveObject调用这个回调函数
尝试选择此对象。如果函数返回true,则进程被取消
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
Object |
<optional> |
如果流程是由事件生成的,则为事件从上层函数发送的选项 属性 名字 类型 属性 描述 e 事件 如果流程是由事件生成的,则为事件 |
- Source:
render(ctx)
在指定上下文上呈现对象
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 要渲染的上下文 |
- Source:
rotate(angle) → {fabric.Object}
以居中旋转方式设置实例的“角度”
Parameters:
Name | Type | Description |
---|---|---|
angle |
Number | 角度值(以度为单位) |
- Source:
Returns:
thisArg
- Type
- fabric.Object
saveState(optionsopt) → {fabric.Object}
保存对象的状态
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
Object |
<optional> |
对象,在保存状态时要包含附加的' stateProperties '数组 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
scale(value) → {fabric.Object}
缩放对象(等量缩放x和y)
Parameters:
Name | Type | Description |
---|---|---|
value |
Number | 比例因子 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
scaleToHeight(value, absolute) → {fabric.Object}
将对象缩放到给定高度,相对于边界框(等量缩放x/y)
Parameters:
Name | Type | Description |
---|---|---|
value |
Number | 新高度值 |
absolute |
Boolean | 忽略视窗 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
scaleToWidth(value, absolute) → {fabric.Object}
将一个对象缩放到给定的宽度,相对于边界框(等量缩放x/y)
Parameters:
Name | Type | Description |
---|---|---|
value |
Number | 新的宽度值 |
absolute |
Boolean | 忽略视窗 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
sendBackwards(intersectingopt) → {fabric.Object}
在绘制的对象堆栈中向下移动一个对象
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
intersecting |
Boolean |
<optional> |
如果为true,则将对象发送到下一个较低相交对象的后面 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
sendToBack() → {fabric.Object}
将一个对象移动到绘制对象堆栈的底部
- Source:
Returns:
thisArg
- Type
- fabric.Object
setControlsVisibility(optionsopt) → {fabric.Object}
设置对象控件的可见性状态。
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
Object |
<optional> |
True为启用左下角控件,false为禁用它True为启用右下角控件,false为禁用它True为启用中底控件,false为禁用它True为启用左中控件,false为禁用它True为启用中右控件,false为禁用它True为启用中顶控件,false为禁用它True为启用左上角控件,false为禁用它True为启用右上方控件,false为禁用它True为启用中顶旋转控件,false为禁用该控件选择对象 属性 名字 类型 属性 描述 提单 布尔 True为启用左下角控件,false为禁用它 br 布尔 True为启用右下角控件,false为禁用它 mb 布尔 True为启用中底控件,false为禁用它 毫升 布尔 True为启用左中控件,false为禁用它 先生 布尔 True为启用中右控件,false为禁用它 太 布尔 True为启用中顶控件,false为禁用它 tl 布尔 True为启用左上角控件,false为禁用它 tr 布尔 True为启用右上方控件,false为禁用它 地铁 布尔 True为启用中顶旋转控件,false为禁用该控件 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
setControlVisible(controlKey, visible) → {fabric.Object}
设置指定控件的可见性。
Parameters:
Name | Type | Description |
---|---|---|
controlKey |
String | 控制键。可能的值是“tl”,“tr”,“品牌”,“提单”、“毫升”、“太”,“先生”,“m”,“地铁”。 |
visible |
Boolean | True表示将指定的控件设置为可见,否则为false |
- Source:
Returns:
thisArg
- Type
- fabric.Object
setCoords(skipCornersopt) → {fabric.Object}
根据当前角度、宽度和高度、左侧和顶部设置角和控制位置坐标。
弦是用来找角的
绳索用于快速找到画布上的对象
linecoord用于在指针事件期间快速查找对象。
参见https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords和http://fabricjs.com/fabric-gotchas
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
skipCorners |
Boolean |
<optional> |
跳过ocord的计算。 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
setOnGroup()
这个回调函数每次由对象的父组调用
对组上的非委托属性进行更改的时间。它被传递了密钥
值作为参数。不添加此函数的签名以避免
Travis构建关于未使用变量的错误。
- Source:
setOptions(optionsopt)
从选项设置对象的属性
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
Object |
<optional> |
选择对象 |
- Source:
setPositionByOrigin(pos, originX, originY) → {void}
根据对象的原点设置对象的位置
Parameters:
Name | Type | Description |
---|---|---|
pos |
fabric.Point | 对象的新位置 |
originX |
String | 水平原点:“左”、“中”或“右” |
originY |
String | 垂直原点:'top', 'center'或'bottom' |
- Source:
Returns:
- Type
- void
setupState(optionsopt) → {fabric.Object}
设置对象的状态
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
options |
Object |
<optional> |
对象,在保存状态时要包含附加的' stateProperties '数组 |
- Source:
Returns:
thisArg
- Type
- fabric.Object
shouldCache() → {Boolean}
决定对象是否应该缓存。创建自己的缓存级别
objectCaching是一个全局标志,胜过一切
当对象绘制方法需要时,应该使用needsItsOwnCache
缓存步骤。没有一个fabric类需要它。
通常不缓存组中的对象,因为外部的组被缓存。
读取为:缓存,如果需要,或者如果功能已启用,但我们还没有缓存。
- Source:
Returns:
- Type
- Boolean
straighten() → {fabric.Object}
将物体拉直(将其从当前角度旋转到0,90,180,270等中的一个,取决于哪个更接近)
- Source:
Returns:
thisArg
- Type
- fabric.Object
toCanvasElement(options) → {HTMLCanvasElement}
将一个对象转换为一个HTMLCanvas元素
Parameters:
Name | Type | Description |
---|---|---|
options |
Object | 乘数乘以裁剪左偏移。在v1.2.14中引入裁剪顶部偏移。在v1.2.14中引入裁剪宽度。在v1.2.14中引入种植的高度。在v1.2.14中引入启用视网膜缩放克隆图像。1.6.4引入移除当前对象变换(无缩放、无角度、无翻转、无倾斜)。在2.3.4中引入移除当前对象阴影。2.4.2引入选择对象 属性 名字 类型 属性 默认的 描述 乘数 数量 1 乘数乘以 左 数量 裁剪左偏移。在v1.2.14中引入 前 数量 裁剪顶部偏移。在v1.2.14中引入 宽度 数量 裁剪宽度。在v1.2.14中引入 高度 数量 种植的高度。在v1.2.14中引入 enableRetinaScaling 布尔 启用视网膜缩放克隆图像。1.6.4引入 withoutTransform 布尔 移除当前对象变换(无缩放、无角度、无翻转、无倾斜)。在2.3.4中引入 withoutShadow 布尔 移除当前对象阴影。2.4.2引入 |
- Source:
Returns:
Returns DOM element
- Type
- HTMLCanvasElement
toClipPathSVG(reviveropt) → {String}
返回实例的svg clipPath表示
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
reviver |
function |
<optional> |
进一步解析svg表示的方法。 |
- Source:
Returns:
svg representation of an instance
- Type
- String
toDatalessObject(propertiesToIncludeopt) → {Object}
返回实例的(无数据)对象表示
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
propertiesToInclude |
Array |
<optional> |
您可能希望在输出中额外包含的任何属性 |
- Source:
Returns:
Object representation of an instance
- Type
- Object
toDataURL(options) → {String}
将对象转换为类似data-url的字符串
Parameters:
Name | Type | Description |
---|---|---|
options |
Object | 输出图像的格式。jpeg或png格式质量等级(0..1)。仅用于jpeg。乘数乘以裁剪左偏移。在v1.2.14中引入裁剪顶部偏移。在v1.2.14中引入裁剪宽度。在v1.2.14中引入种植的高度。在v1.2.14中引入启用视网膜缩放克隆图像。1.6.4引入移除当前对象变换(无缩放、无角度、无翻转、无倾斜)。在2.3.4中引入移除当前对象阴影。2.4.2引入选择对象 属性 名字 类型 属性 默认的 描述 格式 字符串 png 输出图像的格式。jpeg或png格式 质量 数量 1 质量等级(0..1)。仅用于jpeg。 乘数 数量 1 乘数乘以 左 数量 裁剪左偏移。在v1.2.14中引入 前 数量 裁剪顶部偏移。在v1.2.14中引入 宽度 数量 裁剪宽度。在v1.2.14中引入 高度 数量 种植的高度。在v1.2.14中引入 enableRetinaScaling 布尔 启用视网膜缩放克隆图像。1.6.4引入 withoutTransform 布尔 移除当前对象变换(无缩放、无角度、无翻转、无倾斜)。在2.3.4中引入 withoutShadow 布尔 移除当前对象阴影。2.4.2引入 |
- Source:
Returns:
Returns a data: URL containing a representation of the object in the format specified by options.format
- Type
- String
toJSON(propertiesToIncludeopt) → {Object}
返回实例的JSON表示形式
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
propertiesToInclude |
Array |
<optional> |
您可能希望在输出中额外包含的任何属性 |
- Source:
Returns:
JSON
- Type
- Object
toLocalPoint(point, originX, originY) → {fabric.Point}
以本地坐标返回点
Parameters:
Name | Type | Description |
---|---|---|
point |
fabric.Point | 相对于全球坐标系的点 |
originX |
String | 水平原点:“左”、“中”或“右” |
originY |
String | 垂直原点:'top', 'center'或'bottom' |
- Source:
Returns:
- Type
- fabric.Point
toObject(propertiesToIncludeopt) → {Object}
返回实例的对象表示形式
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
propertiesToInclude |
Array |
<optional> |
您可能希望在输出中额外包含的任何属性 |
- Source:
Returns:
Object representation of an instance
- Type
- Object
toString() → {String}
返回实例的字符串表示形式
- Source:
Returns:
- Type
- String
toSVG(reviveropt) → {String}
返回实例的svg表示形式
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
reviver |
function |
<optional> |
进一步解析svg表示的方法。 |
- Source:
Returns:
svg representation of an instance
- Type
- String
transform(ctx)
在呈现对象时转换上下文
Parameters:
Name | Type | Description |
---|---|---|
ctx |
CanvasRenderingContext2D | 上下文 |
- Source:
translateToCenterPoint(point, originX, originY) → {fabric.Point}
将坐标从原点转换为中心坐标(基于对象的尺寸)
Parameters:
Name | Type | Description |
---|---|---|
point |
fabric.Point | 对应于originX和originY参数的点 |
originX |
String | 水平原点:“左”、“中”或“右” |
originY |
String | 垂直原点:'top', 'center'或'bottom' |
- Source:
Returns:
- Type
- fabric.Point
translateToGivenOrigin(point, fromOriginX, fromOriginY, toOriginX, toOriginY) → {fabric.Point}
将坐标从一组原点转换为另一组原点(基于对象的尺寸)
Parameters:
Name | Type | Description |
---|---|---|
point |
fabric.Point | 对应于originX和originY参数的点 |
fromOriginX |
String | 水平原点:“左”、“中”或“右” |
fromOriginY |
String | 垂直原点:'top', 'center'或'bottom' |
toOriginX |
String | 水平原点:“左”、“中”或“右” |
toOriginY |
String | 垂直原点:'top', 'center'或'bottom' |
- Source:
Returns:
- Type
- fabric.Point
translateToOriginPoint(center, originX, originY) → {fabric.Point}
将坐标从中心坐标转换为原点坐标(基于对象的尺寸)
Parameters:
Name | Type | Description |
---|---|---|
center |
fabric.Point | 与物体中心相对应的点 |
originX |
String | 水平原点:“左”、“中”或“右” |
originY |
String | 垂直原点:'top', 'center'或'bottom' |
- Source:
Returns:
- Type
- fabric.Point
viewportCenter() → {fabric.Object}
将对象居中于最后添加到的画布的当前视口中。
你可能需要在定心之后在一个对象上调用setcoord来更新控件区域。
- Source:
Returns:
thisArg
- Type
- fabric.Object
viewportCenterH() → {fabric.Object}
将对象水平居中于最后添加到的画布的当前视口中。
你可能需要在定心之后在一个对象上调用setcoord来更新控件区域。
- Source:
Returns:
thisArg
- Type
- fabric.Object
viewportCenterV() → {fabric.Object}
将对象垂直居中于它最后添加到的画布的当前视口中。
你可能需要在定心之后在一个对象上调用setcoord来更新控件区域。
- Source:
Returns:
thisArg
- Type
- fabric.Object
willDrawShadow() → {Boolean}
检查此对象或子对象是否会投射阴影
组使用。shouldCache递归地知道子节点是否有影子
- Source:
Returns:
- Type
- Boolean