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

快捷菜单 返回顶部

fabric.js中文API

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

Class: Canvas

fabric.Canvas

new Canvas()

帆布类
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

指示在使用触摸屏并在画布上拖动时是否可以滚动浏览器
Type:
  • Boolean
Inherited From:
Source:

altActionKey :String

指示哪个键在角上启用备用动作 values: 'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或'none'或任何其他不是修饰符键的字符串 Feature is disabled Feature已禁用。
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

altSelectionKey :null|String

指示哪个键启用备选选择 当目标与活动对象重叠时 values: 'altKey'， 'shiftKey'， 'ctrlKey'。 由于一系列的原因，来自于对如何的普遍期望 这个特性只对preserveObjectStacking true有效。 如果' null '或'none'或任何其他不是修饰符键的字符串 特性被禁用。
Type:
  • null | String
Since:
  • 1.6.5
Source:

backgroundColor :String|fabric.Pattern

画布实例的背景颜色。 应该通过fabric.StaticCanvas#setBackgroundColor设置。
Type:
Inherited From:
Source:

backgroundImage :fabric.Image

画布实例的背景图像。 由于2.4.0图像缓存是活动的，请在将图像作为背景时，添加到 Canvas属性是对它所在画布的引用。否则图像无法检测缩放 淡水河谷。作为一种替代方法，您可以禁用图像objectCaching
Type:
Inherited From:
Source:

backgroundVpt :Boolean

如果设置为false，背景图像不受视口变换的影响
Type:
  • Boolean
Since:
  • 1.6.3
Inherited From:
Default Value:
  • true
Source:

centeredKey :String

指示哪个键启用居中变换 values: 'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或'none'或任何其他不是修饰符键的字符串 Feature is disabled Feature已禁用。
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • altKey
Source:

centeredRotation :Boolean

当为true时，对象使用中心点作为旋转变换的原点。 向后不兼容注意:此属性取代"centerTransform"(布尔值)。
Type:
  • Boolean
Since:
  • 1.3.4
Source:

centeredScaling :Boolean

当为true时，对象使用中心点作为尺度转换的原点。 向后不兼容注意:此属性取代"centerTransform"(布尔值)。
Type:
  • Boolean
Since:
  • 1.3.4
Source:

clipPath :fabric.Object

一个没有描边的fabricObject，用它们的形状定义一个裁剪区域。用黑色填充 clipPath对象在画布渲染完成时被使用，并且上下文被放置在 画布的左上角。 clipPath将剪辑掉控件，如果你不想发生这种情况，使用controlsAboveOverlay = true
Type:
Inherited From:
Source:

containerClass :String

给canvas的包装器(div)元素的默认元素类
Type:
  • String
Default Value:
  • canvas-container
Source:

controlsAboveOverlay :Boolean

指示对象控件(边框/控件)是否呈现在覆盖图像上方
Type:
  • Boolean
Inherited From:
Source:

defaultCursor :String

用于整个画布的默认游标值
Type:
  • String
Default Value:
  • default
Source:

enablePointerEvents :Boolean

当启用该选项时，将使用PointerEvent而不是MouseEvent。
Type:
  • Boolean
Source:

enableRetinaScaling :Boolean

当为true时，画布通过devicePixelRatio缩放，以便在视网膜屏幕上更好地渲染
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

fireMiddleClick :Boolean

指示画布是否可以触发中击事件
Type:
  • Boolean
Since:
  • 1.7.8
Source:

fireRightClick :Boolean

指示画布是否可以触发右键单击事件
Type:
  • Boolean
Since:
  • 1.6.5
Source:

freeDrawingCursor :String

在自由绘图期间使用的光标值
Type:
  • String
Default Value:
  • crosshair
Source:

FX_DURATION :Number

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

hoverCursor :String

当鼠标悬停在画布上的对象上时使用的默认光标值
Type:
  • String
Default Value:
  • move
Source:

