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

快捷菜单 返回顶部

fabric.js中文API

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

Class: StaticCanvas

fabric.StaticCanvas

new StaticCanvas()

Static canvas class 静态画布类
Mixes In:
Source:
See:
Fires:
  • before:render
  • after:render
  • canvas:cleared
  • object:added
  • object:removed

Members

(static) EMPTY_JSON :String

Type:
  • String
Default Value:
  • {"objects": [], "background": "white"}
Source:

allowTouchScrolling :Boolean

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

backgroundColor :String|fabric.Pattern

Background color of canvas instance. Should be set via fabric.StaticCanvas#setBackgroundColor. 画布实例的背景颜色。 应该通过fabric.StaticCanvas#setBackgroundColor设置。
Type:
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:
Source:

backgroundVpt :Boolean

if set to false background image is not affected by viewport transform 如果设置为false，背景图像不受视口变换的影响
Type:
  • Boolean
Since:
  • 1.6.3
Default Value:
  • true
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:
Source:

controlsAboveOverlay :Boolean

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

enableRetinaScaling :Boolean

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

FX_DURATION :Number

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

imageSmoothingEnabled :Boolean

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

overlayColor :String|fabric.Pattern

Overlay color of canvas instance. Should be set via fabric.StaticCanvas#setOverlayColor 画布实例的叠加颜色。 应通过织物设置。StaticCanvas # setOverlayColor
Type:
Since:
  • 1.3.9
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:
Source:

overlayVpt :Boolean

if set to false overlya image is not affected by viewport transform 如果设置为false，覆盖图像不受视口变换的影响
Type:
  • Boolean
Since:
  • 1.6.3
Default Value:
  • true
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。add, fabric.Collection.insertAt和fabric.Collection.remove， fabric.StaticCanvas。moveTo, fabric.StaticCanvas.clear等等，也应该重新渲染canvas。 禁用此选项将不会给性能提升时，添加/删除大量的对象，从画布一次 因为渲染是排队的，每帧执行一次。 禁用是建议的，手动管理应用程序的渲染并不是一个大的努力(canvas.requestRenderAll()) 将默认值设置为true，以免破坏文档和旧应用程序，fiddles。
Type:
  • Boolean
Default Value:
  • true
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. 基于vptcoord和object。因此，跳过对象的渲染 不包含在当前视窗中。 可以极大地帮助应用程序与拥挤的画布和使用缩放/平移 如果对象的边界框的一个角在画布上 对象被渲染。
Type:
  • Boolean
Default Value:
  • true
Source:

stateful :Boolean

Indicates whether objects' state should be saved 指示是否保存对象的状态
Type:
  • Boolean
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
Default Value:
  • true
Source:

viewportTransform :Array

The transformation (a Canvas 2D API transform matrix) which focuses the viewport 聚焦视口的转换(Canvas 2D API转换矩阵)
Type:
  • Array
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,bl,br。 如果画布没有缩放/平移，这些点就是画布的四个角 如果画布是viewportTransformed你那些点表示扩展 canvas元素的未变换坐标 坐标通过@method calcViewportBoundaries得到更新。
Source:

Methods

(static) supports(methodName) → {Boolean|null}

Provides a way to check support of some of the canvas methods (either those of HTMLCanvasElement itself, or rendering context) 提供一种方法来检查对某些画布方法的支持 (要么是HTMLCanvasElement本身，要么是渲染上下文)
Parameters:
Name Type Description
methodName String Method to check support for; Could be one of "setLineDash"检查支持的方法; 可以是setLineDash
Source:
Returns:
`true` if method is supported (or at least exists), `null` if canvas element or context can not be initialized
Type
Boolean | null

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搬到
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 ')。 在Group的情况下，不改变边界框。 对象应该是fabric的实例(或从fabric继承)。对象 非常不建议群组使用此功能。 你可以用add方法添加一堆对象，但是你需要 为Group类或position/bbox运行addWithUpdate调用将是错误的。
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
 Zero or more fabric instances零个或多个fabric实例
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 '，则将对象发送到下一个上部相交对象的前面
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要发送的对象
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 计算画布元素相对于文档的偏移量 此方法也附加为窗口的“resize”事件处理程序
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角的位置。 帮助确定对象何时处于当前呈现视口中 物体绝对坐标
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对象设置为垂直和水平居中
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物体水平居中
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物体垂直居中
Source:
Returns:
thisArg
Type
fabric.Canvas

clear() → {fabric.Canvas}

Clears all contexts (background, main, top) of an instance 清除实例的所有上下文(background, main, top)
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需要清除的背景信息
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要包含在克隆画布和子画布中的属性数组
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接收克隆实例作为第一个参数
Source:

complexity() → {Number}

Returns number representation of a collection complexity 返回集合复杂度的数字表示形式
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 '
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字体面的标记; font字体的url必须由开发人员收集 并且不会被fabricjs从DOM中提取出来
Parameters:
Name Type Description
objects Array Array of fabric objects织物对象数组
Source:
Returns:
Type
String

createSVGRefElementsMarkup() → {String}

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

dispose() → {fabric.Canvas}

