在线工具
网站地图    收藏    合作   
<

快捷菜单 返回顶部

fabric.js中文API

fabric.js中文在线API,fabric.js中文文档API大全

Class: Canvas

fabric.Canvas

new Canvas()

Canvas class 帆布类
Source:
Tutorials:
See:
Fires:
  • object:modified at the end of a transform or any change when statefull is true
  • object:rotating while an object is being rotated from the control
  • object:scaling while an object is being scaled by controls
  • object:moving while an object is being dragged
  • object:skewing while an object is being skewed from the controls
  • before:transform before a transform is is started
  • before:selection:cleared
  • selection:cleared
  • selection:updated
  • selection:created
  • path:created after a drawing operation ends and the path is added
  • mouse:down
  • mouse:move
  • mouse:up
  • mouse:down:before on mouse down,event: before the inner fabric logic runs
  • mouse:move:before on mouse move,event: before the inner fabric logic runs
  • mouse:up:before on mouse up,event: before the inner fabric logic runs
  • mouse:over
  • mouse:out
  • mouse:dblclick whenever a native dbl click event fires on the canvas.
  • event:dragover
  • event:dragenter
  • event:dragleave
  • drop:before before drop event. same native event.event: This is added to handle edge cases
  • event:drop
  • after:render at the end of the render process,event: receives the context in the callback
  • before:render at start the render process,event: receives the context in the callback

Extends

Members

allowTouchScrolling :Boolean

Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas 指示在使用触摸屏并在画布上拖动时是否可以滚动浏览器
Type:
  • Boolean
Inherited From:
Source:

altActionKey :String

Indicates which key enable alternate action on corner values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled feature disabled. 指示在角落上启用交替动作的键 值:'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或'none'或任何其他不是修饰键的字符串 Feature is disabled Feature被禁用。
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

altSelectionKey :null|String

Indicates which key enable alternative selection in case of target overlapping with active object values: 'altKey', 'shiftKey', 'ctrlKey'. For a series of reason that come from the general expectations on how things should work, this feature works only for preserveObjectStacking true. If `null` or 'none' or any other string that is not a modifier key feature is disabled. 指示启用备选选择的键 如果目标与活动对象重叠 值:'altKey'， 'shiftKey'， 'ctrlKey'。 因为一系列的原因，来自于人们对如何 事情应该工作，这个特性只工作于preserveObjectStacking true。 如果' null '或'none'或任何其他不是修饰键的字符串 功能是禁用的。
Type:
  • null | String
Since:
  • 1.6.5
Source:

backgroundColor :String|fabric.Pattern

Background color of canvas instance. Should be set via fabric.StaticCanvas#setBackgroundColor. 画布实例的背景色。 应该通过fabric.StaticCanvas#setBackgroundColor设置。
Type:
Inherited From:
Source:

backgroundImage :fabric.Image

Background image of canvas instance. since 2.4.0 image caching is active, please when putting an image as background, add to the canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom vale. As an alternative you can disable image objectCaching 画布实例的背景图像。 由于2.4.0图像缓存是活动的，请在将图像作为背景时，添加到 Canvas属性是它所在画布的引用。否则，图像无法检测到缩放 淡水河谷。另一种方法是禁用图像objectCaching
Type:
Inherited From:
Source:

backgroundVpt :Boolean

if set to false background image is not affected by viewport transform 如果设置为假背景图像不受视口变换的影响
Type:
  • Boolean
Since:
  • 1.6.3
Inherited From:
Default Value:
  • true
Source:

centeredKey :String

Indicates which key enable centered Transform values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled feature disabled. 指示哪个键启用居中变换 值:'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或'none'或任何其他不是修饰键的字符串 Feature is disabled Feature被禁用。
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • altKey
Source:

centeredRotation :Boolean

When true, objects use center point as the origin of rotate transformation. Backwards incompatibility note: This property replaces "centerTransform" (Boolean). 当为true时，对象使用中心点作为旋转变换的原点。 注意:此属性将替换“centerTransform”(布尔值)。
Type:
  • Boolean
Since:
  • 1.3.4
Source:

centeredScaling :Boolean

When true, objects use center point as the origin of scale transformation. Backwards incompatibility note: This property replaces "centerTransform" (Boolean). 当为true时，对象使用中心点作为尺度变换的原点。 注意:此属性将替换“centerTransform”(布尔值)。
Type:
  • Boolean
Since:
  • 1.3.4
Source:

clipPath :fabric.Object

a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the canvas has rendered, and the context is placed in the top left corner of the canvas. clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true 一个fabricObject，没有描边，用它们的形状定义一个裁剪区域。填充黑色 clipPath对象在画布渲染后被使用，而上下文被放置在 画布的左上角。 clipPath将剪切掉控件，如果你不希望发生这种情况，请使用controlsAboveOverlay = true
Type:
Inherited From:
Source:

containerClass :String

Default element class that's given to wrapper (div) element of canvas 给画布的包装器(div)元素的默认元素类
Type:
  • String
Default Value:
  • canvas-container
Source:

controlsAboveOverlay :Boolean

Indicates whether object controls (borders/controls) are rendered above overlay image 指示对象控件(边框/控件)是否呈现在覆盖图像之上
Type:
  • Boolean
Inherited From:
Source:

defaultCursor :String

Default cursor value used for the entire canvas 用于整个画布的默认游标值
Type:
  • String
Default Value:
  • default
Source:

enablePointerEvents :Boolean

When the option is enabled, PointerEvent is used instead of MouseEvent. 当启用该选项时，将使用PointerEvent而不是MouseEvent。
Type:
  • Boolean
Source:

enableRetinaScaling :Boolean

When true, canvas is scaled by devicePixelRatio for better rendering on retina screens 当为true时，画布通过devicePixelRatio缩放，以便在视网膜屏幕上更好地渲染
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

fireMiddleClick :Boolean

Indicates if the canvas can fire middle click events 指示画布是否可以触发中间单击事件
Type:
  • Boolean
Since:
  • 1.7.8
Source:

fireRightClick :Boolean

