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
Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
指示在使用触摸屏并在画布上拖动时是否可以滚动浏览器
Type:
- Inherited From:
-
- Source:
-
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.
指示哪个键在角上启用备用动作
values: 'altKey', 'shiftKey', 'ctrlKey'。
如果' null '或'none'或任何其他不是修饰符键的字符串
Feature is disabled Feature已禁用。
Type:
- Since:
-
- Default Value:
-
- Source:
-
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.
指示哪个键启用备选选择
当目标与活动对象重叠时
values: 'altKey', 'shiftKey', 'ctrlKey'。
由于一系列的原因,来自于对如何的普遍期望
这个特性只对preserveObjectStacking true有效。
如果' null '或'none'或任何其他不是修饰符键的字符串
特性被禁用。
Type:
- Since:
-
- Source:
-
Type:
- Inherited From:
-
- Source:
-
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:
-
if set to false background image is not affected by viewport transform
如果设置为false,背景图像不受视口变换的影响
Type:
- Since:
-
- Inherited From:
-
- Default Value:
-
- Source:
-
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.
指示哪个键启用居中变换
values: 'altKey', 'shiftKey', 'ctrlKey'。
如果' null '或'none'或任何其他不是修饰符键的字符串
Feature is disabled Feature已禁用。
Type:
- Since:
-
- Default Value:
-
- Source:
-
When true, objects use center point as the origin of rotate transformation.
Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
当为true时,对象使用中心点作为旋转变换的原点。
向后不兼容注意:此属性取代"centerTransform"(布尔值)。
Type:
- Since:
-
- Source:
-
When true, objects use center point as the origin of scale transformation.
Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
当为true时,对象使用中心点作为尺度转换的原点。
向后不兼容注意:此属性取代"centerTransform"(布尔值)。
Type:
- Since:
-
- Source:
-
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:
-
Default element class that's given to wrapper (div) element of canvas
给canvas的包装器(div)元素的默认元素类
Type:
- Default Value:
-
- Source:
-
Indicates whether object controls (borders/controls) are rendered above overlay image
指示对象控件(边框/控件)是否呈现在覆盖图像上方
Type:
- Inherited From:
-
- Source:
-
Default cursor value used for the entire canvas
用于整个画布的默认游标值
Type:
- Default Value:
-
- Source:
-
When the option is enabled, PointerEvent is used instead of MouseEvent.
当启用该选项时,将使用PointerEvent而不是MouseEvent。
Type:
- Source:
-
When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
当为true时,画布通过devicePixelRatio缩放,以便在视网膜屏幕上更好地渲染
Type:
- Inherited From:
-
- Default Value:
-
- Source:
-
Indicates if the canvas can fire middle click events
指示画布是否可以触发中击事件
Type:
- Since:
-
- Source:
-
Indicates if the canvas can fire right click events
指示画布是否可以触发右键单击事件
Type:
- Since:
-
- Source:
-
Cursor value used during free drawing
在自由绘图期间使用的光标值
Type:
- Default Value:
-
- Source:
-
Animation duration (in ms) for fx* methods
fx*方法的动画持续时间(毫秒)
Type:
- Inherited From:
-
- Default Value:
-
- Source:
-
Default cursor value used when hovering over an object on canvas
当鼠标悬停在画布上的对象上时使用的默认光标值
Type:
- Default Value:
-
- Source:
-
Indicates whether this canvas will use image smoothing, this is on by default in browsers
指示此画布是否将使用图像平滑,这在浏览器中是默认开启的
Type:
- Inherited From:
-
- Default Value:
-
- Source:
-
Indicates whether toObject/toDatalessObject should include default values
if set to false, takes precedence over the object value.
指示toObject/toDatalessObject是否应该包含默认值
如果设置为false,则优先于对象值。
Type:
- Inherited From:
-
- Default Value:
-
- Source:
-
Indicates that canvas is interactive. This property should not be changed.
指示画布是交互式的。此属性不应更改。
Type:
- Default Value:
-
- Source:
-
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/mousemove/mouseup)会导致自由绘图。
按下鼠标后,鼠标移动会创建一个形状,
然后mouseup完成它并添加一个fabric实例。路径到画布上。
Type:
- Source:
-
- Tutorials:
-
Default cursor value used when moving an object on canvas
在画布上移动对象时使用的默认游标值
Type:
- Default Value:
-
- Source:
-
Cursor value used for disabled elements ( corners with disabled action )
用于禁用元素的光标值(具有禁用动作的角)
Type:
- Since:
-
- Default Value:
-
- Source:
-
Type:
- Since:
-
- Inherited From:
-
- Source:
-
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:
-
if set to false overlya image is not affected by viewport transform
如果设置为false,覆盖图像不受视口变换的影响
Type:
- Since:
-
- Inherited From:
-
- Default Value:
-
- Source:
-
When true, object detection happens on per-pixel basis rather than on per-bounding-box
当为true时,对象检测以像素为基础,而不是以边界框为基础
Type:
- Source:
-
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:
- Source:
-
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。add, fabric.Collection.insertAt和fabric.Collection.remove,
fabric.StaticCanvas。moveTo, fabric.StaticCanvas.clear等等,也应该重新渲染canvas。
禁用此选项将不会给性能提升时,添加/删除大量的对象,从画布一次
因为渲染是排队的,每帧执行一次。
禁用是建议的,手动管理应用程序的渲染并不是一个大的努力(canvas.requestRenderAll())
将默认值设置为true,以免破坏文档和旧应用程序,fiddles。
Type:
- Inherited From:
-
- Default Value:
-
- Source:
-
Indicates whether group selection should be enabled
指示是否应启用组选择
Type:
- Default Value:
-
- Source:
-
Color of the border of selection (usually slightly darker than color of selection itself)
选择框边框的颜色(通常比选择框本身的颜色略深)
Type:
- Default Value:
-
- Source:
-
Color of selection
选择颜色
Type:
- Default Value:
-
- Source:
-
Default dash array pattern
If not empty the selection border is dashed
默认破折号数组模式
如果不为空,则选择边框为虚线
Type:
- Source:
-
Select only shapes that are fully contained in the dragged selection rectangle.
只选择完全包含在拖动的选择矩形中的形状。
Type:
- Source:
-
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作为字符串或字符串数组传递
values: 'altKey', 'shiftKey', 'ctrlKey'。
如果' null '或空或包含任何其他不是修饰符键的字符串
特性被禁用。
Type:
- Since:
-
- Default Value:
-
- Source:
-
Width of a line used in object/group selection
在对象/组选择中使用的线条宽度
Type:
- Default Value:
-
- Source:
-
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.
基于vptcoord和object。因此,跳过对象的渲染
不包含在当前视窗中。
可以极大地帮助应用程序与拥挤的画布和使用缩放/平移
如果对象的边界框的一个角在画布上
对象被渲染。
Type:
- Inherited From:
-
- Default Value:
-
- Source:
-
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:
- Source:
-
Indicates the angle that an object will lock to while rotating.
指示对象在旋转时锁定的角度。
Type:
- Since:
-
- Source:
-
Indicates the distance from the snapAngle the rotation will lock to the snapAngle.
When `null`, the snapThreshold will default to the snapAngle.
指示旋转将锁定到快照角的快照角之间的距离。
当为null时,snapThreshold将默认为snapAngle。
Type:
- Since:
-
- Source:
-
Indicates whether objects' state should be saved
指示是否保存对象的状态
Type:
- Inherited From:
-
- Source:
-
Indicates if the right click on canvas can output the context menu or not
指示在画布上右键单击是否可以输出上下文菜单
Type:
- Since:
-
- Source:
-
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:
- Inherited From:
-
- Default Value:
-
- Source:
-
Number of pixels around target pixel to tolerate (consider active) during object detection
在目标检测期间,目标像素周围可容忍的像素数(考虑为活动)
Type:
- Source:
-
Keep track of the subTargets for Mouse Events
跟踪鼠标事件的子目标
Type:
- Source:
-
When true, objects can be transformed by one side (unproportionally)
when dragged on the corners that normally would not do that.
当为true时,对象可以被一侧(不成比例地)转换。
当拖到角落时,通常不会这样做。
Type:
- Since:
-
- fabric 4.0 // changed name and default value
- Default Value:
-
- Source:
-
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.
显示哪些键开关均匀缩放。
values: 'altKey', 'shiftKey', 'ctrlKey'。
如果' null '或'none'或任何其他不是修饰符键的字符串
特性被禁用。
名字完全错了。这听起来像是“均匀缩放”。
如果画布。uniformScaling为true,按下此键将其设置为false
,反之亦然。
Type:
- Since:
-
- Default Value:
-
- Source:
-
The transformation (a Canvas 2D API transform matrix) which focuses the viewport
聚焦视口的转换(Canvas 2D API转换矩阵)
Type:
- 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];
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,bl,br。
如果画布没有缩放/平移,这些点就是画布的四个角
如果画布是viewportTransformed你那些点表示扩展
canvas元素的未变换坐标
坐标通过@method calcViewportBoundaries得到更新。
- Inherited From:
-
- Source:
-
Methods
Method that defines actions when an Event Mouse Wheel
方法,该方法在事件鼠标滚轮时定义操作
Parameters:
Name |
Type |
Description |
e |
Event
|
Event object fired on mouseup鼠标启动时触发的事件对象
|
- Source:
-
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
`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- disable逻辑,因为没有办法
要处理事件处理程序排序,请使用' drop:before '
Parameters:
Name |
Type |
Description |
e |
Event
|
|
- Source:
-
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:
-
Pan viewport so as to place point at top left corner of canvas
平移视口以便将点放置在画布的左上角
Parameters:
- Inherited From:
-
- Source:
-
Returns:
instance
-
Type
-
fabric.Canvas
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 ')。
在Group的情况下,不改变边界框。
对象应该是fabric的实例(或从fabric继承)。对象
非常不建议群组使用此功能。
你可以用add方法添加一堆对象,但是你需要
为Group类或position/bbox运行addWithUpdate调用将是错误的。
Parameters:
Name |
Type |
Attributes |
Description |
object |
fabric.Object
|
<repeatable>
|
Zero or more fabric instances零个或多个fabric实例
|
- Inherited From:
-
- Mixes In:
-
- Source:
-
Returns:
thisArg
-
Type
-
Self
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
Moves an object or the objects of a multiple selection
to the top of the stack of drawn objects
移动一个或多个选择的对象
到绘制对象堆栈的顶部
Parameters:
- Inherited From:
-
- Source:
-
Returns:
thisArg
-
Type
-
fabric.Canvas
Calculates canvas element offset relative to the document
This method is also attached as "resize" event handler of window
计算画布元素相对于文档的偏移量
此方法也附加为窗口的“resize”事件处理程序
- Inherited From:
-
- Source:
-
Returns:
instance
-
Type
-
fabric.Canvas
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
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
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
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
Clears all contexts (background, main, top) of an instance
清除实例的所有上下文(background, main, top)
- Overrides:
-
- Source:
-
Returns:
thisArg
-
Type
-
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
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:
-
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:
-
Returns number representation of a collection complexity
返回集合复杂度的数字表示形式
- Inherited From:
-
- Mixes In:
-
- Source:
-
Returns:
complexity
-
Type
-
Number
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
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字体面的标记;
font字体的url必须由开发人员收集
并且不会被fabricjs从DOM中提取出来
Parameters:
Name |
Type |
Description |
objects |
Array
|
Array of fabric objects织物对象数组
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
String
Creates markup containing SVG referenced elements like patterns, gradients etc.
创建包含SVG引用元素(如模式、渐变等)的标记。
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
String
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函数。当作为方法使用时
参数没有任何应用。
Parameters:
Name |
Type |
Description |
e |
event
|
|
- Source:
-
Returns:
thisArg
-
Type
-
fabric.Canvas
Clears a canvas element and removes all event listeners
清除画布元素并移除所有事件监听器
- Overrides:
-
- Source:
-
Returns:
thisArg
-
Type
-
fabric.Canvas
Paint the cached clipPath on the lowerCanvasEl
在lowerCanvasEl上绘制缓存的clipPath
Parameters:
Name |
Type |
Description |
ctx |
CanvasRenderingContext2D
|
Context to render on要渲染的上下文
|
- Inherited From:
-
- Source:
-
Draws objects' controls (borders/controls)
绘制对象的控件(边框/控件)
Parameters:
Name |
Type |
Description |
ctx |
CanvasRenderingContext2D
|
Context to render controls on要呈现控件的上下文
|
- Source:
-
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操作
11/09/2018待办事项:如果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
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
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以当前对象作为第一个参数调用的回调,
索引——作为第二,所有对象的数组——作为第三。
在全局对象的上下文中调用回调(Callback)。“窗口”)
当没有给出' context '参数时
|
context |
Object
|
Context (aka thisObject)背景(又名thisObject)
|
- Inherited From:
-
- Mixes In:
-
- Source:
-
Returns:
thisArg
-
Type
-
Self
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
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
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
Same as fabric.Canvas.prototype.straightenObject, but animated
和织物,画布,原型一样。笔直对象,但动画
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to straighten对象整理
|
- Inherited From:
-
- Source:
-
Returns:
thisArg
-
Type
-
fabric.Canvas
Returns currently active object
返回当前活动对象
- Source:
-
Returns:
active object
-
Type
-
fabric.Object
Returns an array with the current selected objects
返回一个包含当前选定对象的数组
- Source:
-
Returns:
active object
-
Type
-
fabric.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
Returns context of canvas where objects are drawn
返回绘制对象的画布上下文
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
CanvasRenderingContext2D
Returns <canvas> element corresponding to this instance
返回与此实例对应的
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
HTMLCanvasElement
Returns canvas height (in px)
返回画布高度(单位:px)
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Number
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起,此方法总是返回数组的COPY;
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
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返回坐标。
ignoreZoom false返回表示的坐标
点击canvas元素的点。
ignoreZoom true在处理后返回坐标
通过viewportTransform(显示的坐标类型)
在您正在单击的画布上。
ignoreZoom true = HTMLElement相对于左上角的坐标
ignoreZoom false, default =织物空间坐标,与形状位置相同
要与顶部和左侧的形状进行交互,您需要使用ignoreZoom true
大多数情况下,ignoreZoom false会给你坐标
与对象兼容。oCoords系统。
的时间。
Parameters:
Name |
Type |
Description |
e |
Event
|
|
ignoreZoom |
Boolean
|
|
- Source:
-
Returns:
object with "x" and "y" number values
-
Type
-
Object
Returns context of canvas where object selection is drawn
返回绘制对象选择的画布上下文
- Source:
-
Returns:
-
Type
-
CanvasRenderingContext2D
Returns <canvas> element on which object selection is drawn
返回在其上绘制对象选择的
- Source:
-
Returns:
-
Type
-
HTMLCanvasElement
Calculate the point in canvas that correspond to the center of actual viewport.
计算画布中对应于实际视口中心的点。
- Inherited From:
-
- Source:
-
Returns:
vpCenter, viewport center
-
Type
-
fabric.Point
Returns canvas width (in px)
返回画布宽度(单位为px)
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Number
Returns canvas zoom level
返回画布缩放级别
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Number
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
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的实例(或从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
Returns true if collection contains no objects
如果集合中不包含任何对象,则返回true
- Inherited From:
-
- Mixes In:
-
- Source:
-
Returns:
true if collection is empty
-
Type
-
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
Returns object at specified index
返回指定索引处的对象
Parameters:
Name |
Type |
Description |
index |
Number
|
|
- Inherited From:
-
- Mixes In:
-
- Source:
-
Returns:
thisArg
-
Type
-
Self
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时调用
和相应的物体(例如:织物。图像)
初始化
|
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 ...
});
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
Pans viewpoint relatively
潘的观点相对而言
Parameters:
Name |
Type |
Description |
point |
fabric.Point
|
(position vector) to move by(位置向量)来移动
|
- Inherited From:
-
- Source:
-
Returns:
instance
-
Type
-
fabric.Canvas
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 instances零个或多个fabric实例
|
- Inherited From:
-
- Mixes In:
-
- Source:
-
Returns:
thisArg
-
Type
-
Self
Removes all event listeners
移除所有事件监听器
- Source:
-
Renders both the top canvas and the secondary container canvas.
同时渲染顶部画布和次要容器画布。
- Overrides:
-
- Source:
-
Returns:
instance
-
Type
-
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
Method to render only the top canvas.
Also used to render the group selection box.
方法仅渲染顶部画布。
也用于呈现组选择框。
- Source:
-
Returns:
thisArg
-
Type
-
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
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
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
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
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
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));
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'
});
Set the cursor type of the canvas element
设置canvas元素的光标类型
Parameters:
Name |
Type |
Description |
value |
String
|
Cursor type of the canvas element.canvas元素的光标类型。
|
- Source:
-
- See:
-
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
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
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));
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'
});
Sets viewport transformation of this canvas instance
设置画布实例的视口转换
Parameters:
Name |
Type |
Description |
vpt |
Array
|
a Canvas 2D API transform matrix一个Canvas 2D API变换矩阵
|
- Overrides:
-
- Source:
-
Returns:
instance
-
Type
-
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
Sets zoom level of this canvas instance
设置画布实例的缩放级别
Parameters:
Name |
Type |
Description |
value |
Number
|
to set zoom to, less than 1 zooms out若将zoom设置为,则小于1时将缩小
|
- Inherited From:
-
- Source:
-
Returns:
instance
-
Type
-
fabric.Canvas
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
Straightens object, then rerenders canvas
拉直对象,然后渲染画布
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to straighten对象整理
|
- Inherited From:
-
- Source:
-
Returns:
thisArg
-
Type
-
fabric.Canvas
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:
-
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
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
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引入
|
选择对象
属性
名字
类型
属性
默认的
描述
格式
字符串
png
输出图像的格式。jpeg或png格式
质量
数量
1
质量等级(0..1)。仅用于jpeg。
乘数
数量
1
乘数要按比例,要有一致性
左
数量
裁剪左偏移。在v1.2.14中引入
前
数量
裁剪顶部偏移。在v1.2.14中引入
宽度
数量
裁剪宽度。在v1.2.14中引入
高度
数量
种植的高度。在v1.2.14中引入
enableRetinaScaling
布尔
启用视网膜缩放克隆图像。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
});
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。对实例进行字符串化,
如果存在,将调用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();
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
Returns a string representation of an instance
返回实例的字符串表示形式
- Inherited From:
-
- Source:
-
Returns:
string representation of an instance
-
Type
-
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如果为真,则不包括xml标记
|
viewBox |
Object
|
<optional>
|
|
SVG viewbox object
Properties
Name |
Type |
Attributes |
Description |
x |
Number
|
<optional>
|
x-coordinate of viewbox视框的x坐标
|
y |
Number
|
<optional>
|
y-coordinate of viewbox视框的y坐标
|
width |
Number
|
<optional>
|
Width of viewbox视框宽度
|
height |
Number
|
<optional>
|
Height of viewbox视框高度
|
SVG视框对象
属性
名字
类型
属性
描述
x
数量
视框的x坐标
y
数量
视框的y坐标
宽度
数量
视框宽度
高度
数量
视框高度
|
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 units带或不带单位的SVG的期望高度
|
|
reviver |
function
|
<optional>
|
Method for further parsing of svg elements, called after each fabric object converted into svg representation.方法,用于进一步解析svg元素,在将每个织物对象转换为svg表示后调用。
|
- 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; ', '');
});
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
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
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
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若将zoom设置为,则小于1时将缩小
|
- Inherited From:
-
- Source:
-
Returns:
instance
-
Type
-
fabric.Canvas