imageSmoothingEnabled :Boolean

指示此画布是否将使用图像平滑，这在浏览器中是默认开启的
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

includeDefaultValues :Boolean

指示toObject/toDatalessObject是否应该包含默认值 如果设置为false，则优先于对象值。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

interactive :Boolean

指示画布是交互式的。此属性不应更改。
Type:
  • Boolean
Default Value:
  • true
Source:

isDrawingMode :Boolean

当为true时，画布上的鼠标事件(mousedown/mousemove/mouseup)会导致自由绘图。 按下鼠标后，鼠标移动会创建一个形状， 然后mouseup完成它并添加一个fabric实例。路径到画布上。
Type:
  • Boolean
Source:
Tutorials:

moveCursor :String

在画布上移动对象时使用的默认游标值
Type:
  • String
Default Value:
  • move
Source:

notAllowedCursor :String

用于禁用元素的光标值(具有禁用动作的角)
Type:
  • String
Since:
  • 2.0.0
Default Value:
  • not-allowed
Source:

overlayColor :String|fabric.Pattern

画布实例的叠加颜色。 应通过织物设置。StaticCanvas # setOverlayColor
Type:
Since:
  • 1.3.9
Inherited From:
Source:

overlayImage :fabric.Image

画布实例的叠加图像。 由于2.4.0图像缓存是活跃的，请在将图像作为覆盖时，添加到 Canvas属性是对它所在画布的引用。否则图像无法检测缩放 淡水河谷。作为一种替代方法，您可以禁用图像objectCaching
Type:
Inherited From:
Source:

overlayVpt :Boolean

如果设置为false，覆盖图像不受视口变换的影响
Type:
  • Boolean
Since:
  • 1.6.3
Inherited From:
Default Value:
  • true
Source:

perPixelTargetFind :Boolean

当为true时，对象检测以像素为基础，而不是以边界框为基础
Type:
  • Boolean
Source:

preserveObjectStacking :Boolean

指示对象在选中时是否应保持在当前堆栈位置。 当假对象被带到顶部并作为选择组的一部分呈现时
Type:
  • Boolean
Source:

renderOnAddRemove :Boolean

指示fabric.Collection。add, fabric.Collection.insertAt和fabric.Collection.remove， fabric.StaticCanvas。moveTo, fabric.StaticCanvas.clear等等，也应该重新渲染canvas。 禁用此选项将不会给性能提升时，添加/删除大量的对象，从画布一次 因为渲染是排队的，每帧执行一次。 禁用是建议的，手动管理应用程序的渲染并不是一个大的努力(canvas.requestRenderAll()) 将默认值设置为true，以免破坏文档和旧应用程序，fiddles。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

selection :Boolean

指示是否应启用组选择
Type:
  • Boolean
Default Value:
  • true
Source:

selectionBorderColor :String

选择框边框的颜色(通常比选择框本身的颜色略深)
Type:
  • String
Default Value:
  • rgba(255, 255, 255, 0.3)
Source:

selectionColor :String

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

selectionDashArray :Array

默认破折号数组模式 如果不为空，则选择边框为虚线
Type:
  • Array
Source:

selectionFullyContained :Boolean

只选择完全包含在拖动的选择矩形中的形状。
Type:
  • Boolean
Source:

selectionKey :String|Array

指示哪个键或哪些键允许多选 将value作为字符串或字符串数组传递 values: 'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或空或包含任何其他不是修饰符键的字符串 特性被禁用。
Type:
  • String | Array
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

selectionLineWidth :Number

在对象/组选择中使用的线条宽度
Type:
  • Number
Default Value:
  • 1
Source:

skipOffscreen :Boolean

基于vptcoord和object。因此，跳过对象的渲染 不包含在当前视窗中。 可以极大地帮助应用程序与拥挤的画布和使用缩放/平移 如果对象的边界框的一个角在画布上 对象被渲染。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

skipTargetFind :Boolean