Indicates if the canvas can fire right click events 指示画布是否可以触发右键事件
Type:
  • Boolean
Since:
  • 1.6.5
Source:

freeDrawingCursor :String

Cursor value used during free drawing 自由绘图时使用的游标值
Type:
  • String
Default Value:
  • crosshair
Source:

FX_DURATION :Number

Animation duration (in ms) for fx* methods fx*方法的动画持续时间(毫秒)
Type:
  • Number
Inherited From:
Default Value:
  • 500
Source:

hoverCursor :String

Default cursor value used when hovering over an object on canvas 悬停在画布上的对象上时使用的默认游标值
Type:
  • String
Default Value:
  • move
Source:

imageSmoothingEnabled :Boolean

Indicates whether this canvas will use image smoothing, this is on by default in browsers 指示此画布是否将使用图像平滑，这在浏览器中默认是打开的
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

includeDefaultValues :Boolean

Indicates whether toObject/toDatalessObject should include default values if set to false, takes precedence over the object value. 指示toObject/toDatalessObject是否应包含默认值 如果设置为false，则优先于对象值。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

interactive :Boolean

Indicates that canvas is interactive. This property should not be changed. 指示画布是交互式的。不应更改此属性。
Type:
  • Boolean
Default Value:
  • true
Source:

isDrawingMode :Boolean

When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. After mousedown, mousemove creates a shape, and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. 当为true时，画布上的鼠标事件(mousedown/ mouseremove /mouseup)将导致自由绘制。 按下鼠标后，鼠标移动创建一个形状， 然后mouseup结束它并添加fabric实例。路径的画布上。
Type:
  • Boolean
Source:
Tutorials:

moveCursor :String

Default cursor value used when moving an object on canvas 在画布上移动对象时使用的默认游标值
Type:
  • String
Default Value:
  • move
Source:

notAllowedCursor :String

Cursor value used for disabled elements ( corners with disabled action ) 用于禁用元素的游标值(带有禁用动作的角)
Type:
  • String
Since:
  • 2.0.0
Default Value:
  • not-allowed
Source:

overlayColor :String|fabric.Pattern

Overlay color of canvas instance. Should be set via fabric.StaticCanvas#setOverlayColor 覆盖画布实例的颜色。 应通过织物定形。StaticCanvas # setOverlayColor
Type:
Since:
  • 1.3.9
Inherited From:
Source:

overlayImage :fabric.Image

Overlay image of canvas instance. since 2.4.0 image caching is active, please when putting an image as overlay, add to the canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom vale. As an alternative you can disable image objectCaching 覆盖图像的画布实例。 由于2.4.0图像缓存是活动的，请在将图像作为叠加时，添加到 Canvas属性是它所在画布的引用。否则，图像无法检测到缩放 淡水河谷。另一种方法是禁用图像objectCaching
Type:
Inherited From:
Source:

overlayVpt :Boolean

if set to false overlya image is not affected by viewport transform 如果设置为false, overlya图像不受视口变换的影响
Type:
  • Boolean
Since:
  • 1.6.3
Inherited From:
Default Value:
  • true
Source:

perPixelTargetFind :Boolean

When true, object detection happens on per-pixel basis rather than on per-bounding-box 当为true时，对象检测按像素而不是按边界框进行
Type:
  • Boolean
Source:

preserveObjectStacking :Boolean

Indicates whether objects should remain in current stack position when selected. When false objects are brought to top and rendered as part of the selection group 指示对象在选中时是否应保持在当前堆栈位置。 当假对象被带到顶部并作为选择组的一部分渲染时
Type:
  • Boolean
Source:

renderOnAddRemove :Boolean

Indicates whether fabric.Collection.add, fabric.Collection.insertAt and fabric.Collection.remove, fabric.StaticCanvas.moveTo, fabric.StaticCanvas.clear and many more, should also re-render canvas. Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once since the renders are quequed and executed one per frame. Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) Left default to true to do not break documentation and old app, fiddles. 指示是否fabric.Collection。添加，fabric.Collection.insertAt和fabric.Collection.remove fabric.StaticCanvas。moveTo, fabric.StaticCanvas.clear等等，也应该重新渲染画布。 禁用此选项将不会给性能提升时，添加/删除大量的对象/从画布一次 因为渲染是排队和每帧执行一个。 禁用是建议无论如何和管理应用程序的渲染手动不是一个大的努力(canvas.requestRenderAll()) 左默认为true不破坏文档和旧的应用程序，fiddles。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

selection :Boolean

Indicates whether group selection should be enabled 指示是否应启用组选择
Type:
  • Boolean
Default Value:
  • true
Source:

selectionBorderColor :String

Color of the border of selection (usually slightly darker than color of selection itself) 选区边框的颜色(通常比选区本身的颜色稍深)
Type:
  • String
Default Value:
  • rgba(255, 255, 255, 0.3)
Source:

selectionColor :String

Color of selection 颜色的选择
Type:
  • String
Default Value:
  • rgba(100, 100, 255, 0.3)
Source:

selectionDashArray :Array

Default dash array pattern If not empty the selection border is dashed 默认的破折号数组模式 如果不为空，则选择边框将被划掉
Type:
  • Array
Source:

selectionFullyContained :Boolean

Select only shapes that are fully contained in the dragged selection rectangle. 只选择完全包含在拖拽选择矩形中的形状。
Type:
  • Boolean
Source:

selectionKey :String|Array

Indicates which key or keys enable multiple click selection Pass value as a string or array of strings values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or empty or containing any other string that is not a modifier key feature is disabled. 指示哪个键或哪个键启用多次单击选择 将value作为字符串或字符串数组传递 值:'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或为空或包含任何其他不是修饰键的字符串 功能是禁用的。
Type:
  • String | Array
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

selectionLineWidth :Number

Width of a line used in object/group selection 用于对象/组选择的线的宽度
Type:
  • Number
Default Value:
  • 1
Source:

skipOffscreen :Boolean

