fabric.js中文API-自学php网

指示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:

fabric.js, line 8853

skipOffscreen :Boolean

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

Type:

Boolean

Default Value:

true

Source:

fabric.js, line 8931

stateful :Boolean

指示是否保存对象的状态

Type:

Boolean

Source:

fabric.js, line 8841

svgViewportTransformation :Boolean

当为true时，getSvgTransform()将应用StaticCanvas。viewportTransform转换为SVG转换。当真正的, 缩放后的画布将生成缩放后的SVG输出。

Type:

Boolean

Default Value:

true

Source:

fabric.js, line 9988

viewportTransform :Array

聚焦视口的转换(Canvas 2D API转换矩阵)

Type:

Array

Source:

fabric.js, line 8885

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得到更新。

Source:

fabric.js, line 8919

Methods

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

提供一种方法来检查对某些画布方法的支持 (要么是HTMLCanvasElement本身，要么是渲染上下文)

Parameters:

Name	Type	Description
`methodName`	String	检查支持的方法; 可以是setLineDash

Source:

fabric.js, line 10566

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}

平移视口以便将点放置在画布的左上角

Parameters:

Name	Type	Description
`point`	fabric.Point	搬到

Source:

fabric.js, line 9486

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实例

Mixes In:

fabric.Collection.add

Source:

fabric.js, line 375

Returns:

thisArg

Type: Self

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

在绘制的对象堆栈中向上移动一个对象或一个选择一个可选参数，intersecting允许移动前面的对象第一个相交物体的。交点在哪里计算边界框。如果没有发现交集，就不会有变化堆栈。

Parameters:

Name	Type	Attributes	Description
`object`	fabric.Object		要发送的对象
`intersecting`	Boolean	<optional>	如果' true '，则将对象发送到下一个上部相交对象的前面

Source:

fabric.js, line 10418

Returns:

thisArg

Type: fabric.Canvas

bringToFront(object) → {fabric.Canvas}

移动一个或多个选择的对象到绘制对象堆栈的顶部

Parameters:

Name	Type	Description
`object`	fabric.Object	要发送的对象

Source:

fabric.js, line 10312

Returns:

thisArg

Type: fabric.Canvas

calcOffset() → {fabric.Canvas}

计算画布元素相对于文档的偏移量此方法也附加为窗口的“resize”事件处理程序

Source:

fabric.js, line 9014

Returns:

instance

Type: fabric.Canvas

calcViewportBoundaries() → {Object}

用当前viewportTransform计算画布4角的位置。帮助确定对象何时处于当前呈现视口中物体绝对坐标

Source:

fabric.js, line 9624

Returns:

points.tl

Type: Object

centerObject(object) → {fabric.Canvas}

在画布中垂直和水平居中对象

Parameters:

Name	Type	Description
`object`	fabric.Object	对象设置为垂直和水平居中

Source:

fabric.js, line 9804

Returns:

thisArg

Type: fabric.Canvas

centerObjectH(object) → {fabric.Canvas}

在画布中将对象水平居中

Parameters:

Name	Type	Description
`object`	fabric.Object	物体水平居中

Source:

fabric.js, line 9784

Returns:

thisArg

Type: fabric.Canvas

centerObjectV(object) → {fabric.Canvas}

在画布中将对象垂直居中

Parameters:

Name	Type	Description
`object`	fabric.Object	物体垂直居中

Source:

fabric.js, line 9794

Returns:

thisArg

Type: fabric.Canvas

clear() → {fabric.Canvas}

清除实例的所有上下文(background, main, top)

Source:

fabric.js, line 9560

Returns:

thisArg

Type: fabric.Canvas

clearContext(ctx) → {fabric.Canvas}

清除画布元素的指定上下文

Parameters:

Name	Type	Description
`ctx`	CanvasRenderingContext2D	需要清除的背景信息

Source:

fabric.js, line 9542

Returns:

thisArg

Type: fabric.Canvas

clone(callbackopt, propertiesopt)

克隆画布实例

Parameters:

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

Source:

fabric.js, line 14267

cloneWithoutData(callbackopt)

克隆画布实例而不克隆现有数据。这实际上是复制画布尺寸，剪辑属性等。但是将数据保留为空(以便您可以使用自己的填充数据)

Parameters:

Name	Type	Attributes	Description
`callback`	Object	<optional>	接收克隆实例作为第一个参数

Source:

fabric.js, line 14282

complexity() → {Number}

返回集合复杂度的数字表示形式

Mixes In:

fabric.Collection.complexity

Source:

fabric.js, line 519

Returns:

complexity

Type: Number