当为true时，跳过目标检测。目标检测将始终返回未定义。 点击选择将不再工作，事件将在没有目标的情况下触发。 如果在将其设置为true之前选中了某些内容，则在第一次单击时将取消选中。 区域选择仍然有效。检查' selection '属性。 如果停用两者，则应该查看staticCanvas。
Type:
  • Boolean
Source:

snapAngle :Number

指示对象在旋转时锁定的角度。
Type:
  • Number
Since:
  • 1.6.7
Source:

snapThreshold :null|Number

指示旋转将锁定到快照角的快照角之间的距离。 当为null时，snapThreshold将默认为snapAngle。
Type:
  • null | Number
Since:
  • 1.6.7
Source:

stateful :Boolean

指示是否保存对象的状态
Type:
  • Boolean
Inherited From:
Source:

stopContextMenu :Boolean

指示在画布上右键单击是否可以输出上下文菜单
Type:
  • Boolean
Since:
  • 1.6.5
Source:

svgViewportTransformation :Boolean

当为true时，getSvgTransform()将应用StaticCanvas。viewportTransform转换为SVG转换。当真正的, 缩放后的画布将生成缩放后的SVG输出。
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

targetFindTolerance :Number

在目标检测期间，目标像素周围可容忍的像素数(考虑为活动)
Type:
  • Number
Source:

targets :Array.<fabric.Object>

跟踪鼠标事件的子目标
Type:
Source:

uniformScaling :Boolean

当为true时，对象可以被一侧(不成比例地)转换。 当拖到角落时，通常不会这样做。
Type:
  • Boolean
Since:
  • fabric 4.0 // changed name and default value
Default Value:
  • true
Source:

uniScaleKey :String

显示哪些键开关均匀缩放。 values: 'altKey'， 'shiftKey'， 'ctrlKey'。 如果' null '或'none'或任何其他不是修饰符键的字符串 特性被禁用。 名字完全错了。这听起来像是“均匀缩放”。 如果画布。uniformScaling为true，按下此键将其设置为false ,反之亦然。
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

viewportTransform :Array