Based on vptCoords and object.aCoords, skip rendering of objects that are not included in current viewport. May greatly help in applications with crowded canvas and use of zoom/pan If One of the corner of the bounding box of the object is on the canvas the objects get rendered. 基于vptCoords和对象。aCoords，跳过对象的渲染 不包含在当前视口中。 可能在拥挤的画布和使用缩放/平移的应用程序中有很大的帮助 如果对象的边框的一个角在画布上 对象被渲染。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

skipTargetFind :Boolean

When true, target detection is skipped. Target detection will return always undefined. click selection won't work anymore, events will fire with no targets. if something is selected before setting it to true, it will be deselected at the first click. area selection will still work. check the `selection` property too. if you deactivate both, you should look into staticCanvas. 当为true时，将跳过目标检测。目标检测将返回始终未定义。 点击选择不再工作，事件将在没有目标的情况下触发。 如果在设置为true之前选择了某些内容，那么在第一次单击时它将被取消选择。 区域选择仍然有效。检查“selection”属性。 如果禁用了两者，则应该查看staticCanvas。
Type:
  • Boolean
Source:

snapAngle :Number

Indicates the angle that an object will lock to while rotating. 指示对象在旋转时锁定的角度。
Type:
  • Number
Since:
  • 1.6.7
Source:

snapThreshold :null|Number

Indicates the distance from the snapAngle the rotation will lock to the snapAngle. When `null`, the snapThreshold will default to the snapAngle. 指示旋转将锁定的snapAngle到snapAngle的距离。 当' null '时，snapThreshold将默认为snapAngle。
Type:
  • null | Number
Since:
  • 1.6.7
Source:

stateful :Boolean

Indicates whether objects' state should be saved 指示是否应保存对象的状态
Type:
  • Boolean
Inherited From:
Source:

stopContextMenu :Boolean

Indicates if the right click on canvas can output the context menu or not 指示在画布上的右键单击是否可以输出上下文菜单
Type:
  • Boolean
Since:
  • 1.6.5
Source:

svgViewportTransformation :Boolean

When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, a zoomed canvas will then produce zoomed SVG output. 当为true时，getSvgTransform()将应用StaticCanvas。viewportTransform转换为SVG转换。当真正的, 缩放后的画布将产生缩放后的SVG输出。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

targetFindTolerance :Number

Number of pixels around target pixel to tolerate (consider active) during object detection 目标像素周围的像素数，以容忍(认为活动)在目标检测
Type:
  • Number
Source:

targets :Array.<fabric.Object>

Keep track of the subTargets for Mouse Events 跟踪鼠标事件的子目标
Type:
Source:

uniformScaling :Boolean

When true, objects can be transformed by one side (unproportionally) when dragged on the corners that normally would not do that. 当为true时，对象可以由一侧转换(不成比例地) 当拖到角落时，通常不会这样做。
Type:
  • Boolean
Since:
  • fabric 4.0 // changed name and default value
Default Value:
  • true
Source:

uniScaleKey :String

Indicates which key switches uniform scaling. values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled. totally wrong named. this sounds like `uniform scaling` if Canvas.uniformScaling is true, pressing this will set it to false and viceversa. 指示哪个键切换均匀缩放。 值:'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或'none'或任何其他不是修饰键的字符串 功能是禁用的。 完全错误的命名。这听起来像"均匀缩放" 如果画布。uniformScaling为true，按下这个将设置为false ,反之亦然。
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

viewportTransform :Array

The transformation (a Canvas 2D API transform matrix) which focuses the viewport 聚焦视口的转换(一个Canvas 2D API转换矩阵)
Type:
  • Array
Inherited From:
Source:
Examples

Default transform

canvas.viewportTransform = [1, 0, 0, 1, 0, 0];

Scale by 70% and translate toward bottom-right by 50, without skewing

canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50];

vptCoords

Describe canvas element extension over design properties are tl,tr,bl,br. if canvas is not zoomed/panned those points are the four corner of canvas if canvas is viewportTransformed you those points indicate the extension of canvas element in plain untrasformed coordinates The coordinates get updated with @method calcViewportBoundaries. 描述画布元素在设计上的扩展 属性是tl、tr、提单、br。 如果画布没有缩放/平移，这些点是画布的四个角 如果canvas是viewporttransforms，这些点表示扩展 的canvas元素 坐标用@method calcviewportborders更新。
Inherited From:
Source:

Methods

__onMouseWheel(e)

Method that defines actions when an Event Mouse Wheel 方法，该方法定义事件鼠标滚轮时的操作
Parameters:
Name Type Description
e Event Event object fired on mouseup事件对象在mouseup时触发
Source:

_chooseObjectsToRender() → {Array}

Divides objects in two groups, one to render immediately and one to render as activeGroup. 将对象分为两组，一组立即呈现 一个渲染为activeGroup。
Source:
Returns:
objects to render immediately and pushes the other in the activeGroup.
Type
Array

_onDrop(e)

`drop:before` is a an event that allow you to schedule logic before the `drop` event. Prefer `drop` event always, but if you need to run some drop-disabling logic on an event, since there is no way to handle event handlers ordering, use `drop:before` ' drop:before '是一个允许你安排逻辑的事件 在“drop”事件之前。喜欢' drop '事件总是，但如果你需要 在事件上运行一些删除禁用逻辑，因为没有办法 要处理事件处理程序排序，请使用' drop:before '
Parameters:
Name Type Description
e Event 组织类
Source:

_setCursorFromEvent(e, target)

Sets the cursor depending on where the canvas is being hovered. Note: very buggy in Opera 根据画布悬停的位置设置光标。 注意:Opera中有很多bug
Parameters:
Name Type Description
e Event Event object事件对象
target Object Object that the mouse is hovering, if so.如果是，则表示鼠标悬停的对象。
Source:

absolutePan(point) → {fabric.Canvas}

Pan viewport so as to place point at top left corner of canvas 平移视口以便放置点在画布的左上角
Parameters:
Name Type Description
point fabric.Point to move to搬到
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

add(…object) → {Self}

