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://www.kaotop.com/file/tupian/20220523/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));
fabric.Pattern used as backgroundColor with repeat and offset

canvas.setBackgroundColor({
  source: 'http://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));
fabric.Pattern used as overlayColor with repeat and offset

canvas.setOverlayColor({
  source: 'http://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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://www.kaotop.com/file/tupian/20220523/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

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/zaji/1298696.html

fabric.Canvas

发表评论

评论列表（0条）