聚焦视口的转换(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

描述画布元素对设计的扩展 属性是tl,tr,bl,br。 如果画布没有缩放/平移，这些点就是画布的四个角 如果画布是viewportTransformed你那些点表示扩展 canvas元素的未变换坐标 坐标通过@method calcViewportBoundaries得到更新。
Inherited From:
Source:

Methods

__onMouseWheel(e)

方法，该方法在事件鼠标滚轮时定义操作
Parameters:
Name Type Description
e Event 鼠标启动时触发的事件对象
Source:

_chooseObjectsToRender() → {Array}

将对象分成两组，一组立即渲染 另一个渲染为activeGroup。
Source:
Returns:
objects to render immediately and pushes the other in the activeGroup.
Type
Array

_onDrop(e)

' drop:before '是一个允许您调度逻辑的事件 在' drop '事件之前。更喜欢' drop '事件，但如果你需要 在事件上运行一些drop- disable逻辑，因为没有办法 要处理事件处理程序排序，请使用' drop:before '
Parameters:
Name Type Description
e Event
Source:

_setCursorFromEvent(e, target)

根据画布的悬停位置设置光标。 注意:在Opera中有很多bug
Parameters:
Name Type Description
e Event 事件对象
target Object 对象，如果是的话。
Source:

absolutePan(point) → {fabric.Canvas}

平移视口以便将点放置在画布的左上角
Parameters:
Name Type Description
point fabric.Point 搬到
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

add(…object) → {Self}

将对象添加到集合、画布或组中，然后渲染画布 (如果' renderOnAddRemove '不是' false ')。 在Group的情况下，不改变边界框。 对象应该是fabric的实例(或从fabric继承)。对象 非常不建议群组使用此功能。 你可以用add方法添加一堆对象，但是你需要 为Group类或position/bbox运行addWithUpdate调用将是错误的。
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
 零个或多个fabric实例
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

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

在绘制的对象堆栈中向上移动一个对象或一个选择 一个可选参数，intersecting允许移动前面的对象 第一个相交物体的。交点在哪里计算 边界框。如果没有发现交集，就不会有变化 堆栈。
Parameters:
Name Type Attributes Description
object fabric.Object 要发送的对象
intersecting Boolean <optional>
 如果' true '，则将对象发送到下一个上部相交对象的前面
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

bringToFront(object) → {fabric.Canvas}

移动一个或多个选择的对象 到绘制对象堆栈的顶部
Parameters:
Name Type Description
object fabric.Object 要发送的对象
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

calcOffset() → {fabric.Canvas}

计算画布元素相对于文档的偏移量 此方法也附加为窗口的“resize”事件处理程序
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

calcViewportBoundaries() → {Object}

用当前viewportTransform计算画布4角的位置。 帮助确定对象何时处于当前呈现视口中 物体绝对坐标
Inherited From:
Source:
Returns:
points.tl
Type
Object

centerObject(object) → {fabric.Canvas}

在画布中垂直和水平居中对象
Parameters:
Name Type Description
object fabric.Object 对象设置为垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

centerObjectH(object) → {fabric.Canvas}

在画布中将对象水平居中
Parameters:
Name Type Description
object fabric.Object 物体水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

centerObjectV(object) → {fabric.Canvas}

在画布中将对象垂直居中
Parameters:
Name Type Description
object fabric.Object 物体垂直居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

clear() → {fabric.Canvas}

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

clearContext(ctx) → {fabric.Canvas}

清除画布元素的指定上下文
Parameters:
Name Type Description
ctx CanvasRenderingContext2D 需要清除的背景信息
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

clone(callbackopt, propertiesopt)

克隆画布实例
Parameters:
Name Type Attributes Description
callback Object <optional>
 接收克隆实例作为第一个参数
properties Array <optional>
 要包含在克隆画布和子画布中的属性数组
Inherited From:
Source:

cloneWithoutData(callbackopt)

克隆画布实例而不克隆现有数据。 这实际上是复制画布尺寸，剪辑属性等。 但是将数据保留为空(以便您可以使用自己的填充数据)
Parameters:
Name Type Attributes Description
callback Object <optional>
 接收克隆实例作为第一个参数
Inherited From:
Source:

complexity() → {Number}

返回集合复杂度的数字表示形式
Inherited From:
Mixes In:
Source:
Returns:
complexity
Type
Number

contains(object, deepopt) → {Boolean}

如果集合包含对象则返回true
Parameters:
Name Type Attributes Default Description
object Object 核对对象
deep Boolean <optional>
 false ' true '检查所有子类，' false '只检查' _objects '
Inherited From:
Mixes In:
Source:
Returns:
`true` if collection contains an object
Type
Boolean

createSVGFontFacesMarkup(objects) → {String}

创建包含SVG字体面的标记; font字体的url必须由开发人员收集 并且不会被fabricjs从DOM中提取出来
Parameters:
Name Type Description
objects Array 织物对象数组
Inherited From:
Source:
Returns:
Type
String

createSVGRefElementsMarkup() → {String}

创建包含SVG引用元素(如模式、渐变等)的标记。
Inherited From:
Source:
Returns:
Type
String

discardActiveObject(e) → {fabric.Canvas}

丢弃当前活动的对象和触发事件。如果函数被fabric调用 作为鼠标事件的结果，事件作为参数和传递 发送给自定义事件的fire函数。当作为方法使用时 参数没有任何应用。
Parameters:
Name Type Description
e event
Source:
Returns:
thisArg
Type
fabric.Canvas

dispose() → {fabric.Canvas}

清除画布元素并移除所有事件监听器
Overrides:
Source:
Returns:
thisArg
Type
fabric.Canvas

drawClipPathOnCanvas(ctx)

在lowerCanvasEl上绘制缓存的clipPath
Parameters:
Name Type Description
ctx CanvasRenderingContext2D 要渲染的上下文
Inherited From:
Source:

drawControls(ctx)

绘制对象的控件(边框/控件)
Parameters:
Name Type Description
ctx CanvasRenderingContext2D 要呈现控件的上下文
Source:

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

方法，该方法确定我们正在单击的对象 skipGroup参数用于内部使用，用于shift+click操作 11/09/2018待办事项:如果findTarget能分辨出是一个完整的目标，那就太酷了 或者是角落外面的部分。
Parameters:
Name Type Description
e Event 鼠标事件
skipGroup Boolean 当为true时，跳过activeGroup，只遍历对象
Source:
Returns:
the target found
Type
fabric.Object

fire(eventName, optionsopt) → {Self}

用可选的options对象触发事件
Parameters:
Name Type Attributes Description
eventName String 事件名称触发
options Object <optional>
 选择对象
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

forEachObject(callback, context) → {Self}

对该组中的每个对象执行给定的函数
Parameters:
Name Type Description
callback function 以当前对象作为第一个参数调用的回调， 索引——作为第二，所有对象的数组——作为第三。 在全局对象的上下文中调用回调(Callback)。“窗口”) 当没有给出' context '参数时
context Object 背景(又名thisObject)
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

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