Adds objects to collection, Canvas or Group, then renders canvas (if `renderOnAddRemove` is not `false`). in case of Group no changes to bounding box are made. Objects should be instances of (or inherit from) fabric.Object Use of this function is highly discouraged for groups. you can add a bunch of objects with the add method but then you NEED to run a addWithUpdate call for the Group class or position/bbox will be wrong. 向集合、画布或组添加对象，然后呈现画布 (如果' renderOnAddRemove '不是' false ')。 在组的情况下，没有改变边框。 对象应该是fabric的实例(或继承自)。对象 强烈建议对团体使用此功能。 你可以用add方法添加一堆对象，但你需要 对Group类或position/bbox运行addWithUpdate调用将是错误的。
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
 Zero or more fabric instances0个或多个结构实例
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

bringForward(object, intersectingopt) → {fabric.Canvas}

Moves an object or a selection up in stack of drawn objects An optional parameter, intersecting allows to move the object in front of the first intersecting object. Where intersection is calculated with bounding box. If no intersection is found, there will not be change in the stack. 在绘制对象的堆栈中向上移动对象或所选对象 一个可选参数，intersecting允许将对象移动到前面 第一个相交物体的。用什么来计算交集 边界框。如果没有发现交集，则不会有变化 堆栈。
Parameters:
Name Type Attributes Description
object fabric.Object Object to send对象发送
intersecting Boolean <optional>
 If `true`, send object in front of next upper intersecting object如果' true '，将对象发送到上一个相交对象的前面
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

bringToFront(object) → {fabric.Canvas}

Moves an object or the objects of a multiple selection to the top of the stack of drawn objects 移动一个对象或多重选择的对象 到绘制对象堆栈的顶部
Parameters:
Name Type Description
object fabric.Object Object to send对象发送
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

calcOffset() → {fabric.Canvas}

Calculates canvas element offset relative to the document This method is also attached as "resize" event handler of window 计算画布元素相对于文档的偏移量 此方法还附加为窗口的“调整大小”事件处理程序
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

calcViewportBoundaries() → {Object}

Calculate the position of the 4 corner of canvas with current viewportTransform. helps to determinate when an object is in the current rendering viewport using object absolute coordinates ( aCoords ) 用当前的viewportTransform计算画布的4个角的位置。 帮助确定对象何时处于当前呈现视口中 对象绝对坐标
Inherited From:
Source:
Returns:
points.tl
Type
Object

centerObject(object) → {fabric.Canvas}

Centers object vertically and horizontally in the canvas 将对象在画布中垂直和水平居中
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally对象以垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

centerObjectH(object) → {fabric.Canvas}

Centers object horizontally in the canvas 在画布中水平居中对象
Parameters:
Name Type Description
object fabric.Object Object to center horizontally对象以水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

centerObjectV(object) → {fabric.Canvas}

Centers object vertically in the canvas 在画布中垂直居中对象
Parameters:
Name Type Description
object fabric.Object Object to center vertically物体垂直居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

clear() → {fabric.Canvas}

Clears all contexts (background, main, top) of an instance 清除实例的所有上下文(background, main, top)
Overrides:
Source:
Returns:
thisArg
Type
fabric.Canvas

clearContext(ctx) → {fabric.Canvas}

Clears specified context of canvas element 清除画布元素的指定上下文
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to clear上下文清楚
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

clone(callbackopt, propertiesopt)

Clones canvas instance 克隆帆布实例
Parameters:
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要包含在克隆的画布和子对象中的属性数组
Inherited From:
Source:

cloneWithoutData(callbackopt)

Clones canvas instance without cloning existing data. This essentially copies canvas dimensions, clipping properties, etc. but leaves data empty (so that you can populate it with your own) 克隆画布实例而不克隆现有数据。 这基本上复制了画布的尺寸、剪切属性等。 但将数据保留为空(以便您可以用自己的数据填充它)
Parameters:
Name Type Attributes Description
callback Object <optional>
 Receives cloned instance as a first argument接收克隆实例作为第一个参数
Inherited From:
Source:

complexity() → {Number}

Returns number representation of a collection complexity 返回集合复杂度的数字表示
Inherited From:
Mixes In:
Source:
Returns:
complexity
Type
Number

contains(object, deepopt) → {Boolean}

