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 8647

• altActionKey :String
  表示哪个键可以alt操作。altKey, shiftKey, ctrlKey. 如果null或none或任何其他字符串，则禁用功能。
  类型:String
  起始版本:1.6.2
  默认值: shiftKey
  源码:fabric.js, line 11374

• altSelectionKey :null|String
  表示在目标与活动对象值重叠的情况下，哪个键可以启用替代选择。altKey, shiftKey, ctrlKey. 这个功能只对保留对象堆叠preserveObjectStacking为真时有效。如果null或none或任何其他字符串被禁用。
  类型:null | String
  起始版本:1.6.5
  源码:fabric.js, line 11414

• backgroundColor :String|fabric.Pattern
  画布背景颜色
  类型:String | fabric.Pattern
  继承:fabric.StaticCanvas#backgroundColor
  源码:fabric.js, line 8577

• backgroundImage :fabric.Image
  画布实例的背景图像。由于v2.4.0的图像缓存是有效的，当把图像作为背景时，请在画布属性中添加它所在画布的引用。否则，图像无法检测到变焦的程度。解决方案:你可以禁用图像对象缓存
  类型:fabric.Image
  继承:fabric.StaticCanvas#backgroundImage
  源码:fabric.js, line 8587

• backgroundVpt :Boolean
  如果设置为false，则背景图像不受视口转换的影响。
  类型:Boolean
  起始版本:1.6.3
  继承:fabric.StaticCanvas#backgroundVpt
  默认值:true
  源码:fabric.js, line 8669

• centeredKey :String
  表示哪个键启用居中的变换值。altKey, shiftKey, ctrlKey. 如果null或none或任何字符串表示禁用。
  类型:String
  起始版本:1.6.2
  默认值:altKey
  源码:fabric.js, line 11363

• centeredRotation :Boolean
  当为真时，对象使用中心点作为旋转变换的原点。该属性取代了 “centerTransform”（布尔值）
  类型:Boolean
  起始版本:1.3.4
  源码:fabric.js, line 11352

• centeredScaling :Boolean
  当为真时，对象使用中心点作为比例变换的原点。该属性取代了 “centerTransform”（布尔值）
  类型:Boolean
  起始版本:1.3.4
  源码:fabric.js, line 11343

• clipPath :fabric.Object
  clipPath对象在画布渲染时被使用，并且上下文被放置在画布的左上角。 clipPath会夹走控件，如果你不希望发生这种情况，请设置controlsAboveOverlay = true
  类型:fabric.Object
  继承:fabric.StaticCanvas#clipPath
  源码:fabric.js, line 8716

• containerClass :String
  给予canvas的包装（div）元素的默认class值。
  类型:String
  默认值:canvas-container
  源码:fabric.js, line 11499

• controlsAboveOverlay :Boolean
  指示对象控制（边框/控制）是否在覆盖图像上方渲染。
  类型:Boolean
  继承:fabric.StaticCanvas#controlsAboveOverlay
  源码:fabric.js, line 8640

• defaultCursor :String
  用于整个画布的默认游标值
  类型:String
  默认值:default
  源码:fabric.js, line 11470

• enableRetinaScaling :Boolean
  当为真时，画布按devicePixelRatio缩放，以便在视网膜屏幕上更好地呈现。
  类型:Boolean
  继承:fabric.StaticCanvas#enableRetinaScaling
  默认值:true
  源码:fabric.js, line 8684

• fireMiddleClick :Boolean
  指示画布是否可以触发鼠标滚轮点击事件
  类型:Boolean
  起始版本:1.7.8
  源码:fabric.js, line 11583

• fireRightClick :Boolean
  画布是否支持鼠标右键点击事件
  类型:Boolean
  起始版本:1.6.5
  源码:fabric.js, line 11575

• freeDrawingCursor :String
  画布是否支持画笔涂鸦
  类型:String
  默认值:crosshair
  源码:fabric.js, line 11477

• FX_DURATION :Number
  fx*方法的动画持续时间（以ms为单位）。
  类型:Number
  继承:fabric.StaticCanvas#FX_DURATION
  默认值:500
  源码:fabric.js, line 17813

• hoverCursor :String
  悬停在画布上的物体上时使用的默认光标值
  类型:String
  默认值:move
  源码:fabric.js, line 11456

• imageSmoothingEnabled :Boolean
  表示该画布是否使用图像平滑，在浏览器中默认为打开。
  类型:Boolean
  继承:fabric.StaticCanvas#imageSmoothingEnabled
  默认值:true
  源码:fabric.js, line 8654