用动画水平居中对象。
Parameters:
Name Type Attributes Description
object fabric.Object 物体居中
callbacks Object <optional>
 完成时调用在动画的每一步调用具有可选的"onComplete"和/或"onChange"属性的回调对象 属性 名字 类型 属性 描述 onComplete 函数 完成时调用 onChange 函数 在动画的每一步调用
Inherited From:
Source:
Returns:
context
Type
fabric.AnimationContext

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

用动画使对象垂直居中。
Parameters:
Name Type Attributes Description
object fabric.Object 物体居中
callbacks Object <optional>
 完成时调用在动画的每一步调用具有可选的"onComplete"和/或"onChange"属性的回调对象 属性 名字 类型 属性 描述 onComplete 函数 完成时调用 onChange 函数 在动画的每一步调用
Inherited From:
Source:
Returns:
context
Type
fabric.AnimationContext

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

和“织物”一样。画布#删除'，但动画
Parameters:
Name Type Attributes Description
object fabric.Object 要移除的对象
callbacks Object <optional>
 完成时调用在动画的每一步调用具有可选的"onComplete"和/或"onChange"属性的回调对象 属性 名字 类型 属性 描述 onComplete 函数 完成时调用 onChange 函数 在动画的每一步调用
Inherited From:
Source:
Returns:
context
Type
fabric.AnimationContext

fxStraightenObject(object) → {fabric.Canvas}

和织物，画布，原型一样。笔直对象，但动画
Parameters:
Name Type Description
object fabric.Object 对象整理
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

getActiveObject() → {fabric.Object}

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

getActiveObjects() → {fabric.Object}

返回一个包含当前选定对象的数组
Source:
Returns:
active object
Type
fabric.Object

getCenter() → {Object}

返回画布中心的坐标。 返回值是一个具有top和left属性的对象
Inherited From:
Source:
Returns:
object with "top" and "left" number values
Type
Object

getContext() → {CanvasRenderingContext2D}

返回绘制对象的画布上下文
Inherited From:
Source:
Returns:
Type
CanvasRenderingContext2D

getElement() → {HTMLCanvasElement}

返回与此实例对应的元素
Inherited From:
Source:
Returns:
Type
HTMLCanvasElement

getHeight() → {Number}

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

getObjects(typeopt) → {Array}

返回此实例的子对象数组 1.3.10中引入的类型参数 自2.3.5起，此方法总是返回数组的COPY;
Parameters:
Name Type Attributes Description
type String <optional>
 当指定时，只返回此类型的对象
Inherited From:
Mixes In:
Source:
Returns:
Type
Array