Returns true if collection contains an object 如果集合包含一个对象，则返回true
Parameters:
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`' true '检查所有后代，' false '只检查' _objects '
Inherited From:
Mixes In:
Source:
Returns:
`true` if collection contains an object
Type
Boolean

createSVGFontFacesMarkup(objects) → {String}

Creates markup containing SVG font faces, font URLs for font faces must be collected by developers and are not extracted from the DOM by fabricjs 创建包含SVG字体的标记， 字体的url必须由开发人员收集 并不是由fabricjs从DOM中提取的
Parameters:
Name Type Description
objects Array Array of fabric objects织物对象阵列
Inherited From:
Source:
Returns:
Type
String

createSVGRefElementsMarkup() → {String}

Creates markup containing SVG referenced elements like patterns, gradients etc. 创建包含SVG引用元素的标记，如模式、渐变等。
Inherited From:
Source:
Returns:
Type
String

discardActiveObject(e) → {fabric.Canvas}

Discards currently active object and fire events. If the function is called by fabric as a consequence of a mouse event, the event is passed as a parameter and sent to the fire function for the custom events. When used as a method the e param does not have any application. 丢弃当前活动的对象和触发事件。如果该函数被fabric调用 作为鼠标事件的结果，该事件作为参数和传递 发送给自定义事件的fire函数。当用作一种方法时 E参数没有任何应用。
Parameters:
Name Type Description
e event 组织类
Source:
Returns:
thisArg
Type
fabric.Canvas

dispose() → {fabric.Canvas}

Clears a canvas element and removes all event listeners 清除画布元素并删除所有事件监听器
Overrides:
Source:
Returns:
thisArg
Type
fabric.Canvas

drawClipPathOnCanvas(ctx)

Paint the cached clipPath on the lowerCanvasEl 在lowerCanvasEl上绘制缓存的clipPath
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render on要呈现的上下文
Inherited From:
Source:

drawControls(ctx)

Draws objects' controls (borders/controls) 绘制对象的控件(边框/控件)
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render controls on上下文来渲染控件
Source:

findTarget(e, skipGroup) → {fabric.Object}

Method that determines what object we are clicking on the skipGroup parameter is for internal use, is needed for shift+click action 11/09/2018 TODO: would be cool if findTarget could discern between being a full target or the outside part of the corner. 方法，该方法确定所单击的对象 skipGroup参数是内部使用的，是shift+click动作所需要的 TODO:如果findTarget能够分辨是完整的目标，那就太酷了 或者角的外面部分。
Parameters:
Name Type Description
e Event mouse event鼠标事件
skipGroup Boolean when true, activeGroup is skipped and only objects are traversed through如果为true，则跳过activeGroup，只遍历对象
Source:
Returns:
the target found
Type
fabric.Object

fire(eventName, optionsopt) → {Self}

Fires event with an optional options object 用可选的options对象触发事件
Parameters:
Name Type Attributes Description
eventName String Event name to fire要触发的事件名称
options Object <optional>
 Options object选择对象
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

forEachObject(callback, context) → {Self}

Executes given function for each object in this group 为该组中的每个对象执行给定的函数
Parameters:
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用当前对象作为第一个参数调用回调， Index——作为第二个，所有对象的数组——作为第三个。 回调是在全局对象的上下文中调用的。“窗口”) 当没有给出' context '参数时
context Object Context (aka thisObject)上下文(即thisObject)
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

fxCenterObjectH(object, callbacksopt) → {fabric.AnimationContext}

Centers object horizontally with animation. 以动画水平居中对象。
Parameters:
Name Type Attributes Description
object fabric.Object Object to center对象为中心
callbacks Object <optional>
 Callbacks object with optional "onComplete" and/or "onChange" properties
Properties
Name Type Attributes Description
onComplete function <optional>
 Invoked on completion上调用完成
onChange function <optional>
 Invoked on every step of animation在动画的每一步上调用
对象具有可选的"onComplete"和/或"onChange"属性 属性 的名字 类型 属性 描述 onComplete 函数 上调用完成 onChange 函数 在动画的每一步调用
Inherited From:
Source:
Returns:
context
Type
fabric.AnimationContext

fxCenterObjectV(object, callbacksopt) → {fabric.AnimationContext}

Centers object vertically with animation. 用动画将对象垂直居中。
Parameters:
Name Type Attributes Description
object fabric.Object Object to center对象为中心
callbacks Object <optional>
 Callbacks object with optional "onComplete" and/or "onChange" properties
Properties
Name Type Attributes Description
onComplete function <optional>
 Invoked on completion上调用完成
onChange function <optional>
 Invoked on every step of animation在动画的每一步上调用
对象具有可选的"onComplete"和/或"onChange"属性 属性 的名字 类型 属性 描述 onComplete 函数 上调用完成 onChange 函数 在动画的每一步调用
Inherited From:
Source:
Returns:
context
Type
fabric.AnimationContext

fxRemove(object, callbacksopt) → {fabric.AnimationContext}

Same as `fabric.Canvas#remove` but animated 一样的面料。帆布#删除但动画
Parameters:
Name Type Attributes Description
object fabric.Object Object to remove对象删除
callbacks Object <optional>
 Callbacks object with optional "onComplete" and/or "onChange" properties
Properties
Name Type Attributes Description
onComplete function <optional>
 Invoked on completion上调用完成
onChange function <optional>
 Invoked on every step of animation在动画的每一步上调用
对象具有可选的"onComplete"和/或"onChange"属性 属性 的名字 类型 属性 描述 onComplete 函数 上调用完成 onChange 函数 在动画的每一步调用
Inherited From:
Source:
Returns:
context
Type
fabric.AnimationContext

fxStraightenObject(object) → {fabric.Canvas}

Same as fabric.Canvas.prototype.straightenObject, but animated fabric.Canvas.prototype一样。straightenObject,但动画
Parameters:
Name Type Description
object fabric.Object Object to straighten对象整理
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

getActiveObject() → {fabric.Object}

Returns currently active object 返回当前活动的对象
Source:
Returns:
active object
Type
fabric.Object

getActiveObjects() → {fabric.Object}

Returns an array with the current selected objects 返回包含当前选定对象的数组
Source:
Returns:
active object
Type
fabric.Object

getCenter() → {Object}

Returns coordinates of a center of canvas. Returned value is an object with top and left properties 返回画布中心的坐标。 返回值是一个具有top和left属性的对象
Inherited From:
Source:
Returns:
object with "top" and "left" number values
Type
Object

getContext() → {CanvasRenderingContext2D}

Returns context of canvas where objects are drawn 返回绘制对象的画布上下文
Inherited From:
Source:
Returns:
Type
CanvasRenderingContext2D

getElement() → {HTMLCanvasElement}

Returns <canvas> element corresponding to this instance 返回与此实例对应的元素
Inherited From:
Source:
Returns:
Type
HTMLCanvasElement

getHeight() → {Number}

Returns canvas height (in px) 返回画布高度(单位:px)
Inherited From:
Source:
Returns:
Type
Number

getObjects(typeopt) → {Array}

Returns an array of children objects of this instance Type parameter introduced in 1.3.10 since 2.3.5 this method return always a COPY of the array; 返回此实例的子对象数组 类型参数在1.3.10中引入 自2.3.5以来，该方法总是返回数组的副本;
Parameters:
Name Type Attributes Description
type String <optional>
 When specified, only objects of this type are returned指定时，只返回此类型的对象
Inherited From:
Mixes In:
Source:
Returns:
Type
Array

getPointer(e, ignoreZoom) → {Object}

