fabric.Canvas
fabric.Canvas
new Canvas()
Canvas class
源码: fabric.js, line 11253
教程: http://fabricjs.com/fabric-intro-part-1#canvas
触发 | 事件说明 |
---|---|
object:modified
|
当statefull=true ,在转换结束时或任何改变结束后
|
object:rotating
|
当对象被旋转时 |
object:scaling
|
当对象被缩放时 |
object:moving
|
当对象被移动时 |
object:skewing
|
当对象被歪斜时 |
before:transform
|
改变之前 |
before:selection:cleared
|
选中被清除之前 |
selection:cleared
|
选中清理后 |
selection:updated
|
选中更新 |
selection:created
|
选中 |
path:created
|
当path 对象被创建之后
|
mouse:down
|
鼠标按键按下 |
mouse:move
|
鼠标移动 |
mouse:up
|
鼠标按键松开 |
mouse:down:before
|
在鼠标按键按下之前,事件:在内部织物逻辑运行之前 |
mouse:move:before
|
在鼠标移动之前,事件:在内部织物逻辑运行之前 |
mouse:up:before
|
在鼠标按键松开之前,事件:在内部织物逻辑运行之前 |
mouse:over
|
鼠标移入 |
mouse:out
|
鼠标移出 |
mouse:dblclick
|
鼠标双击 |
event:dragover
|
拖动经过 |
event:dragenter
|
拖动进入 |
event:dragleave
|
拖动移出 |
event:drop
|
拖动释放 |
after:render
|
在渲染过程结束时,事件:在回调中接收上下文 |
before:render
|
在渲染过程开始时,在回调中接收上下文 |
下事件已被弃用:
object:rotated
旋转结束
object:scaled
缩放结束
object:moved
移动结束
object:skewed
歪斜结束
扩展
fabric.StaticCanvas
属性
allowTouchScrolling
:Boolean
表示使用触摸屏并在画布上拖动时,浏览器是否可以滚动。
类型:Boolean
继承: fabric.StaticCanvas#allowTouchScrolling
源码: fabric.js, line 8647altActionKey
:String
表示哪个键可以alt
操作。altKey
,shiftKey
,ctrlKey
. 如果null
或none
或任何其他字符串,则禁用功能。
类型:String
起始版本:1.6.2
默认值: shiftKey
源码:fabric.js, line 11374altSelectionKey
:null|String
表示在目标与活动对象值重叠的情况下,哪个键可以启用替代选择。altKey
,shiftKey
,ctrlKey
. 这个功能只对保留对象堆叠preserveObjectStacking
为真时有效。如果null
或none
或任何其他字符串被禁用。
类型:null | String
起始版本:1.6.5
源码:fabric.js, line 11414backgroundColor
:String|fabric.Pattern
画布背景颜色
类型:String | fabric.Pattern
继承:fabric.StaticCanvas#backgroundColor
源码:fabric.js, line 8577backgroundImage
:fabric.Image
画布实例的背景图像。由于v2.4.0的图像缓存是有效的,当把图像作为背景时,请在画布属性中添加它所在画布的引用。否则,图像无法检测到变焦的程度。解决方案:你可以禁用图像对象缓存
类型:fabric.Image
继承:fabric.StaticCanvas#backgroundImage
源码:fabric.js, line 8587backgroundVpt
:Boolean
如果设置为false,则背景图像不受视口转换的影响。
类型:Boolean
起始版本:1.6.3
继承:fabric.StaticCanvas#backgroundVpt
默认值:true
源码:fabric.js, line 8669centeredKey
:String
表示哪个键启用居中的变换值。altKey
,shiftKey
,ctrlKey
. 如果null
或none
或任何字符串表示禁用。
类型:String
起始版本:1.6.2
默认值:altKey
源码:fabric.js, line 11363centeredRotation
:Boolean
当为真时,对象使用中心点作为旋转变换的原点。该属性取代了 “centerTransform”(布尔值)
类型:Boolean
起始版本:1.3.4
源码:fabric.js, line 11352centeredScaling
:Boolean
当为真时,对象使用中心点作为比例变换的原点。该属性取代了 “centerTransform”(布尔值)
类型:Boolean
起始版本:1.3.4
源码:fabric.js, line 11343clipPath
:fabric.Object
clipPath对象在画布渲染时被使用,并且上下文被放置在画布的左上角。 clipPath会夹走控件,如果你不希望发生这种情况,请设置controlsAboveOverlay = true
类型:fabric.Object
继承:fabric.StaticCanvas#clipPath
源码:fabric.js, line 8716containerClass
:String
给予canvas的包装(div)元素的默认class值。
类型:String
默认值:canvas-container
源码:fabric.js, line 11499controlsAboveOverlay
:Boolean
指示对象控制(边框/控制)是否在覆盖图像上方渲染。
类型:Boolean
继承:fabric.StaticCanvas#controlsAboveOverlay
源码:fabric.js, line 8640defaultCursor
:String
用于整个画布的默认游标值
类型:String
默认值:default
源码:fabric.js, line 11470enableRetinaScaling
:Boolean
当为真时,画布按devicePixelRatio缩放,以便在视网膜屏幕上更好地呈现。
类型:Boolean
继承:fabric.StaticCanvas#enableRetinaScaling
默认值:true
源码:fabric.js, line 8684fireMiddleClick
:Boolean
指示画布是否可以触发鼠标滚轮点击事件
类型:Boolean
起始版本:1.7.8
源码:fabric.js, line 11583fireRightClick
:Boolean
画布是否支持鼠标右键点击事件
类型:Boolean
起始版本:1.6.5
源码:fabric.js, line 11575freeDrawingCursor
:String
画布是否支持画笔涂鸦
类型:String
默认值:crosshair
源码:fabric.js, line 11477FX_DURATION
:Number
fx*方法的动画持续时间(以ms为单位)。
类型:Number
继承:fabric.StaticCanvas#FX_DURATION
默认值:500
源码:fabric.js, line 17813hoverCursor
:String
悬停在画布上的物体上时使用的默认光标值
类型:String
默认值:move
源码:fabric.js, line 11456imageSmoothingEnabled
:Boolean
表示该画布是否使用图像平滑,在浏览器中默认为打开。
类型:Boolean
继承:fabric.StaticCanvas#imageSmoothingEnabled
默认值:true
源码:fabric.js, line 8654includeDefaultValues
:Boolean
指示toObject/toDatalessObject是否应该包括默认值,如果设置为false,则优先于对象值。
类型:Boolean
继承:fabric.StaticCanvas#includeDefaultValues
默认值:true
源码:fabric.js, line 8614interactive
:Boolean
表示画布是互动的。这个属性不可改变。
类型:Boolean
默认值:true
源码:fabric.js, line 11381isDrawingMode
:Boolean
如果为真,画布上的鼠标事件(mousedown/mousemove/mouseup)会导致自由绘制。在mousedown之后,mousemove创建了一个形状,然后mouseup最终确定它,并在canvas上添加一个fabric.Path
的实例。
类型:Boolean
源码:fabric.js, line 11534
教程: http://fabricjs.com/fabric-intro-part-4#free_drawingmoveCursor
:String
在画布上移动一个物体时使用的默认光标值
类型:String
默认值:move
源码:fabric.js, line 11463notAllowedCursor
:String
用于禁用元素的光标值(带有禁用动作的角)。
类型:String
起始版本:2.0.0
默认值:not-allowed
源码:fabric.js, line 11492overlayColor
:String|fabric.Pattern
画布实例的覆盖颜色。应该通过 fabric.StaticCanvas#setOverlayColor 来设置。
类型:String | fabric.Pattern
起始版本:1.3.9
继承:fabric.StaticCanvas#overlayColor
源码:fabric.js, line 8596overlayImage
:fabric.Image
画布实例的叠加图像。自从2.4.0图像缓存激活后,当把图像作为叠加时,请在画布属性中添加它所在画布的引用。否则,图像无法检测到变焦的程度。解决方案:你可以禁用图像对象缓存
类型:fabric.Image
继承:fabric.StaticCanvas#overlayImage
源码:fabric.js, line 8606overlayVpt
:Boolean
如果设置为false,则图像不受视口转换的影响。
类型:Boolean
起始版本:1.6.3
继承:fabric.StaticCanvas#overlayVpt
默认值:true
源码:fabric.js, line 8677perPixelTargetFind
:Boolean
当为真时,物体检测是在每个像素的基础上进行的,而不是在每个边框的基础上。
类型:Boolean
源码:fabric.js, line 11506preserveObjectStacking
:Boolean
指示对象在被选择时是否应该保持在当前的堆栈位置。当false,对象会被带到顶部并作为选择组的一部分被渲染。
类型:Boolean
源码:fabric.js, line 11542renderOnAddRemove
:Boolean
指示 fabric.Collection.add, fabric.Collection.insertAt 和 fabric.Collection.remove, fabric.StaticCanvas.moveTo, fabric.StaticCanvas.clear 以及更多,是否也应该重新渲染画布。当一次向画布添加/删除大量对象时,禁用该选项不会带来性能提升,因为渲染是排队的,每帧执行一次。建议禁用该选项,手动管理应用程序的渲染并不费力 ( canvas.requestRenderAll() ) 将默认值设为true,以避免破坏文档和旧的应用程序,乱来。
类型:Boolean
继承:fabric.StaticCanvas#renderOnAddRemove
默认值:true
源码:fabric.js, line 8633rotationCursor
:String
旋转时鼠标样式
类型:String
默认值:crosshair
源码:fabric.js, line 11484selection
:Boolean
表示是否应启用组别选择
类型:Boolean
默认值:true
源码:fabric.js, line 11388selectionBorderColor
:String
选区边界的颜色(通常比选区本身的颜色略深)。
类型:String
默认值:rgba(255, 255, 255, 0.3)
源码:fabric.js, line 11435selectionColor
:String
选区的颜色
类型:String
默认值:rgba(100, 100, 255, 0.3)
源码:fabric.js, line 11421selectionDashArray
:Array
选区虚线边框
类型:Array
源码:fabric.js, line 11428selectionFullyContained
:Boolean
只选择完全包含在拖动的选择矩形中的形状。
类型:Boolean
源码:fabric.js, line 11449selectionKey
:String|Array
指示哪个键或哪些键可以实现多次点击选择,将值作为字符串或字符串数组的值。altKey
,shiftKey
,ctrlKey
。
类型:String | Array
起始版本:1.6.2
默认值:shiftKey
源码:fabric.js, line 11400selectionLineWidth
:Number
在对象/组选择中使用的线的宽度
类型:Number
默认值:1
源码:fabric.js, line 11442skipOffscreen
:Boolean
基于vptCoords和object.aCoords,跳过渲染那些不在当前视口中的物体。在画布拥挤和使用缩放/平移的情况下,可能会有很大的帮助,如果对象的边界框的一个角在画布上,对象会被渲染。
类型:Boolean
继承:fabric.StaticCanvas#skipOffscreen
默认值:true
源码:fabric.js, line 8707skipTargetFind
:Boolean
当为真时,目标检测被跳过。目标检测将始终返回未定义。点击选择将不再起作用,事件将在没有目标的情况下发生。如果在将其设置为 "真 "之前已经选择了某些东西,它将在第一次点击时被取消选择。
类型:Boolean
源码:fabric.js, line 11524snapAngle
:Number
表示一个物体在旋转时将锁定的角度。
类型:Number
起始版本:1.6.7
源码:fabric.js, line 11550snapThreshold
:null|Number
表示旋转将锁定在snapAngle上的距离。当 "null"时,sapThreshold将默认为sapAngle。
类型:null | Number
起始版本:1.6.7
源码:fabric.js, line 11559stateful
:Boolean
表明对象的状态是否应该被保存
类型:Boolean
继承:fabric.StaticCanvas#stateful
源码:fabric.js, line 8621stopContextMenu
:Boolean
表示在画布上右击是否可以输出上下文菜单。
类型:Boolean
起始版本:1.6.5
源码:fabric.js, line 11567svgViewportTransformation
:Boolean
当为真时,getSvgTransform()将把StaticCanvas.viewportTransform应用于SVG转换。当为真时,一个缩放的画布就会产生缩放的SVG输出。
类型:Boolean
继承:fabric.StaticCanvas#svgViewportTransformation
默认值:true
源码:fabric.js, line 9764targetFindTolerance
:Number
目标像素周围的像素数量,在物体检测过程中容忍(考虑活动)。
类型:Number
源码:fabric.js, line 11513targets
:Array.<fabric.Object>
追踪鼠标事件的子目标
类型:Array.<fabric.Object>
源码:fabric.js, line 11589uniformScaling
:Boolean
当为真时,对象在角上拖动时,可以转变一边(不按比例),通常不会这样做。
类型:Boolean
起始版本:fabric 4.0 // changed name and default value
默认值:true
源码:fabric.js, line 11320uniScaleKey
:String
表示哪个键可以切换统一缩放。‘altKey’, ‘shiftKey’, ‘ctrlKey’. 如果Canvas.uniformScaling为真,按这个会将其设置为假,反之亦然。
类型:String
起始版本:1.6.2
默认值:shiftKey
源码:fabric.js, line 11334viewportTransform
:Array
聚焦视口的变换(以Canvas变换的格式)
类型:Array
继承:fabric.StaticCanvas#viewportTransform
源码:fabric.js, line 8661vptCoords
如果画布没有被缩放/平移,这些点就是画布的四个角,如果画布被视口转换,这些点就表示画布元素在普通的未变形的坐标中的延伸。
继承:fabric.StaticCanvas#vptCoords
源码:fabric.js, line 8695
方法
__onMouseWheel(e)
定义当事件鼠标滚轮发生时的动作的方法
参数:
Name Type Description e Event Event object fired on mouseup 源码:fabric.js, line 13478
_chooseObjectsToRender() → {Array}
将对象分成两组,一组立即渲染,一组作为activeGroup渲染。
源码:fabric.js, line 11627
返回:Array
对象立即渲染,并将其他对象推到活动组中。
_setCursorFromEvent(e, target)
根据画布被悬停的位置来设置光标。注意:在Opera中非常有问题
- 传参:
Name | Type | Description |
---|---|---|
e | Event | Event object |
target | Object | Object that the mouse is hovering, if so. |
- 源码:fabric.js, line 13533
absolutePan(point) → {fabric.Canvas}
平移视口,以便将点放在画布的左上角
- 传参:
Name | Type | Description |
---|---|---|
point | fabric.Point | to move to |
- 继承:fabric.StaticCanvas#absolutePan
- 源码:fabric.js, line 9262
- 返回:fabric.Canvas
画布实例
add(…object) → {Self}
向集合、Canvas或Group添加对象,然后渲染canvas(如果renderOnAddRemove
不是false
的话)。对于Group来说,不会对边界框进行修改。对象应该是fabric.Object的实例(或继承自fabric.Object)。你可以用add方法添加一堆对象,但你必须为Group类运行addWithUpdate调用,否则位置/框会出错。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object | repeatable | Zero or more fabric instances |
- 继承:fabric.StaticCanvas#add
- 混入:fabric.Collection.add
- 源码:fabric.js, line 375
- 返回: self
bringForward(object, intersectingopt) → {fabric.Canvas}
将一个对象或一个选区在绘制的对象堆栈中向上移动。一个可选的参数,相交允许将对象移动到第一个相交的对象前面。交叉点是通过边界盒计算的。如果没有找到相交点,堆栈中就不会有变化。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object | Object to send | |
intersecting | Boolean | optional |
If true , send object in front of next upper intersecting object
|
- 继承:fabric.StaticCanvas#bringForward
- 源码:fabric.js, line 10194
- 返回:fabric.Canvas
bringToFront(object) → {fabric.Canvas}
将一个对象或多个选择的对象移动到绘制对象堆栈的顶部
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to send |
- 继承:fabric.StaticCanvas#bringToFront
- 源码:fabric.js, line 10088
- 返回:fabric.Canvas
calcOffset() → {fabric.Canvas}
计算画布元素相对于文档的偏移量,该方法也作为窗口的 "调整大小 "事件处理程序。
- 继承:fabric.StaticCanvas#calcOffset
- 源码:fabric.js, line 8790
- 返回:fabric.Canvas
calcViewportBoundaries() → {Object}
用当前的viewportTransform计算画布的4个角的位置,有助于使用对象的绝对坐标(aCoords)确定对象何时在当前的渲染视口中。
- 继承:fabric.StaticCanvas#calcViewportBoundaries
- 源码:fabric.js, line 9400
- 返回: points.tl
centerObject(object) → {fabric.Canvas}
将对象在画布中垂直和水平居中
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to center vertically and horizontally |
- 继承:fabric.StaticCanvas#centerObject
- 源码:fabric.js, line 9580
- 返回:fabric.Canvas
centerObjectH(object) → {fabric.Canvas}
Centers object horizontally in the canvas - 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to center horizontally |
- 继承:fabric.StaticCanvas#centerObjectH
- 源码:fabric.js, line 9560
- 返回:fabric.Canvas
centerObjectV(object) → {fabric.Canvas}
Centers object vertically in the canvas - 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to center vertically |
- 继承:fabric.StaticCanvas#centerObjectV
- 源码:fabric.js, line 9570
- 返回:fabric.Canvas
clear() → {fabric.Canvas}
清除一个画布实例的所有内容。
- 重写:fabric.StaticCanvas#clear
- 源码:fabric.js, line 12464
- 返回:fabric.Canvas
clearContext(ctx) → {fabric.Canvas}
清除画布元素的指定上下文
- 传参:
Name | Type | Description |
---|---|---|
ctx | CanvasRenderingContext2D | Context to clear |
- 继承:fabric.StaticCanvas#clearContext
- 源码:fabric.js, line 9318
- 返回:fabric.Canvas
clone(callbackopt, propertiesopt)
克隆画布实例
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
callback | Object |
optional
|
Receives cloned instance as a first argument |
properties | Array |
optional
|
Array of properties to include in the cloned canvas and children |
继承:fabric.StaticCanvas#clone
源码:fabric.js, line 14045
cloneWithoutData(callbackopt)
克隆画布实例而不克隆现有数据。这基本上是复制画布的尺寸、剪裁属性等,但保留数据为空(这样你就可以用你自己的数据来填充它)。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
callback | Object |
optional
|
Receives cloned instance as a first argument |
- 继承:fabric.StaticCanvas#cloneWithoutData
- 源码:fabric.js, line 14060
complexity() → {Number}
返回一个集合复杂性的数字表示
- 继承:fabric.StaticCanvas#complexity
- 混入:fabric.Collection.complexity
- 源码:fabric.js, line 519
- 返回:Number
contains(object, deepopt) → {Boolean}
如果集合包含一个对象,则返回真
- 传参:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
object | Object | Object to check against | ||
deep | Boolean |
optional
|
false |
true to check all descendants, false to check only _objects
|
- 继承:fabric.StaticCanvas#contains
- 混入:fabric.Collection.contains
- 源码:fabric.js, line 503
- 返回:
true
if collection contains an object
createSVGFontFacesMarkup(objects) → {String}
创建包含SVG字样的标记,字样的URL必须由开发人员收集,而不是由 fabricjs从DOM中提取。
- 传参:
Name | Type | Description |
---|---|---|
objects | Array | Array of fabric objects |
- 继承:fabric.StaticCanvas#createSVGFontFacesMarkup
- 源码:fabric.js, line 9927
- 返回:String
createSVGRefElementsMarkup() → {String}
创建包含SVG引用元素的标记,如图案、梯度等。
- 继承:fabric.StaticCanvas#createSVGRefElementsMarkup
- 源码:fabric.js, line 9901
- 返回:String
discardActiveObject(e) → {fabric.Canvas}
丢弃当前活动的对象和事件。如果该函数是作为鼠标事件的结果被fabric调用的,该事件被作为参数传递并被发送到自定义事件的fire函数中。当作为一个方法使用时,e参数没有任何应用。
- 传参:
Name | Type | Description |
---|---|---|
e | event |
源码:fabric.js, line 12425
- 返回:fabric.Canvas
dispose() → {fabric.Canvas}
清除一个画布元素并移除所有事件监听器
重写:fabric.StaticCanvas#dispose
源码:fabric.js, line 12440
返回:fabric.Canvas
drawClipPathOnCanvas(ctx)
在下部画布上画出缓存的剪辑路径。
- 传参:
Name | Type | Description |
---|---|---|
ctx | CanvasRenderingContext2D | Context to render on |
继承:fabric.StaticCanvas#drawClipPathOnCanvas
源码:fabric.js, line 9461
drawControls(ctx)
绘制对象的控件(边框/控件)。
- 传参:
Name | Type | Description |
---|---|---|
ctx | CanvasRenderingContext2D | Context to render controls on |
- 源码:fabric.js, line 12475
findTarget(e, skipGroup) → {fabric.Object}
确定我们正在点击的对象的方法,skipGroup参数是内部使用的,需要shift+点击动作
- 传参:
Name | Type | Description |
---|---|---|
e | Event | mouse event |
skipGroup | Boolean | when true, activeGroup is skipped and only objects are traversed through |
- 源码:fabric.js, line 11975
- 返回:fabric.Object
fire(eventName, optionsopt) → {Self}
用一个可选的选项对象触发事件
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
eventName | String | Event name to fire | |
options | Object |
optional
|
Options object |
- 继承:fabric.StaticCanvas#fire
- 混入:fabric.Observable.fire
- 源码:fabric.js, line 323
- 返回:Self
forEachObject(callback, context) → {Self}
对该组中的每个对象执行给定的函数
- 传参:
Name | Type | Description |
---|---|---|
callback | function |
Callback invoked with current object as first argument, index - as second and an array of all objects - as third. Callback is invoked in a context of Global Object (e.g. window ) when no context argument is given
|
context | Object | Context (aka thisObject) |
- 继承:fabric.StaticCanvas#forEachObject
- 混入:fabric.Collection.forEachObject
- 源码:fabric.js, line 448
- 返回:Self
fxCenterObjectH(object, callbacksopt) → {fabric.Canvas}
用动画使物体水平居中。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object | Object to center | |
callbacks | Object |
optional
|
Callbacks object with optional “onComplete” and/or “onChange” properties |
回调属性:
Name | Type | Attributes | Description |
---|---|---|---|
onComplete | function |
optional
|
Invoked on completion |
onChange | function |
optional
|
Invoked on every step of animation |
- 继承:fabric.StaticCanvas#fxCenterObjectH
- 源码:fabric.js, line 17824
- 返回:fabric.Canvas
fxCenterObjectV(object, callbacksopt) → {fabric.Canvas}
用动画使物体垂直居中。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object | Object to center | |
callbacks | Object |
optional
|
Callbacks object with optional “onComplete” and/or “onChange” properties |
回调属性:
Name | Type | Attributes | Description |
---|---|---|---|
onComplete | function |
optional
|
Invoked on completion |
onChange | function |
optional
|
Invoked on every step of animation |
- 继承:fabric.StaticCanvas#fxCenterObjectV
- 源码:fabric.js, line 17859
- 返回:fabric.Canvas
fxRemove(object, callbacksopt) → {fabric.Canvas}
与fabric.Canvas#remove
相同,但有动画效果
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object | Object to remove | |
callbacks | Object |
optional
|
Callbacks object with optional “onComplete” and/or “onChange” properties |
回调属性:
Name | Type | Attributes | Description |
---|---|---|---|
onComplete | function |
optional
|
Invoked on completion |
onChange | function |
optional
|
Invoked on every step of animation |
- 继承:fabric.StaticCanvas#fxRemove
- 源码:fabric.js, line 17894
- 返回:fabric.Canvas
fxStraightenObject(object) → {fabric.Canvas}
与 fabric.Canvas.prototype.straightenObject 相同,但有动画效果。
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to straighten |
- 继承:fabric.StaticCanvas#fxStraightenObject
- 源码:fabric.js, line 21345
- 返回:fabric.Canvas
getActiveObject() → {fabric.Object}
获取当前激活对象
- 源码:fabric.js, line 12262
- 返回:fabric.Object
getActiveObjects() → {fabric.Object}
获取当前选中的对象数组
源码:fabric.js, line 12270
- 返回:fabric.Object
getCenter() → {Object}
返回画布中心的坐标。返回的值是一个具有顶部和左侧属性的对象。
- 继承:fabric.StaticCanvas#getCenter
- 源码:fabric.js, line 9548
- 返回: {top:Number,left:Number}
getContext() → {CanvasRenderingContext2D}
返回绘制对象的画布的上下文
- 继承:fabric.StaticCanvas#getContext
- 源码:fabric.js, line 9327
- 返回:CanvasRenderingContext2D
getElement() → {HTMLCanvasElement}
返回与该实例对应的canvas
元素
- 继承:fabric.StaticCanvas#getElement
- 源码:fabric.js, line 9286
- 返回:HTMLCanvasElement
getHeight() → {Number}
获取画布高(像素px)
- 继承:fabric.StaticCanvas#getHeight
- 源码:fabric.js, line 9067
- 返回:Number
getObjects(typeopt) → {Array}
返回这个实例的子对象的数组 v1.3.10中引入的类型参数 自v2.3.5以来,该方法总是返回数组的COPY。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
type | String |
optional
|
当指定时,只返回这种类型的对象。译者注:对象类型要用小写名称,例fabric.Textbox 应该设置为 textbox ,或者会返回空数组
|
- 继承:fabric.StaticCanvas#getObjects
- 混入:fabric.Collection.getObjects
- 源码:fabric.js, line 463
- 返回:Array
getPointer(e, ignoreZoom) → {Object}
返回相对于canvas的指针坐标。ignoreZoom false会返回代表在画布元素上点击的坐标。ignoreZoom true会返回经过viewportTransform处理后的坐标(即你点击的画布上所显示的坐标)。ignoreZoom true = 相对于顶部和左侧的HTMLElement坐标 ignoreZoom false, 默认 = 布局空间坐标,与形状位置使用的坐标相同 要与你的形状顶部和左侧互动,你要在大多数时候使用ignoreZoom true,而ignoreZoom false将给你与object.oCoords系统兼容的坐标。
- 传参:
Name | Type | Description |
---|---|---|
e | Event | |
ignoreZoom | Boolean |
- 源码:fabric.js, line 12105
- 返回: {x:Number,y:Number}
getSelectionContext() → {CanvasRenderingContext2D}
返回选择对象所在的画布的上下文
- 源码:fabric.js, line 12246
- 返回:CanvasRenderingContext2D
getSelectionElement() → {HTMLCanvasElement}
返回绘制对象选择的canvas
元素
- 源码:fabric.js, line 12254
- 返回:HTMLCanvasElement
getVpCenter() → {fabric.Point}
计算画布中对应于实际视口中心的点。
- 继承:fabric.StaticCanvas#getVpCenter
- 源码:fabric.js, line 9627
- 返回:vpCenter, viewport center (fabric.Point)
getWidth() → {Number}
获取画布宽(像素px)
- 继承:fabric.StaticCanvas#getWidth
- 源码:fabric.js, line 9059
- 返回:Number
getZoom() → {Number}
获取画布缩放等级
- 继承:fabric.StaticCanvas#getZoom
- 源码:fabric.js, line 9189
- 返回:Number
initialize(el, optionsopt) → {Object}
构造函数
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
el | HTMLElement | String |
canvas element to initialize instance on
|
options | Object |
optional
|
Options object |
- 重写:fabric.StaticCanvas#initialize
- 源码:fabric.js, line 11304
- 返回:Object
insertAt(object, index, nonSplicing) → {Self}
在指定的索引处向集合中插入一个对象,然后渲染画布(如果renderOnAddRemove
不是false
的话)一个对象应该是fabric.Object的实例(或继承自fabric.Object),对于组来说,非常不建议使用这个函数。你可以用insertAt方法添加一堆对象,但是你必须为组类运行addWithUpdate调用,否则position/bub会出错。
- 传参:
Name | Type | Description |
---|---|---|
object | Object | Object to insert |
index | Number | Index to insert object at |
nonSplicing | Boolean |
When true , no splicing (shifting) of objects occurs
|
- 继承:fabric.StaticCanvas#insertAt
- 混入:fabric.Collection.insertAt
- 源码:fabric.js, line 398
- 返回:Self
isEmpty() → {Boolean}
判断画布是否为空画布
- 继承:fabric.StaticCanvas#isEmpty
- 混入:fabric.Collection.isEmpty
- 源码:fabric.js, line 485
- 返回:Boolean
isTargetTransparent(target, x, y) → {Boolean}
如果对象在某一位置是透明的,则返回真。
- 传参:
Name | Type | Description |
---|---|---|
target | fabric.Object | Object to check |
x | Number | Left coordinate |
y | Number | Top coordinate |
- 源码:fabric.js, line 11717
- 返回:Boolean
item(index) → {Self}
返回指定索引处的对象
- 传参:
Name | Type | Description |
---|---|---|
index | Number |
- 继承:fabric.StaticCanvas#item
- 混入:fabric.Collection.item
- 源码:fabric.js, line 477
- 返回:Self
loadFromJSON(json, callback, reviveropt) → {fabric.Canvas}
用指定的JSON数据来填充画布。JSON格式必须符合 fabric.Canvas#toJSON 的格式。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
json | String | Object | JSON string or object |
callback | function | Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized | |
reviver | function |
optional
|
Method for further parsing of JSON elements, called after each fabric object created. |
- 继承:fabric.StaticCanvas#loadFromJSON
- 源码:fabric.js, line 13874
- 教程: http://fabricjs.com/fabric-intro-part-3#deserialization
- 返回:fabric.Canvas
- 示例
loadFromJSONcanvas.loadFromJSON(json, canvas.renderAll.bind(canvas)); loadFromJSON with revivercanvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {// `o` = json object // `object` = fabric.Object instance // ... do some stuff ... });
moveTo(object, index) → {fabric.Canvas}
将一个对象移动到所画对象的堆栈中的指定级别。
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to send |
index | Number | Position to move to |
- 继承:fabric.StaticCanvas#moveTo
- 源码:fabric.js, line 10263
- 返回:fabric.Canvas
relativePan(point) → {fabric.Canvas}
平移操作
- 传参:
Name | Type | Description |
---|---|---|
point | fabric.Point | (position vector) to move by |
- 继承:fabric.StaticCanvas#relativePan
- 源码:fabric.js, line 9275
- 返回:fabric.Canvas
remove(…object) → {Self}
从一个集合中移除对象,然后渲染画布(如果renderOnAddRemove
不是false
的话)。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object |
repeatable
|
Zero or more fabric instances |
- 继承:fabric.StaticCanvas#remove
- 混入:fabric.Collection.remove
- 源码:fabric.js, line 417
- 返回:Self
removeListeners()
移除所有监听事件
- 源码:fabric.js, line 12632
renderAll() → {fabric.Canvas}
渲染顶部画布和二级容器画布。
- 重写:fabric.StaticCanvas#renderAll
- 源码:fabric.js, line 11659
- 返回:fabric.Canvas
renderCanvas(ctx, objects) → {fabric.Canvas}
渲染背景、对象、叠加和控件。
- 传参:
Name | Type | Description |
---|---|---|
ctx | CanvasRenderingContext2D | |
objects | Array | to render |
- 继承:fabric.StaticCanvas#renderCanvas
- 源码:fabric.js, line 9425
- 返回:fabric.Canvas
renderTop() → {fabric.Canvas}
只渲染顶部画布的方法。也用于渲染组选择框。
- 源码:fabric.js, line 11692
- 返回:fabric.Canvas
requestRenderAll() → {fabric.Canvas}
为下一个动画帧添加一个renderAll请求。除非一个动画帧已经在进行中,在这种情况下,不做任何事情,一个布尔标志将避免添加更多的请求。
- 继承:fabric.StaticCanvas#requestRenderAll
- 源码:fabric.js, line 9386
- 返回:fabric.Canvas
restorePointerVpt(pointer) → {Object}
返回不受视口影响的指针坐标。
- 传参:
Name | Type | Description |
---|---|---|
pointer | Object | with “x” and “y” number values |
- 源码:fabric.js, line 12080
- 返回: {x:Number,y:Number}
sendBackwards(object, intersectingopt) → {fabric.Canvas}
在绘制的对象堆栈中向下移动一个对象或一个选区。一个可选的参数,相交允许将对象移动到第一个相交的对象后面。交叉点是通过边界盒计算的。如果没有找到相交点,堆栈中就不会有变化。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object | Object to send | |
intersecting | Boolean |
optional
|
If true , send object behind next lower intersecting object
|
- 继承:fabric.StaticCanvas#sendBackwards
- 源码:fabric.js, line 10121
- 返回:fabric.Canvas
sendToBack(object) → {fabric.Canvas}
将一个对象或多选的对象移到所画对象堆栈的底部
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to send to back |
- 继承:fabric.StaticCanvas#sendToBack
- 源码:fabric.js, line 10059
- 返回:fabric.Canvas
setActiveObject(object, eopt) → {fabric.Canvas}
设置给定对象为画布上唯一的活动对象
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
object | fabric.Object | Object to set as an active one | |
e | Event |
optional
|
Event (passed along when firing “object:selected”) |
- 源码:fabric.js, line 12363
- 返回:fabric.Canvas
setBackgroundColor(backgroundColor, callback) → {fabric.Canvas}
设置画布背景色
- 传参:
Name | Type | Description |
---|---|---|
backgroundColor | String | fabric.Pattern Color or pattern to set background color to |
callback | function | Callback to invoke when background color is set |
- 继承:fabric.StaticCanvas#setBackgroundColor
- 源码:fabric.js, line 8944
- 返回:fabric.Canvas
- 示例
Normal backgroundColor - color valuecanvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); fabric.Pattern used as backgroundColorcanvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png' }, canvas.renderAll.bind(canvas)); fabric.Pattern used as backgroundColor with repeat and offsetcanvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png',repeat: 'repeat',offsetX: 200,offsetY: 100 }, canvas.renderAll.bind(canvas));
setBackgroundImage(image, callback, optionsopt) → {fabric.Canvas}
设置画布背景图片
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
image | fabric.Image | String | fabric.Image instance or URL of an image to set background to |
callback | function | Callback to invoke when image is loaded and set as background | |
options | Object |
optional
|
Optional options to set for the background image. |
- 继承:fabric.StaticCanvas#setBackgroundImage
- 源码:fabric.js, line 8894
- 返回:fabric.Canvas
- 示例
Normal backgroundImage with left/top = 0canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {// Needed to position backgroundImage at 0/0originX: 'left',originY: 'top' }); backgroundImage with different propertiescanvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {opacity: 0.5,angle: 45,left: 400,top: 400,originX: 'left',originY: 'top' }); Stretched backgroundImage #1 - width/height correspond to canvas width/heightfabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img, isError) {img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas)); }); Stretched backgroundImage #2 - width/height correspond to canvas width/heightcanvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {width: canvas.width,height: canvas.height,// Needed to position backgroundImage at 0/0originX: 'left',originY: 'top' }); backgroundImage loaded from cross-origincanvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {opacity: 0.5,angle: 45,left: 400,top: 400,originX: 'left',originY: 'top',crossOrigin: 'anonymous' });
setCursor(value)
设置鼠标样式
- 传参:
Name | Type | Description |
---|---|---|
value | String | Cursor type of the canvas element. |
- 源码:fabric.js, line 11926
- 参考:http://www.w3.org/TR/css3-ui/#cursor
setDimensions(dimensions, optionsopt) → {fabric.Canvas}
设置这个画布实例的尺寸(宽度,高度)。当options.cssOnly标志激活时,你也应该提供测量单位(px/%/em)。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
dimensions | Object | Object with width/height properties | |
options | Object |
optional
|
Options object |
dimensions Properties
Name | Type | Attributes | Description |
---|---|---|---|
width |
Number | String optional
|
Width of canvas element | |
height |
Number | String optional
|
Height of canvas element |
options Properties
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
backstoreOnly | Boolean |
optional
|
false | Set the given dimensions only as canvas backstore dimensions |
cssOnly | Boolean |
optional
|
false | Set the given dimensions only as css dimensions |
- 继承:fabric.StaticCanvas#setDimensions
- 源码:fabric.js, line 9108
- 返回:fabric.Canvas
setHeight(value, optionsopt) → {fabric.Canvas}
设置画布高度
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
value | Number/String | Value to set height to | |
options | Object |
optional
|
Options object |
Properties
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
backstoreOnly | Boolean |
optional
|
false | Set the given dimensions only as canvas backstore dimensions |
cssOnly | Boolean |
optional
|
false | Set the given dimensions only as css dimensions |
- 继承:fabric.StaticCanvas#setHeight
- 源码:fabric.js, line 9093
- 返回:fabric.Canvas
setOverlayColor(overlayColor, callback) → {fabric.Canvas}
设置画布前景色
- 传参:
Name | Type | Description |
---|---|---|
overlayColor | String | fabric.Pattern Color or pattern to set foreground color to |
callback | function | Callback to invoke when foreground color is set |
- 继承:fabric.StaticCanvas#setOverlayColor
- 源码:fabric.js, line 8919
- 返回:fabric.Canvas
- 示例
Normal overlayColor - color valuecanvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); fabric.Pattern used as overlayColorcanvas.setOverlayColor({source: 'http://fabricjs.com/assets/escheresque_ste.png' }, canvas.renderAll.bind(canvas)); fabric.Pattern used as overlayColor with repeat and offsetcanvas.setOverlayColor({source: 'http://fabricjs.com/assets/escheresque_ste.png',repeat: 'repeat',offsetX: 200,offsetY: 100 }, canvas.renderAll.bind(canvas));
setOverlayImage(image, callback, optionsopt) → {fabric.Canvas}
设置该画布的覆盖图像
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
image | fabric.Image/String | fabric.Image instance or URL of an image to set overlay to | |
callback | function | callback to invoke when image is loaded and set as an overlay | |
options | Object |
optional
|
Optional options to set for the overlay image. |
- 继承:fabric.StaticCanvas#setOverlayImage
- 源码:fabric.js, line 8842
- 返回:fabric.Canvas
- 示例
Normal overlayImage with left/top = 0canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {// Needed to position overlayImage at 0/0originX: 'left',originY: 'top' }); overlayImage with different propertiescanvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {opacity: 0.5,angle: 45,left: 400,top: 400,originX: 'left',originY: 'top' }); Stretched overlayImage #1 - width/height correspond to canvas width/heightfabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img, isError) {img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});canvas.setOverlayImage(img, canvas.renderAll.bind(canvas)); }); Stretched overlayImage #2 - width/height correspond to canvas width/heightcanvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {width: canvas.width,height: canvas.height,// Needed to position overlayImage at 0/0originX: 'left',originY: 'top' }); overlayImage loaded from cross-origincanvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {opacity: 0.5,angle: 45,left: 400,top: 400,originX: 'left',originY: 'top',crossOrigin: 'anonymous' });
setViewportTransform(vpt) → {fabric.Canvas}
设置此画布实例的视口变换
- 传参:
Name | Type | Description |
---|---|---|
vpt | Array | the transform in the form of context.transform |
- 重写:fabric.StaticCanvas#setViewportTransform
- 源码:fabric.js, line 9199
- 返回:fabric.Canvas
setWidth(value, optionsopt) → {fabric.Canvas}
设置画布宽度
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
value | Number/String | Value to set width to | |
options | Object |
optional
|
Options object |
Properties
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
backstoreOnly | Boolean |
optional
|
false | Set the given dimensions only as canvas backstore dimensions |
cssOnly | Boolean |
optional
|
false | Set the given dimensions only as css dimensions |
- 继承:fabric.StaticCanvas#setWidth
- 源码:fabric.js, line 9080
- 返回:fabric.Canvas
setZoom(value) → {fabric.Canvas}
设置缩放等级
- 传参:
Name | Type | Description |
---|---|---|
value | Number | to set zoom to, less than 1 zooms out |
- 继承:fabric.StaticCanvas#setZoom
- 源码:fabric.js, line 9251
- 返回:fabric.Canvas
size() → {Number}
返回一个集合的大小(即:包含其对象的数组的长度)。
- 继承:fabric.StaticCanvas#size
- 混入:fabric.Collection.size
- 源码:fabric.js, line 493
- 返回:Number
straightenObject(object) → {fabric.Canvas}
调直对象,然后重新渲染画布
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to straighten |
- 继承:fabric.StaticCanvas#straightenObject
- 源码:fabric.js, line 21333
- 返回:fabric.Canvas
toCanvasElement(multiplieropt, croppingopt)
创建一个新的HTMLCanvas元素,用当前画布的内容绘制。不需要调整实际的大小或重新涂抹。将对象的所有权转移到一个新的画布上,画上它,然后把所有东西都设置回来。这是一个中间步骤,用于获取dataUrl,但它也有助于快速创建画布的图像副本,而无需传递dataUrl字符串。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
multiplier | Number |
optional
|
a zoom factor. |
cropping | Object |
optional
|
Cropping informations |
Properties
Name | Type | Attributes | Description |
---|---|---|---|
left | Number |
optional
|
Cropping left offset. |
top | Number |
optional
|
Cropping top offset. |
width | Number |
optional
|
Cropping width. |
height | Number |
optional
|
Cropping height. |
- 继承:fabric.StaticCanvas#toCanvasElement
- 源码:fabric.js, line 13811
toDatalessJSON(propertiesToIncludeopt) → {String}
返回canvas的无数据的JSON表示
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
propertiesToInclude | Array |
optional
|
Any properties that you might want to additionally include in the output |
- 继承:fabric.StaticCanvas#toDatalessJSON
- 源码:fabric.js, line 9652
- 返回:json string
toDatalessObject(propertiesToIncludeopt) → {Object}
返回画布的无数据对象表示
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
propertiesToInclude | Array |
optional
|
Any properties that you might want to additionally include in the output |
- 继承:fabric.StaticCanvas#toDatalessObject
- 源码:fabric.js, line 9670
- 返回:object representation of an instance
toDataURL(optionsopt) → {String}
将画布元素导出为dataurl图片。注意,当使用乘法器时,裁剪会有适当的比例。
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
options | Object |
optional
|
Options object |
Properties
Name | Type | Attributes | Default Description |
---|---|---|---|
format | String |
optional
|
png |
quality | Number |
optional
|
1 |
multiplier | Number |
optional
|
1 |
left | Number |
optional
|
|
top | Number |
optional
|
|
width | Number |
optional
|
|
height | Number |
optional
|
|
enableRetinaScaling | Boolean |
optional
|
- 继承:fabric.StaticCanvas#toDataURL
- 源码:fabric.js, line 13788
- 返回:Returns a data: URL containing a representation of the object in the format specified by options.format
- 示例
Generate jpeg dataURL with lower qualityvar dataURL = canvas.toDataURL({format: 'jpeg',quality: 0.8 }); Generate cropped png dataURL (clipping of canvas)var dataURL = canvas.toDataURL({format: 'png',left: 100,top: 100,width: 200,height: 200 }); Generate double scaled png dataURLvar dataURL = canvas.toDataURL({format: 'png',multiplier: 2 });
- toJSON(propertiesToIncludeopt) → {Object}
返回canvas的对象表示,提供这个别名是因为如果你在一个实例上调用JSON.stringify,toJSON对象将被调用,如果它存在的话。有一个toJSON方法意味着你可以做JSON.stringify(myCanvas)
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
propertiesToInclude | Array |
optional
|
Any properties that you might want to additionally include in the output |
- 继承:fabric.StaticCanvas#toJSON
- 源码:fabric.js, line 10379
- 教程: http://fabricjs.com/fabric-intro-part-3#serialization
- 返回:JSON compatible object
- 示例
JSON without additional propertiesvar json = canvas.toJSON(); JSON with additional properties includedvar json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']); JSON without default valuescanvas.includeDefaultValues = false; var json = canvas.toJSON();
toObject(propertiesToIncludeopt) → {Object}
返回画布的对象表示
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
propertiesToInclude | Array |
optional
|
Any properties that you might want to additionally include in the output |
- 继承:fabric.StaticCanvas#toObject
- 源码:fabric.js, line 9661
- 返回:object representation of an instance
toString() → {String}
返回一个实例的字符串表示
- 继承:fabric.StaticCanvas#toString
- 源码:fabric.js, line 10310
- 返回:string representation of an instance
toSVG(optionsopt, reviveropt) → {String}
返回画布的SVG表示
- 传参:
Name | Type | Attributes | Description |
---|---|---|---|
options | Object |
optional
|
Options object for SVG output |
viewBox | Object |
optional
|
SVG viewbox object |
options Properties
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
suppressPreamble | Boolean |
optional
|
false | If true xml tag is not included |
viewBox Properties
Name | Type | Attributes | Description |
---|---|---|---|
x | Number |
optional
|
x-coordinate of viewbox |
y | Number |
optional
|
y-coordinate of viewbox |
width | Number |
optional
|
Width of viewbox |
height | Number |
optional
|
Height of viewbox |
encoding | String |
optional
|
UTF-8 Encoding of SVG output |
width | String |
optional
|
desired width of svg with or without units |
height | String |
optional
|
desired height of svg with or without units |
reviver | function |
optional
|
Method for further parsing of svg elements, called after each fabric object converted into svg representation. |
继承:fabric.StaticCanvas#toSVG
源码:fabric.js, line 9803
教程: http://fabricjs.com/fabric-intro-part-3#serialization
返回:SVG string
示例
Normal SVG output
var svg = canvas.toSVG(); SVG output without preamble (without <?xml ../>)var svg = canvas.toSVG({suppressPreamble: true}); SVG output with viewBox attributevar svg = canvas.toSVG({viewBox: {x: 100,y: 100,width: 200,height: 300} }); SVG output with different encoding (default: UTF-8)var svg = canvas.toSVG({encoding: 'ISO-8859-1'}); Modify SVG output with reviver functionvar svg = canvas.toSVG(null, function(svg) {return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', ''); });
viewportCenterObject(object) → {fabric.Canvas}
将对象在视口中的垂直和水平方向居中。
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to center vertically and horizontally |
- 继承:fabric.StaticCanvas#viewportCenterObject
- 源码:fabric.js, line 9592
- 返回:fabric.Canvas
viewportCenterObjectH(object) → {fabric.Canvas}
将对象在视口中水平居中,object.top保持不变。
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to center vertically and horizontally |
- 继承:fabric.StaticCanvas#viewportCenterObjectH
- 源码:fabric.js, line 9604
- 返回:fabric.Canvas
viewportCenterObjectV(object) → {fabric.Canvas}
在视口中垂直放置对象,对象的顶部不变。
- 传参:
Name | Type | Description |
---|---|---|
object | fabric.Object | Object to center vertically and horizontally |
- 继承:fabric.StaticCanvas#viewportCenterObjectV
- 源码:fabric.js, line 9616
- 返回:fabric.Canvas
zoomToPoint(point, value) → {fabric.Canvas}
设置此画布实例的缩放级别,以点为中心的缩放意味着在同一点上的后续缩放将具有从该点开始的缩放的视觉效果。该点不会移动。它与画布中心或视口的视觉中心没有关系。
- 传参:
Name | Type | Description |
---|---|---|
point | fabric.Point | to zoom with respect to |
value | Number | to set zoom to, less than 1 zooms out |
- 继承:fabric.StaticCanvas#zoomToPoint
- 源码:fabric.js, line 9233
- 返回:fabric.Canvas
fabric.Canvas相关推荐
- fabric canvas 清空并重置画布
fabric.js是一个强大而简约的依赖HTML5上的 canvas的javascript库,Fabric在canvas元素顶部提供了交互式对象模型,它还具有SVG到画布(和画布到SVG)解析器,官网 ...
- Canvas实用库Fabric.js使用手册
简介 什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的 ...
- 强大的Canvas开源库Fabric.js简介与开发指南
什么是Fabric.js? Fabric.js 是一个强大且简单的Javascript HTML5 Canvas库. 官网地址:http://fabricjs.com/ 为什么要使用Fabric.js ...
- canvas插件 fabric.js 使用
fabric.js使用 fabric.js 是 常用的 canvas 插件 1, 在项目中使用 2, 特殊用法 ①, 基本设置 ②, 画板数据的导入导出 ③, 遮罩 Pattern ( 引用官网案例 ...
- canvas火焰动画、管线流动动画-Fabric.js
官网 http://fabricjs.com/ 一个canvas框架 项目地址 效果 代码 <template><div class="home">< ...
- Fabricjs对Canvas画布和对象的事件监听
场景 Fabricjs一个简单强大的Canvas绘图库快速入门: Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上, ...
- Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的 ...
- Fabricjs在Canvas上插入照片并设置缩小和翻转属性
场景 Fabricjs一个简单强大的Canvas绘图库快速入门: Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上, ...
- Fabricjs一个简单强大的Canvas绘图库快速入门
场景 Fabric官网 Fabric.js Javascript Canvas Library Fabric.js 是一个可以简化 Canvas 程序编写的库. Fabric.js 为 Canvas ...
最新文章
- CCNP之BSCI实验6:EIGRP验证
- 如何成为一名卓越的前端工程师
- java知识点--基础篇(5)
- 通过已有SQL语句,生成数据库模型PDM
- 思维导图学Java编程思想
- Codeforces Round #FF (Div. 2) D. DZY Loves Modification 贪心+优先队列
- 滴滴的2019:巨亏和裁员之后,群狼将至
- 制造业案例 | 美创助力纳爱斯集团三层业务安全审计实践
- 网页游戏外挂辅助AMF模拟通讯必备
- SolarWinds 黑客攻击可能与 Turla APT 相关
- Modelsim与debussy联合仿真
- 22考研|英语词汇该如何记忆?
- 电子签名行业2017新风向
- HC-05蓝牙配对AT指令
- 从0开始安装苹果cms及其资源采集和页面部分代码
- 【手把手教你】使用Logistic回归、LDA和QDA模型预测指数涨跌
- 拓扑概念和GIS拓扑函数
- NKD的配置和编写JNI的步骤
- use of undeclared identifier ‘connect‘
- Java教程19—Java中的关联关系