getPointer(e, ignoreZoom) → {Object}

返回相对于画布的指针坐标。 可以使用或不使用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

getSelectionContext() → {CanvasRenderingContext2D}

返回绘制对象选择的画布上下文
Source:
Returns:
Type
CanvasRenderingContext2D

getSelectionElement() → {HTMLCanvasElement}

返回在其上绘制对象选择的元素
Source:
Returns:
Type
HTMLCanvasElement

getVpCenter() → {fabric.Point}

计算画布中对应于实际视口中心的点。
Inherited From:
Source:
Returns:
vpCenter, viewport center
Type
fabric.Point

getWidth() → {Number}

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

getZoom() → {Number}

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

initialize(el, optionsopt) → {Object}

构造函数
Parameters:
Name Type Attributes Description
el HTMLElement | String 初始化实例的元素
options Object <optional>
 选择对象
Overrides:
Source:
Returns:
thisArg
Type
Object

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

将对象插入到指定索引的集合中，然后渲染画布(如果' renderOnAddRemove '不是' false ') 对象应该是fabric的实例(或从fabric继承)。对象 非常不建议群组使用此功能。 你可以用insertAt方法添加一堆对象，然后你需要 为Group类或position/bbox运行addWithUpdate调用将是错误的。
Parameters:
Name Type Description
object Object 插入的对象
index Number 插入对象的索引
nonSplicing Boolean 当为true时，不会发生对象的拼接(移位)
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

isEmpty() → {Boolean}

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

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

如果对象在特定位置是透明的，则返回true
Parameters:
Name Type Description
target fabric.Object 检查对象
x Number 左坐标
y Number 高层协调
Source:
Returns:
Type
Boolean

item(index) → {Self}

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

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

使用来自指定JSON的数据填充画布。 JSON格式必须符合fabric的格式。帆布# toJSON
Parameters:
Name Type Attributes Description
json String | Object JSON字符串或对象
callback function 回调，在解析json时调用 和相应的物体(例如:织物。图像) 初始化
reviver function <optional>
 方法，用于进一步解析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}

将对象移动到绘制对象堆栈中的指定位置
Parameters:
Name Type Description
object fabric.Object 要发送的对象
index Number 移动到的位置
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

relativePan(point) → {fabric.Canvas}

潘的观点相对而言
Parameters:
Name Type Description
point fabric.Point (位置向量)来移动
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

remove(…object) → {Self}

从集合中移除对象，然后渲染画布(如果' renderOnAddRemove '不是' false ')
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
 零个或多个fabric实例
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

removeListeners()

移除所有事件监听器
Source:

renderAll() → {fabric.Canvas}

同时渲染顶部画布和次要容器画布。
Overrides:
Source:
Returns:
instance
Type
fabric.Canvas

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

渲染背景，对象，覆盖和控件。
Parameters:
Name Type Description
ctx CanvasRenderingContext2D
objects Array 呈现
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

renderTop() → {fabric.Canvas}

方法仅渲染顶部画布。 也用于呈现组选择框。
Source:
Returns:
thisArg
Type
fabric.Canvas

requestRenderAll() → {fabric.Canvas}

附加一个renderAll请求到下一个动画帧。 除非一个已经在进行中，在这种情况下，什么都不做 布尔标志将避免追加更多内容。
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

restorePointerVpt(pointer) → {Object}

返回指针坐标，但不受视口的影响
Parameters:
Name Type Description
pointer Object 带有“x”和“y”数值
Source:
Returns:
object with "x" and "y" number values
Type
Object

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

在绘制的对象堆栈中向下移动对象或选择项 一个可选参数，intersecting允许在后面移动对象 第一个相交的物体。交点在哪里计算 边界框。如果没有发现交集，就不会有变化 堆栈。
Parameters:
Name Type Attributes Description
object fabric.Object 要发送的对象
intersecting Boolean <optional>
 如果为true，则将对象发送到下一个较低相交对象的后面
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