Returns pointer coordinates relative to canvas. Can return coordinates with or without viewportTransform. ignoreZoom false gives back coordinates that represent the point clicked on canvas element. ignoreZoom true gives back coordinates after being processed by the viewportTransform ( sort of coordinates of what is displayed on the canvas where you are clicking. ignoreZoom true = HTMLElement coordinates relative to top,left ignoreZoom false, default = fabric space coordinates, the same used for shape position To interact with your shapes top and left you want to use ignoreZoom true most of the time, while ignoreZoom false will give you coordinates compatible with the object.oCoords system. of the time. 返回相对于画布的指针坐标。 可以使用viewportTransform或不使用viewportTransform返回坐标。 ignoreZoom false返回表示的坐标 点点在画布元素上。 ignoreZoom true在处理后返回坐标 通过viewportTransform(显示内容的坐标排序) 在您正在单击的画布上。 ignoreZoom true = HTMLElement相对于左上角的坐标 ignoreZoom false，默认=织物空间坐标，与形状位置相同 为了与你的形状的顶部和左边交互，你想使用ignoreZoom true 大多数情况下，ignoreZoom false会给你坐标 与对象兼容。oCoords系统。 的时间。
Parameters:
Name Type Description
e Event 组织类
ignoreZoom Boolean 组织类
Source:
Returns:
object with "x" and "y" number values
Type
Object

getSelectionContext() → {CanvasRenderingContext2D}

Returns context of canvas where object selection is drawn 返回绘制对象选择的画布的上下文
Source:
Returns:
Type
CanvasRenderingContext2D

getSelectionElement() → {HTMLCanvasElement}

Returns <canvas> element on which object selection is drawn 返回绘制对象选择的元素
Source:
Returns:
Type
HTMLCanvasElement

getVpCenter() → {fabric.Point}

Calculate the point in canvas that correspond to the center of actual viewport. 计算画布中与实际视口中心对应的点。
Inherited From:
Source:
Returns:
vpCenter, viewport center
Type
fabric.Point

getWidth() → {Number}

Returns canvas width (in px) 返回画布宽度(单位:px)
Inherited From:
Source:
Returns:
Type
Number

getZoom() → {Number}

Returns canvas zoom level 返回画布缩放级别
Inherited From:
Source:
Returns:
Type
Number

initialize(el, optionsopt) → {Object}

Constructor 构造函数
Parameters:
Name Type Attributes Description
el HTMLElement | String <canvas> element to initialize instance on元素初始化实例
options Object <optional>
 Options object选择对象
Overrides:
Source:
Returns:
thisArg
Type
Object

insertAt(object, index, nonSplicing) → {Self}

Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) An object should be an instance of (or inherit from) fabric.Object Use of this function is highly discouraged for groups. you can add a bunch of objects with the insertAt method but then you NEED to run a addWithUpdate call for the Group class or position/bbox will be wrong. 在指定索引处的集合中插入一个对象，然后渲染画布(如果' renderOnAddRemove '不是' false ') 对象应该是fabric的实例(或从其继承)。对象 强烈建议对团体使用此功能。 你可以用insertAt方法添加一堆对象，但你需要 对Group类或position/bbox运行addWithUpdate调用将是错误的。
Parameters:
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当' true '时，不会发生对象的拼接(移动)
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

isEmpty() → {Boolean}

Returns true if collection contains no objects 如果集合不包含对象，则返回true
Inherited From:
Mixes In:
Source:
Returns:
true if collection is empty
Type
Boolean

isTargetTransparent(target, x, y) → {Boolean}

Returns true if object is transparent at a certain location 如果对象在特定位置是透明的，则返回true
Parameters:
Name Type Description
target fabric.Object Object to check对象来检查
x Number Left coordinate左坐标
y Number Top coordinate高层协调
Source:
Returns:
Type
Boolean

item(index) → {Self}

Returns object at specified index 返回指定索引处的对象
Parameters:
Name Type Description
index Number 组织类
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

loadFromJSON(json, callback, reviveropt) → {fabric.Canvas}

Populates canvas with data from the specified JSON. JSON format must conform to the one of fabric.Canvas#toJSON 用来自指定JSON的数据填充画布。 JSON格式必须符合fabric的格式。帆布# toJSON
Parameters:
Name Type Attributes Description
json String | Object JSON string or objectJSON字符串或对象
callback function Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized回调函数，在解析json时调用 和相应的对象(例如:fabric.Image) 初始化
reviver function <optional>
 Method for further parsing of JSON elements, called after each fabric object created.方法，用于进一步解析JSON元素，在创建每个fabric对象后调用。
Inherited From:
Source:
Tutorials:
See:
Returns:
instance
Type
fabric.Canvas
Examples

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}

Moves an object to specified level in stack of drawn objects 将对象移动到绘制对象堆栈中的指定级别
Parameters:
Name Type Description
object fabric.Object Object to send对象发送
index Number Position to move to移动位置
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

relativePan(point) → {fabric.Canvas}

Pans viewpoint relatively 锅的观点相对
Parameters:
Name Type Description
point fabric.Point (position vector) to move by(位置向量)来移动
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

remove(…object) → {Self}

Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) 从集合中移除对象，然后渲染画布(如果' renderOnAddRemove '不是' false ')
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
 Zero or more fabric instances0个或多个结构实例
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

removeListeners()

Removes all event listeners 移除所有事件监听器
Source:

renderAll() → {fabric.Canvas}

Renders both the top canvas and the secondary container canvas. 呈现顶部画布和次要容器画布。
Overrides:
Source:
Returns:
instance
Type
fabric.Canvas

renderCanvas(ctx, objects) → {fabric.Canvas}

Renders background, objects, overlay and controls. 渲染背景，对象，覆盖和控件。
Parameters:
Name Type Description
ctx CanvasRenderingContext2D 组织类
objects Array to render呈现
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

renderTop() → {fabric.Canvas}

Method to render only the top canvas. Also used to render the group selection box. 方法只渲染顶部画布。 也用于渲染组选择框。
Source:
Returns:
thisArg
Type
fabric.Canvas

requestRenderAll() → {fabric.Canvas}

Append a renderAll request to next animation frame. unless one is already in progress, in that case nothing is done a boolean flag will avoid appending more. 追加一个renderAll请求到下一个动画帧。 除非一个项目已经在进行中，否则什么也做不了 布尔标志将避免追加更多内容。
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