contains(object, deepopt) → {Boolean}

如果集合包含对象则返回true

Parameters:

Name	Type	Attributes	Default	Description
`object`	Object			核对对象
`deep`	Boolean	<optional>	false	' true '检查所有子类，' false '只检查' _objects '

Mixes In:

fabric.Collection.contains

Source:

fabric.js, line 503

Returns:

`true` if collection contains an object

Type: Boolean

createSVGFontFacesMarkup(objects) → {String}

创建包含SVG字体面的标记; font字体的url必须由开发人员收集并且不会被fabricjs从DOM中提取出来

Parameters:

Name	Type	Description
`objects`	Array	织物对象数组

Source:

fabric.js, line 10151

Returns:

Type: String

createSVGRefElementsMarkup() → {String}

创建包含SVG引用元素(如模式、渐变等)的标记。

Source:

fabric.js, line 10125

Returns:

Type: String

dispose() → {fabric.Canvas}

清除画布元素并处置对象

Source:

fabric.js, line 10498

Returns:

thisArg

Type: fabric.Canvas

drawClipPathOnCanvas(ctx)

在lowerCanvasEl上绘制缓存的clipPath

Parameters:

Name	Type	Description
`ctx`	CanvasRenderingContext2D	要渲染的上下文

Source:

fabric.js, line 9685

fire(eventName, optionsopt) → {Self}

用可选的options对象触发事件

Parameters:

Name	Type	Attributes	Description
`eventName`	String		事件名称触发
`options`	Object	<optional>	选择对象

Mixes In:

fabric.Observable.fire

Source:

fabric.js, line 323

Returns:

thisArg

Type: Self

forEachObject(callback, context) → {Self}

对该组中的每个对象执行给定的函数

Parameters:

Name	Type	Description
`callback`	function	以当前对象作为第一个参数调用的回调，索引——作为第二，所有对象的数组——作为第三。在全局对象的上下文中调用回调(Callback)。“窗口”) 当没有给出' context '参数时
`context`	Object	背景(又名thisObject)

Mixes In:

fabric.Collection.forEachObject

Source:

fabric.js, line 448

Returns:

thisArg

Type: Self

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

用动画水平居中对象。

Parameters:

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

Source:

fabric.js, line 18040

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 函数在动画的每一步调用

Source:

fabric.js, line 18073

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 函数在动画的每一步调用

Source:

fabric.js, line 18106

Returns:

context

Type: fabric.AnimationContext

fxStraightenObject(object) → {fabric.Canvas}

和织物，画布，原型一样。笔直对象，但动画

Parameters:

Name	Type	Description
`object`	fabric.Object	对象整理

Source:

fabric.js, line 21580

Returns:

thisArg

Type: fabric.Canvas

getCenter() → {Object}

返回画布中心的坐标。返回值是一个具有top和left属性的对象

Source:

fabric.js, line 9772

Returns:

object with "top" and "left" number values

Type: Object

getContext() → {CanvasRenderingContext2D}

返回绘制对象的画布上下文

Source:

fabric.js, line 9551

Returns:

Type: CanvasRenderingContext2D

getElement() → {HTMLCanvasElement}

返回与此实例对应的

Source:

fabric.js, line 9510

Returns:

Type: HTMLCanvasElement

getHeight() → {Number}

返回画布高度(单位:px)

Source:

fabric.js, line 9291

Returns:

Type: Number

getObjects(typeopt) → {Array}

返回此实例的子对象数组 1.3.10中引入的类型参数自2.3.5起，此方法总是返回数组的COPY;

Parameters:

Name	Type	Attributes	Description
`type`	String	<optional>	当指定时，只返回此类型的对象

Mixes In:

fabric.Collection.getObjects

Source:

fabric.js, line 463

Returns:

Type: Array

getVpCenter() → {fabric.Point}

计算画布中对应于实际视口中心的点。

Source:

fabric.js, line 9851

Returns:

vpCenter, viewport center

Type: fabric.Point

getWidth() → {Number}

返回画布宽度(单位为px)

Source:

fabric.js, line 9283

Returns:

Type: Number

getZoom() → {Number}

返回画布缩放级别

Source:

fabric.js, line 9413

Returns:

Type: Number

initialize(el, optionsopt) → {Object}

构造函数

Parameters:

Name	Type	Attributes	Description
`el`	HTMLElement \| String		初始化实例的
`options`	Object	<optional>	选择对象

Source:

fabric.js, line 8784

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时，不会发生对象的拼接(移位)

Mixes In:

fabric.Collection.insertAt

Source:

fabric.js, line 398