sendToBack(object) → {fabric.Canvas}

移动一个或多个选择的对象 到绘制对象堆栈的底部
Parameters:
Name Type Description
object fabric.Object 发送回的对象
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

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

将给定对象设置为画布上唯一的活动对象
Parameters:
Name Type Attributes Description
object fabric.Object 对象设置为活动对象
e Event <optional>
 事件(在触发"object:selected"时传递)
Source:
Returns:
thisArg
Type
fabric.Canvas

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

设置画布的背景颜色
Parameters:
Name Type Description
backgroundColor String | fabric.Pattern 要设置背景色的颜色或图案
callback function 设置背景颜色时调用的回调
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}

为画布设置背景图像
Parameters:
Name Type Attributes Description
image fabric.Image | String 织物。要设置背景的图像实例或URL
callback function 当图像被加载并设置为背景时调用的回调函数
options Object <optional>
 设置背景图像的可选选项。
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)

设置canvas元素的光标类型
Parameters:
Name Type Description
value String canvas元素的光标类型。
Source:
See:

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

设置画布实例的尺寸(宽度，高度)。当选择。如果cssOnly标志激活，您还应该提供度量单位(px/%/em)
Parameters:
Name Type Attributes Description
dimensions Object 画布元素的宽度画布元素高度具有宽度/高度属性的对象 属性 名字 类型 属性 描述 宽度 数量 | 字符串 画布元素的宽度 高度 数量 | 字符串 画布元素高度
options Object <optional>
 将给定的尺寸仅设置为画布后库尺寸将给定的尺寸仅设置为css尺寸选择对象 属性 名字 类型 属性 默认的 描述 backstoreOnly 布尔 假 将给定的尺寸仅设置为画布后库尺寸 cssOnly 布尔 假 将给定的尺寸仅设置为css尺寸
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

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

设置画布实例的高度
Parameters:
Name Type Attributes Description
value Number | String 设置高度的值
options Object <optional>
 将给定的尺寸仅设置为画布后库尺寸将给定的尺寸仅设置为css尺寸选择对象 属性 名字 类型 属性 默认的 描述 backstoreOnly 布尔 假 将给定的尺寸仅设置为画布后库尺寸 cssOnly 布尔 假 将给定的尺寸仅设置为css尺寸
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

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

设置此画布的前景色
Parameters:
Name Type Description
overlayColor String | fabric.Pattern 要设置前景色的颜色或图案
callback function 设置前景色时调用的回调
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}

设置此画布的覆盖图像
Parameters:
Name Type Attributes Description
image fabric.Image | String 织物。要设置覆盖的图像的图像实例或URL
callback function 当图像加载并设置为覆盖时调用的回调
options Object <optional>
 为叠加图像设置的可选选项。
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}

设置画布实例的视口转换
Parameters:
Name Type Description
vpt Array 一个Canvas 2D API变换矩阵
Overrides:
Source:
Returns:
instance
Type
fabric.Canvas

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

设置画布实例的宽度
Parameters:
Name Type Attributes Description
value Number | String 设置宽度为的值
options Object <optional>
 将给定的尺寸仅设置为画布后库尺寸将给定的尺寸仅设置为css尺寸选择对象 属性 名字 类型 属性 默认的 描述 backstoreOnly 布尔 假 将给定的尺寸仅设置为画布后库尺寸 cssOnly 布尔 假 将给定的尺寸仅设置为css尺寸
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

setZoom(value) → {fabric.Canvas}

设置画布实例的缩放级别
Parameters:
Name Type Description
value Number 若将zoom设置为，则小于1时将缩小
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

size() → {Number}

返回集合的大小(即:包含其对象的数组的长度)
Inherited From:
Mixes In:
Source:
Returns:
Collection size
Type
Number

straightenObject(object) → {fabric.Canvas}