restorePointerVpt(pointer) → {Object}

Returns pointer coordinates without the effect of the viewport 返回不受视口影响的指针坐标
Parameters:
Name Type Description
pointer Object with "x" and "y" number values用“x”和“y”数字值
Source:
Returns:
object with "x" and "y" number values
Type
Object

sendBackwards(object, intersectingopt) → {fabric.Canvas}

Moves an object or a selection down in stack of drawn objects An optional parameter, intersecting allows to move the object in behind the first intersecting object. Where intersection is calculated with bounding box. If no intersection is found, there will not be change in the stack. 在绘制对象的堆栈中向下移动对象或所选对象 一个可选参数，intersecting允许将对象移动到后面 第一个相交的物体。用什么来计算交集 边界框。如果没有发现交集，则不会有变化 堆栈。
Parameters:
Name Type Attributes Description
object fabric.Object Object to send对象发送
intersecting Boolean <optional>
 If `true`, send object behind next lower intersecting object如果' true '，则将对象发送到下一个相交对象的后面
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

sendToBack(object) → {fabric.Canvas}

Moves an object or the objects of a multiple selection to the bottom of the stack of drawn objects 移动一个对象或多重选择的对象 到绘制对象堆栈的底部
Parameters:
Name Type Description
object fabric.Object Object to send to back要发送回的对象
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

setActiveObject(object, eopt) → {fabric.Canvas}

Sets given object as the only active object on canvas 将给定对象设置为画布上唯一的活动对象
Parameters:
Name Type Attributes Description
object fabric.Object Object to set as an active one对象设置为活动对象
e Event <optional>
 Event (passed along when firing "object:selected")事件(在触发"object:selected"时传递)
Source:
Returns:
thisArg
Type
fabric.Canvas

setBackgroundColor(backgroundColor, callback) → {fabric.Canvas}

Sets background color for this canvas 设置此画布的背景色
Parameters:
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设置背景色时调用的回调
Inherited From:
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

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}

Sets background image for this canvas 设置此画布的背景图像
Parameters:
Name Type Attributes Description
image fabric.Image | String fabric.Image instance or URL of an image to set background to织物。要设置背景的图像实例或图像的URL
callback function Callback to invoke when image is loaded and set as background当图像加载并设置为背景时调用的回调
options Object <optional>
 Optional options to set for the background image.为背景图像设置的可选选项。
Inherited From:
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

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)

Set the cursor type of the canvas element 设置画布元素的光标类型
Parameters:
Name Type Description
value String Cursor type of the canvas element.画布元素的游标类型。
Source:
See:

setDimensions(dimensions, optionsopt) → {fabric.Canvas}

Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) 设置此画布实例的尺寸(宽度、高度)。当选择。cssOnly标志激活，你还应该提供度量单位(px/%/em)
Parameters:
Name Type Attributes Description
dimensions Object Object with width/height properties
Properties
Name Type Attributes Description
width Number | String <optional>
 Width of canvas element画布元素宽度
height Number | String <optional>
 Height of canvas element画布元素高度
具有宽度/高度属性的对象 属性 的名字 类型 属性 描述 宽度 数量 | 字符串 画布元素宽度 高度 数量 | 字符串 画布元素高度
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只将给定的尺寸设置为css尺寸
选择对象 属性 的名字 类型 属性 默认的 描述 backstoreOnly 布尔 假 只将给定的尺寸设置为画布备份库尺寸 cssOnly 布尔 假 只将给定的尺寸设置为css尺寸
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

setHeight(value, optionsopt) → {fabric.Canvas}

Sets height of this canvas instance 设置此画布实例的高度
Parameters:
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只将给定的尺寸设置为css尺寸
选择对象 属性 的名字 类型 属性 默认的 描述 backstoreOnly 布尔 假 只将给定的尺寸设置为画布备份库尺寸 cssOnly 布尔 假 只将给定的尺寸设置为css尺寸
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

setOverlayColor(overlayColor, callback) → {fabric.Canvas}

Sets foreground color for this canvas 设置此画布的前景色
Parameters:
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设置前景色时调用的回调函数
Inherited From:
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

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}

Sets overlay image for this canvas 设置此画布的覆盖图像
Parameters:
Name Type Attributes Description
image fabric.Image | String fabric.Image instance or URL of an image to set overlay to织物。要设置覆盖的图像实例或图像的URL
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.可选选项设置覆盖图像。
Inherited From:
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

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}

Sets viewport transformation of this canvas instance 设置此画布实例的视口转换
Parameters:
Name Type Description
vpt Array a Canvas 2D API transform matrixCanvas 2D API转换矩阵
Overrides:
Source:
Returns:
instance
Type
fabric.Canvas

setWidth(value, optionsopt) → {fabric.Canvas}

Sets width of this canvas instance 设置此画布实例的宽度
Parameters:
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只将给定的尺寸设置为css尺寸
选择对象 属性 的名字 类型 属性 默认的 描述 backstoreOnly 布尔 假 只将给定的尺寸设置为画布备份库尺寸 cssOnly 布尔 假 只将给定的尺寸设置为css尺寸
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

setZoom(value) → {fabric.Canvas}

Sets zoom level of this canvas instance 设置此画布实例的缩放级别
Parameters:
Name Type Description
value Number to set zoom to, less than 1 zooms out将缩放设置为，缩小小于1
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

size() → {Number}

Returns a size of a collection (i.e: length of an array containing its objects) 返回集合的大小(即包含其对象的数组的长度)
Inherited From:
Mixes In:
Source:
Returns:
Collection size
Type
Number

straightenObject(object) → {fabric.Canvas}

Straightens object, then rerenders canvas 拉直对象，然后重新渲染画布
Parameters:
Name Type Description
object fabric.Object Object to straighten对象整理
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

toCanvasElement(multiplieropt, croppingopt)