Returns:

thisArg

Type: Self

isEmpty() → {Boolean}

如果集合中不包含任何对象，则返回true

Mixes In:

fabric.Collection.isEmpty

Source:

fabric.js, line 485

Returns:

true if collection is empty

Type: Boolean

item(index) → {Self}

返回指定索引处的对象

Parameters:

Name	Type	Description
`index`	Number

Mixes In:

fabric.Collection.item

Source:

fabric.js, line 477

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对象后调用。

Source:

fabric.js, line 14096

Tutorials:

Tutorial: http://fabricjs.com/fabric-intro-part-3#deserialization

See:

jsFiddle demo

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	移动到的位置

Source:

fabric.js, line 10487

Returns:

thisArg

Type: fabric.Canvas

relativePan(point) → {fabric.Canvas}

潘的观点相对而言

Parameters:

Name	Type	Description
`point`	fabric.Point	(位置向量)来移动

Source:

fabric.js, line 9499

Returns:

instance

Type: fabric.Canvas

remove(…object) → {Self}

从集合中移除对象，然后渲染画布(如果' renderOnAddRemove '不是' false ')

Parameters:

Name	Type	Attributes	Description
`object`	fabric.Object	<repeatable>	零个或多个fabric实例

Mixes In:

fabric.Collection.remove

Source:

fabric.js, line 417

Returns:

thisArg

Type: Self

renderAll() → {fabric.Canvas}

渲染画布

Source:

fabric.js, line 9582

Returns:

instance

Type: fabric.Canvas

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

渲染背景，对象，覆盖和控件。

Parameters:

Name	Type	Description
`ctx`	CanvasRenderingContext2D
`objects`	Array	呈现

Source:

fabric.js, line 9649

Returns:

instance

Type: fabric.Canvas

requestRenderAll() → {fabric.Canvas}

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

Source:

fabric.js, line 9610

Returns:

instance

Type: fabric.Canvas

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

在绘制的对象堆栈中向下移动对象或选择项一个可选参数，intersecting允许在后面移动对象第一个相交的物体。交点在哪里计算边界框。如果没有发现交集，就不会有变化堆栈。

Parameters:

Name	Type	Attributes	Description
`object`	fabric.Object		要发送的对象
`intersecting`	Boolean	<optional>	如果为true，则将对象发送到下一个较低相交对象的后面

Source:

fabric.js, line 10345

Returns:

thisArg

Type: fabric.Canvas

sendToBack(object) → {fabric.Canvas}

移动一个或多个选择的对象到绘制对象堆栈的底部

Parameters:

Name	Type	Description
`object`	fabric.Object	发送回的对象

Source:

fabric.js, line 10283

Returns:

thisArg

Type: fabric.Canvas

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

设置画布的背景颜色

Parameters:

Name	Type	Description
`backgroundColor`	String \| fabric.Pattern	要设置背景色的颜色或图案
`callback`	function	设置背景颜色时调用的回调

Source:

fabric.js, line 9168

See:

jsFiddle demo

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>	设置背景图像的可选选项。

Source:

fabric.js, line 9118

See:

jsFiddle demo

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}

设置画布实例的尺寸(宽度，高度)。当选择。如果cssOnly标志激活，您还应该提供度量单位(px/%/em)

Parameters:

Name	Type	Attributes	Description
`dimensions`	Object		画布元素的宽度画布元素高度具有宽度/高度属性的对象属性名字类型属性描述宽度数量 \| 字符串画布元素的宽度高度数量 \| 字符串画布元素高度
`options`	Object	<optional>	将给定的尺寸仅设置为画布后库尺寸将给定的尺寸仅设置为css尺寸选择对象属性名字类型属性默认的描述 backstoreOnly 布尔假将给定的尺寸仅设置为画布后库尺寸 cssOnly 布尔假将给定的尺寸仅设置为css尺寸

Source:

fabric.js, line 9332

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尺寸

Source:

fabric.js, line 9317

Returns:

instance

Type: fabric.Canvas

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

设置此画布的前景色

Parameters:

Name	Type	Description
`overlayColor`	String \| fabric.Pattern	要设置前景色的颜色或图案
`callback`	function	设置前景色时调用的回调

Source:

fabric.js, line 9143

See:

jsFiddle demo

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>	为叠加图像设置的可选选项。

Source:

fabric.js, line 9066

See:

jsFiddle demo

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变换矩阵

Source:

fabric.js, line 9423

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尺寸

Source:

fabric.js, line 9304

Returns:

instance

Type: fabric.Canvas

setZoom(value) → {fabric.Canvas}