拉直对象，然后渲染画布
Parameters:
Name Type Description
object fabric.Object 对象整理
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

toCanvasElement(multiplieropt, croppingopt)

创建一个用当前画布内容绘制的新HTMLCanvas元素。 不需要调整实际的大小或重新绘制它。 将对象所有权转移到一个新的画布，绘制它，并设置一切。 这是一个用于获取dataUrl的中间步骤，但它也可以用于 创建画布的快速图像副本，而无需传递dataUrl字符串
Parameters:
Name Type Attributes Description
multiplier Number <optional>
 缩放系数。
cropping Object <optional>
 裁剪左偏移。裁剪顶部偏移。裁剪宽度。种植的高度。种植信息 属性 名字 类型 属性 描述 左 数量 裁剪左偏移。 前 数量 裁剪顶部偏移。 宽度 数量 裁剪宽度。 高度 数量 种植的高度。
Inherited From:
Source:

toDatalessJSON(propertiesToIncludeopt) → {String}

返回画布的无数据JSON表示
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 您可能希望在输出中额外包含的任何属性
Inherited From:
Source:
Returns:
json string
Type
String

toDatalessObject(propertiesToIncludeopt) → {Object}

返回画布的无数据对象表示
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 您可能希望在输出中额外包含的任何属性
Inherited From:
Source:
Returns:
object representation of an instance
Type
Object

toDataURL(optionsopt) → {String}

将画布元素导出为dataurl图像。注意，当使用倍增器时，裁剪会适当缩放
Parameters:
Name Type Attributes Description
options Object <optional>
 输出图像的格式。jpeg或png格式质量等级(0..1)。仅用于jpeg。乘数要按比例，要有一致性裁剪左偏移。在v1.2.14中引入裁剪顶部偏移。在v1.2.14中引入裁剪宽度。在v1.2.14中引入种植的高度。在v1.2.14中引入启用视网膜缩放克隆图像。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
});

toJSON(propertiesToIncludeopt) → {Object}

返回画布的对象表示 提供这个别名是因为如果调用JSON。对实例进行字符串化， 如果存在，将调用toJSON对象。 有一个toJSON方法意味着你可以使用json。stringify(myCanvas)
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 您可能希望在输出中额外包含的任何属性
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}

返回画布的对象表示
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 您可能希望在输出中额外包含的任何属性
Inherited From:
Source:
Returns:
object representation of an instance
Type
Object

toString() → {String}

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

toSVG(optionsopt, reviveropt) → {String}

返回画布的SVG表示形式
Parameters:
Name Type Attributes Description
options Object <optional>
 如果为真，则不包括xml标记视框的x坐标视框的y坐标视框宽度视框高度SVG视框对象 属性 名字 类型 属性 描述 x 数量 视框的x坐标 y 数量 视框的y坐标 宽度 数量 视框宽度 高度 数量 视框高度 SVG输出的编码带或不带单位的SVG所需宽度带或不带单位的SVG的期望高度
reviver function <optional>
 方法，用于进一步解析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; ', '');
});

viewportCenterObject(object) → {fabric.Canvas}

在视口中垂直和水平居中对象
Parameters:
Name Type Description
object fabric.Object 对象设置为垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

viewportCenterObjectH(object) → {fabric.Canvas}

在视口中水平居中对象。顶部不变
Parameters:
Name Type Description
object fabric.Object 对象设置为垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

viewportCenterObjectV(object) → {fabric.Canvas}

对象在视口中垂直居中。顶部不变
Parameters:
Name Type Description
object fabric.Object 对象设置为垂直和水平居中
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

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

设置画布实例的缩放级别，以点为中心缩放 这意味着以下缩放点与同一点将具有视觉效果 从该点开始的变焦效果。这个点不会移动。 它与画布中心或视口的视觉中心无关。
Parameters:
Name Type Description
point fabric.Point 放大:相对于…放大
value Number 若将zoom设置为，则小于1时将缩小
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

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

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

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