Create a new HTMLCanvas element painted with the current canvas content. No need to resize the actual one or repaint it. Will transfer object ownership to a new canvas, paint it, and set everything back. This is an intermediary step used to get to a dataUrl but also it is useful to create quick image copies of a canvas without passing for the dataUrl string 创建一个新的HTMLCanvas元素，用当前画布内容绘制。 不需要调整实际的大小或重新油漆它。 将转移对象所有权到一个新的画布，绘制它，并设置一切。 这是一个中间步骤，用于获取dataUrl，但它也很有用 创建画布的快速图像副本，而不传递dataUrl字符串
Parameters:
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.种植的高度。
种植信息 属性 的名字 类型 属性 描述 左 数量 裁剪左偏移量。 前 数量 种植前抵消。 宽度 数量 裁剪宽度。 高度 数量 种植的高度。
Inherited From:
Source:

toDatalessJSON(propertiesToIncludeopt) → {String}

Returns dataless JSON representation of canvas 返回画布的无数据JSON表示
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output您可能希望在输出中额外包含的任何属性
Inherited From:
Source:
Returns:
json string
Type
String

toDatalessObject(propertiesToIncludeopt) → {Object}

Returns dataless object representation of canvas 返回画布的无数据对象表示
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output您可能希望在输出中额外包含的任何属性
Inherited From:
Source:
Returns:
object representation of an instance
Type
Object

toDataURL(optionsopt) → {String}

Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately 导出画布元素到一个dataurl图像。注意，当使用乘数时，裁剪是适当缩放的
Parameters:
Name Type Attributes Description
options Object <optional>
 Options object
Properties
Name Type Attributes Default Description
format String <optional>
 png The format of the output image. Either "jpeg" or "png"输出图像的格式。jpeg或png
quality Number <optional>
 1 Quality level (0..1). Only used for jpeg.质量水平(0 . . 1)。仅用于jpeg。
multiplier Number <optional>
 1 Multiplier to scale by, to have consistent乘数要按比例递增，要有一致性
left Number <optional>
 Cropping left offset. Introduced in v1.2.14裁剪左偏移量。介绍了v1.2.14
top Number <optional>
 Cropping top offset. Introduced in v1.2.14种植前抵消。介绍了v1.2.14
width Number <optional>
 Cropping width. Introduced in v1.2.14裁剪宽度。介绍了v1.2.14
height Number <optional>
 Cropping height. Introduced in v1.2.14种植的高度。介绍了v1.2.14
enableRetinaScaling Boolean <optional>
 Enable retina scaling for clone image. Introduce in 2.0.0为克隆图像启用视网膜缩放。在2.0.0介绍
Inherited From:
Source:
See:
Returns:
Returns a data: URL containing a representation of the object in the format specified by options.format
Type
String
Examples

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}

Returns Object representation of canvas this alias is provided because if you call JSON.stringify on an instance, the toJSON object will be invoked if it exists. Having a toJSON method means you can do JSON.stringify(myCanvas) 返回画布的对象表示 提供这个别名是因为如果调用JSON。Stringify对一个实例， toJSON对象存在时将被调用。 使用toJSON方法意味着你可以使用JSON.stringify(myCanvas)
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output您可能希望在输出中额外包含的任何属性
Inherited From:
Source:
Tutorials:
See:
Returns:
JSON compatible object
Type
Object
Examples

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}

Returns object representation of canvas 返回画布的对象表示
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output您可能希望在输出中额外包含的任何属性
Inherited From:
Source:
Returns:
object representation of an instance
Type
Object

toString() → {String}

Returns a string representation of an instance 返回实例的字符串表示形式
Inherited From:
Source:
Returns:
string representation of an instance
Type
String

toSVG(optionsopt, reviveropt) → {String}

Returns SVG representation of canvas 返回画布的SVG表示
Parameters:
Name Type Attributes Description
options Object <optional>
 Options object for SVG output
Properties
Name Type Attributes Default Description
suppressPreamble Boolean <optional>
 false If true xml tag is not included如果不包含true xml标记
viewBox Object <optional>
 SVG viewbox object
Properties
Name Type Attributes Description
x Number <optional>
 x-coordinate of viewbox坐标的viewbox
y Number <optional>
 y-coordinate of viewbox坐标的viewbox
width Number <optional>
 Width of viewbox宽度viewbox
height Number <optional>
 Height of viewboxviewbox高度
SVG viewbox对象 属性 的名字 类型 属性 描述 x 数量 坐标的viewbox y 数量 坐标的viewbox 宽度 数量 宽度viewbox 高度 数量 viewbox高度
encoding String <optional>
 UTF-8 Encoding of SVG outputSVG输出编码
width String <optional>
 desired width of svg with or without units需要的带有或不带有单元的SVG宽度
height String <optional>
 desired height of svg with or without unitsSVG带或不带单元的期望高度
reviver function <optional>
 Method for further parsing of svg elements, called after each fabric object converted into svg representation.方法，用于进一步解析svg元素，在每个转换为svg表示的fabric对象之后调用。
Inherited From:
Source:
Tutorials:
See:
Returns:
SVG string
Type
String
Examples

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}

Centers object vertically and horizontally in the viewport 将对象在视口中垂直和水平居中
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally对象以垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

viewportCenterObjectH(object) → {fabric.Canvas}

Centers object horizontally in the viewport, object.top is unchanged 对象在视口中水平居中。是不变的
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally对象以垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

viewportCenterObjectV(object) → {fabric.Canvas}

Centers object Vertically in the viewport, object.top is unchanged 对象在视口中垂直居中。是不变的
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally对象以垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

zoomToPoint(point, value) → {fabric.Canvas}

Sets zoom level of this canvas instance, the zoom centered around point meaning that following zoom to point with the same point will have the visual effect of the zoom originating from that point. The point won't move. It has nothing to do with canvas center or visual center of the viewport. 设置此画布实例的缩放级别，以点为中心的缩放 意思是，下面缩放到的点与同点会有视觉效果 从该点开始的变焦效果。这个点不动。 它与画布中心或视口的视觉中心无关。
Parameters:
Name Type Description
point fabric.Point to zoom with respect to放大:对…放大
value Number to set zoom to, less than 1 zooms out将缩放设置为，缩小小于1
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com