设置画布实例的缩放级别

Parameters:

Name	Type	Description
`value`	Number	若将zoom设置为，则小于1时将缩小

Source:

fabric.js, line 9475

Returns:

instance

Type: fabric.Canvas

size() → {Number}

返回集合的大小(即:包含其对象的数组的长度)

Mixes In:

fabric.Collection.size

Source:

fabric.js, line 493

Returns:

Collection size

Type: Number

straightenObject(object) → {fabric.Canvas}

拉直对象，然后渲染画布

Parameters:

Name	Type	Description
`object`	fabric.Object	对象整理

Source:

fabric.js, line 21569

Returns:

thisArg

Type: fabric.Canvas

toCanvasElement(multiplieropt, croppingopt)

创建一个用当前画布内容绘制的新HTMLCanvas元素。不需要调整实际的大小或重新绘制它。将对象所有权转移到一个新的画布，绘制它，并设置一切。这是一个用于获取dataUrl的中间步骤，但它也可以用于创建画布的快速图像副本，而无需传递dataUrl字符串

Parameters:

Name	Type	Attributes	Description
`multiplier`	Number	<optional>	缩放系数。
`cropping`	Object	<optional>	裁剪左偏移。裁剪顶部偏移。裁剪宽度。种植的高度。种植信息属性名字类型属性描述左数量裁剪左偏移。前数量裁剪顶部偏移。宽度数量裁剪宽度。高度数量种植的高度。

Source:

fabric.js, line 14033

toDatalessJSON(propertiesToIncludeopt) → {String}

返回画布的无数据JSON表示

Parameters:

Name	Type	Attributes	Description
`propertiesToInclude`	Array	<optional>	您可能希望在输出中额外包含的任何属性

Source:

fabric.js, line 9876

Returns:

json string

Type: String

toDatalessObject(propertiesToIncludeopt) → {Object}

返回画布的无数据对象表示

Parameters:

Name	Type	Attributes	Description
`propertiesToInclude`	Array	<optional>	您可能希望在输出中额外包含的任何属性

Source:

fabric.js, line 9894

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引入

Source:

fabric.js, line 14010

See:

jsFiddle demo

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>	您可能希望在输出中额外包含的任何属性

Source:

fabric.js, line 10607

Tutorials:

Tutorial: http://fabricjs.com/fabric-intro-part-3#serialization

See:

jsFiddle demo

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>	您可能希望在输出中额外包含的任何属性

Source:

fabric.js, line 9885

Returns:

object representation of an instance

Type: Object

toString() → {String}

返回实例的字符串表示形式

Source:

fabric.js, line 10538

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的期望高度用于SVG输出的Options对象属性名字类型属性默认的描述 suppressPreamble 布尔假如果为真，则不包括xml标记 viewBox 对象 SVG视框对象属性名字类型属性描述 x 数量视框的x坐标 y 数量视框的y坐标宽度数量视框宽度高度数量视框高度编码字符串 utf - 8 SVG输出的编码宽度字符串带或不带单位的SVG所需宽度高度字符串带或不带单位的SVG的期望高度
`reviver`	function	<optional>	方法，用于进一步解析svg元素，在将每个织物对象转换为svg表示后调用。

Source:

fabric.js, line 10027

Tutorials:

Tutorial: http://fabricjs.com/fabric-intro-part-3#serialization

See:

jsFiddle demo

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	对象设置为垂直和水平居中

Source:

fabric.js, line 9816

Returns:

thisArg

Type: fabric.Canvas

viewportCenterObjectH(object) → {fabric.Canvas}

在视口中水平居中对象。顶部不变

Parameters:

Name	Type	Description
`object`	fabric.Object	对象设置为垂直和水平居中

Source:

fabric.js, line 9828

Returns:

thisArg

Type: fabric.Canvas

viewportCenterObjectV(object) → {fabric.Canvas}

对象在视口中垂直居中。顶部不变

Parameters:

Name	Type	Description
`object`	fabric.Object	对象设置为垂直和水平居中

Source:

fabric.js, line 9840

Returns:

thisArg

Type: fabric.Canvas

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

设置画布实例的缩放级别，以点为中心缩放这意味着以下缩放点与同一点将具有视觉效果从该点开始的变焦效果。这个点不会移动。它与画布中心或视口的视觉中心无关。

Parameters:

Name	Type	Description
`point`	fabric.Point	放大:相对于…放大
`value`	Number	若将zoom设置为，则小于1时将缩小

Source:

fabric.js, line 9457

Returns:

instance

Type: fabric.Canvas

在线工具

快捷菜单 返回顶部