• includeDefaultValues :Boolean
  指示toObject/toDatalessObject是否应该包括默认值，如果设置为false，则优先于对象值。
  类型:Boolean
  继承:fabric.StaticCanvas#includeDefaultValues
  默认值:true
  源码:fabric.js, line 8614

• interactive :Boolean
  表示画布是互动的。这个属性不可改变。
  类型:Boolean
  默认值:true
  源码:fabric.js, line 11381

• isDrawingMode :Boolean
  如果为真，画布上的鼠标事件（mousedown/mousemove/mouseup）会导致自由绘制。在mousedown之后，mousemove创建了一个形状，然后mouseup最终确定它，并在canvas上添加一个fabric.Path的实例。
  类型:Boolean
  源码:fabric.js, line 11534
  教程: http://fabricjs.com/fabric-intro-part-4#free_drawing

• moveCursor :String
  在画布上移动一个物体时使用的默认光标值
  类型:String
  默认值:move
  源码:fabric.js, line 11463

• notAllowedCursor :String
  用于禁用元素的光标值（带有禁用动作的角）。
  类型:String
  起始版本:2.0.0
  默认值:not-allowed
  源码:fabric.js, line 11492

• overlayColor :String|fabric.Pattern
  画布实例的覆盖颜色。应该通过 fabric.StaticCanvas#setOverlayColor 来设置。
  类型:String | fabric.Pattern
  起始版本:1.3.9
  继承:fabric.StaticCanvas#overlayColor
  源码:fabric.js, line 8596

• overlayImage :fabric.Image
  画布实例的叠加图像。自从2.4.0图像缓存激活后，当把图像作为叠加时，请在画布属性中添加它所在画布的引用。否则，图像无法检测到变焦的程度。解决方案:你可以禁用图像对象缓存
  类型:fabric.Image
  继承:fabric.StaticCanvas#overlayImage
  源码:fabric.js, line 8606

• overlayVpt :Boolean
  如果设置为false，则图像不受视口转换的影响。
  类型:Boolean
  起始版本:1.6.3
  继承:fabric.StaticCanvas#overlayVpt
  默认值:true
  源码:fabric.js, line 8677

• perPixelTargetFind :Boolean
  当为真时，物体检测是在每个像素的基础上进行的，而不是在每个边框的基础上。
  类型:Boolean
  源码:fabric.js, line 11506

• preserveObjectStacking :Boolean
  指示对象在被选择时是否应该保持在当前的堆栈位置。当false，对象会被带到顶部并作为选择组的一部分被渲染。
  类型:Boolean
  源码:fabric.js, line 11542

• renderOnAddRemove :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 8633

• rotationCursor :String
  旋转时鼠标样式
  类型:String
  默认值:crosshair
  源码:fabric.js, line 11484

• selection :Boolean
  表示是否应启用组别选择
  类型:Boolean
  默认值:true
  源码:fabric.js, line 11388

• selectionBorderColor :String
  选区边界的颜色（通常比选区本身的颜色略深）。
  类型:String
  默认值:rgba(255, 255, 255, 0.3)
  源码:fabric.js, line 11435

• selectionColor :String
  选区的颜色
  类型:String
  默认值:rgba(100, 100, 255, 0.3)
  源码:fabric.js, line 11421

• selectionDashArray :Array
  选区虚线边框
  类型:Array
  源码:fabric.js, line 11428

• selectionFullyContained :Boolean
  只选择完全包含在拖动的选择矩形中的形状。
  类型:Boolean
  源码:fabric.js, line 11449

• selectionKey :String|Array
  指示哪个键或哪些键可以实现多次点击选择,将值作为字符串或字符串数组的值。altKey, shiftKey, ctrlKey。
  类型:String | Array
  起始版本:1.6.2
  默认值:shiftKey
  源码:fabric.js, line 11400

• selectionLineWidth :Number
  在对象/组选择中使用的线的宽度
  类型:Number
  默认值:1
  源码:fabric.js, line 11442

• skipOffscreen :Boolean
  基于vptCoords和object.aCoords，跳过渲染那些不在当前视口中的物体。在画布拥挤和使用缩放/平移的情况下，可能会有很大的帮助，如果对象的边界框的一个角在画布上，对象会被渲染。
  类型:Boolean
  继承:fabric.StaticCanvas#skipOffscreen
  默认值:true
  源码:fabric.js, line 8707