Clears a canvas element and dispose objects 清除画布元素并处置对象
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要渲染的上下文
Source:

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选择对象
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以当前对象作为第一个参数调用的回调， 索引——作为第二，所有对象的数组——作为第三。 在全局对象的上下文中调用回调(Callback)。“窗口”) 当没有给出' context '参数时
context Object Context (aka thisObject)背景(又名thisObject)
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 函数 在动画的每一步调用
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 函数 在动画的每一步调用
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 函数 在动画的每一步调用
Source:
Returns:
context
Type
fabric.AnimationContext

fxStraightenObject(object) → {fabric.Canvas}

Same as fabric.Canvas.prototype.straightenObject, but animated 和织物，画布，原型一样。笔直对象，但动画
Parameters:
Name Type Description
object fabric.Object Object to straighten对象整理
Source:
Returns:
thisArg
Type
fabric.Canvas

getCenter() → {Object}

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

getContext() → {CanvasRenderingContext2D}

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

getElement() → {HTMLCanvasElement}

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

getHeight() → {Number}

Returns canvas height (in px) 返回画布高度(单位:px)
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起，此方法总是返回数组的COPY;
Parameters:
Name Type Attributes Description
type String <optional>
 When specified, only objects of this type are returned当指定时，只返回此类型的对象
Mixes In:
Source:
Returns:
Type
Array

getVpCenter() → {fabric.Point}

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

getWidth() → {Number}

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

getZoom() → {Number}

Returns canvas zoom level 返回画布缩放级别
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选择对象
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的实例(或从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时，不会发生对象的拼接(移位)
Mixes In:
Source:
Returns:
thisArg
Type
Self

isEmpty() → {Boolean}

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

item(index) → {Self}

Returns object at specified index 返回指定索引处的对象
Parameters:
Name Type Description
index Number
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时调用 和相应的物体(例如:织物。图像) 初始化
reviver function <optional>
 Method for further parsing of JSON elements, called after each fabric object created.方法，用于进一步解析JSON元素，在创建每个fabric对象后调用。
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移动到的位置
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(位置向量)来移动
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 instances零个或多个fabric实例
Mixes In:
Source:
Returns:
thisArg
Type
Self

renderAll() → {fabric.Canvas}

Renders the canvas 渲染画布
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呈现
Source:
Returns:
instance
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请求到下一个动画帧。 除非一个已经在进行中，在这种情况下，什么都不做 布尔标志将避免追加更多内容。
Source:
Returns:
instance
Type
fabric.Canvas

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，则将对象发送到下一个较低相交对象的后面
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发送回的对象
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设置背景颜色时调用的回调
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.设置背景图像的可选选项。
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'
});

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尺寸
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尺寸
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设置前景色时调用的回调
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.为叠加图像设置的可选选项。
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 matrix一个Canvas 2D API变换矩阵
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尺寸
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若将zoom设置为，则小于1时将缩小
Source:
Returns:
instance
Type
fabric.Canvas

size() → {Number}

Returns a size of a collection (i.e: length of an array containing its objects) 返回集合的大小(即:包含其对象的数组的长度)
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对象整理
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.种植的高度。
种植信息 属性 名字 类型 属性 描述 左 数量 裁剪左偏移。 前 数量 裁剪顶部偏移。 宽度 数量 裁剪宽度。 高度 数量 种植的高度。
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您可能希望在输出中额外包含的任何属性
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您可能希望在输出中额外包含的任何属性
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引入
选择对象 属性 名字 类型 属性 默认的 描述 格式 字符串 png 输出图像的格式。jpeg或png格式 质量 数量 1 质量等级(0..1)。仅用于jpeg。 乘数 数量 1 乘数要按比例，要有一致性 左 数量 裁剪左偏移。在v1.2.14中引入 前 数量 裁剪顶部偏移。在v1.2.14中引入 宽度 数量 裁剪宽度。在v1.2.14中引入 高度 数量 种植的高度。在v1.2.14中引入 enableRetinaScaling 布尔 启用视网膜缩放克隆图像。2.0.0引入
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。对实例进行字符串化， 如果存在，将调用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您可能希望在输出中额外包含的任何属性
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您可能希望在输出中额外包含的任何属性
Source:
Returns:
object representation of an instance
Type
Object

toString() → {String}

Returns a string representation of an instance 返回实例的字符串表示形式
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如果为真，则不包括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的期望高度
用于SVG输出的Options对象 属性 名字 类型 属性 默认的 描述 suppressPreamble 布尔 假 如果为真，则不包括xml标记 viewBox 对象 SVG视框对象 属性 名字 类型 属性 描述 x 数量 视框的x坐标 y 数量 视框的y坐标 宽度 数量 视框宽度 高度 数量 视框高度 编码 字符串 utf - 8 SVG输出的编码 宽度 字符串 带或不带单位的SVG所需宽度 高度 字符串 带或不带单位的SVG的期望高度
reviver function <optional>
 Method for further parsing of svg elements, called after each fabric object converted into svg representation.方法，用于进一步解析svg元素，在将每个织物对象转换为svg表示后调用。
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对象设置为垂直和水平居中
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对象设置为垂直和水平居中
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对象设置为垂直和水平居中
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若将zoom设置为，则小于1时将缩小
Source:
Returns:
instance
Type
fabric.Canvas

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

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

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