• skipTargetFind :Boolean
  当为真时，目标检测被跳过。目标检测将始终返回未定义。点击选择将不再起作用，事件将在没有目标的情况下发生。如果在将其设置为 "真 "之前已经选择了某些东西，它将在第一次点击时被取消选择。
  类型:Boolean
  源码:fabric.js, line 11524

• snapAngle :Number
  表示一个物体在旋转时将锁定的角度。
  类型:Number
  起始版本:1.6.7
  源码:fabric.js, line 11550

• snapThreshold :null|Number
  表示旋转将锁定在snapAngle上的距离。当 "null"时，sapThreshold将默认为sapAngle。
  类型:null | Number
  起始版本:1.6.7
  源码:fabric.js, line 11559

• stateful :Boolean
  表明对象的状态是否应该被保存
  类型:Boolean
  继承:fabric.StaticCanvas#stateful
  源码:fabric.js, line 8621

• stopContextMenu :Boolean
  表示在画布上右击是否可以输出上下文菜单。
  类型:Boolean
  起始版本:1.6.5
  源码:fabric.js, line 11567

• svgViewportTransformation :Boolean
  当为真时，getSvgTransform()将把StaticCanvas.viewportTransform应用于SVG转换。当为真时，一个缩放的画布就会产生缩放的SVG输出。
  类型:Boolean
  继承:fabric.StaticCanvas#svgViewportTransformation
  默认值:true
  源码:fabric.js, line 9764

• targetFindTolerance :Number
  目标像素周围的像素数量，在物体检测过程中容忍（考虑活动）。
  类型:Number
  源码:fabric.js, line 11513

• targets :Array.
  追踪鼠标事件的子目标
  类型:Array.
  源码:fabric.js, line 11589

• uniformScaling :Boolean
  当为真时，对象在角上拖动时，可以转变一边（不按比例），通常不会这样做。
  类型:Boolean
  起始版本:fabric 4.0 // changed name and default value
  默认值:true
  源码:fabric.js, line 11320

• uniScaleKey :String
  表示哪个键可以切换统一缩放。‘altKey’, ‘shiftKey’, ‘ctrlKey’. 如果Canvas.uniformScaling为真，按这个会将其设置为假，反之亦然。
  类型:String
  起始版本:1.6.2
  默认值:shiftKey
  源码:fabric.js, line 11334

• viewportTransform :Array
  聚焦视口的变换（以Canvas变换的格式）
  类型:Array
  继承:fabric.StaticCanvas#viewportTransform
  源码:fabric.js, line 8661

• vptCoords
  如果画布没有被缩放/平移，这些点就是画布的四个角，如果画布被视口转换，这些点就表示画布元素在普通的未变形的坐标中的延伸。
  继承: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
• 示例
  loadFromJSON

  canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
  loadFromJSON with reviver
  
  canvas.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 value

  canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
  fabric.Pattern used as backgroundColor
  
  canvas.setBackgroundColor({
    source: 'http://fabricjs.com/assets/escheresque_ste.png'
  }, canvas.renderAll.bind(canvas));
  fabric.Pattern used as backgroundColor with repeat and offset
  
  canvas.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 = 0

  canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
    // Needed to position backgroundImage at 0/0
    originX: 'left',
    originY: 'top'
  });
  backgroundImage with different properties
  
  canvas.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/height
  
  fabric.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/height
  
  canvas.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/0
    originX: 'left',
    originY: 'top'
  });
  backgroundImage loaded from cross-origin
  
  canvas.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 value

  canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
  fabric.Pattern used as overlayColor
  
  canvas.setOverlayColor({
    source: 'http://fabricjs.com/assets/escheresque_ste.png'
  }, canvas.renderAll.bind(canvas));
  fabric.Pattern used as overlayColor with repeat and offset
  
  canvas.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 = 0

  canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
    // Needed to position overlayImage at 0/0
    originX: 'left',
    originY: 'top'
  });
  overlayImage with different properties
  
  canvas.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/height
  
  fabric.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/height
  
  canvas.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/0
    originX: 'left',
    originY: 'top'
  });
  overlayImage loaded from cross-origin
  
  canvas.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 quality

  var 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 dataURL
  
  var 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 properties

  var json = canvas.toJSON();
  JSON with additional properties included
  
  var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']);
  JSON without default values
  
  canvas.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 attribute
  
  var 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 function
  
  var 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