Question

fabric.Canvas

构造函数

new Canvas();

可触发的事件

object:modified、object:rotating、object:scaling、object:moving、object:selected、before:selection:cleared、selection:cleared、selection:created、path:created、mouse:down、mouse:move、mouse:up、mouse:over、mouse:out

父类

fabric.StaticCanvas

类属性成员

allowTouchScrolling(boolean) //默认 false，指明使用触摸屏或者在 canvas 上拖动对象时，屏幕是否跟着滚动  

backgroundColor(string|fabric.Pattern) //Canvas 实例的背景色，需要通过 fabric.StaticCanvas 的 setBackgroundColor() 函数来设置 

/**
* 默认 null，Canvas 实例的背景图片。
* 需要通过 fabric.StaticCanvas 的 setBackgroundImage() 函数来设置。
* 如果要设置图片的透明度和长宽，需要通过 fabric.Image 的 opacity 属性和 width、height 属性来设置。  
*/
backgroundImage(fabric.Image) 

centeredRotation(boolean) //默认 false，当设置为 true 时 Canvas 上的所有对象使用中间点（而不是默认的左上角）作为旋转的原点

centeredScaling(boolean) //默认 false，当设置为 true 时，Canvas 上的所有对象使用中间点（而不是默认的左上角）作为缩放的原点  

clipTo(function) //这是一个 funcion 类型的属性成员，一般用于回调。  

//作用是将整个 Canvas 进行裁剪并传递给第一个参数，以下是文档中附带的例子 //  
canvas.clipTo = function(ctx) {
  ctx.arc(0, 0, 60, 0, Math.PI*2, true);
};
// or passing to fabric.Element options
new fabric.Element('myCanvas', {
  clipTo: function(ctx) {
    ctx.arc(0, 0, 60, 0, Math.PI*2, true);
  }
});

containerClass(string) // 默认"canvas-container"，包裹 Canvas 元素的默认元素类（<div>）  

controlsAboveOverlay(boolean) // 默认 false，指明对象的控制器（borders/controls）是否渲染在前景图片之上  

defaultCursor(string) // 默认"default"，整个 Canvas 上使用的默认光标  

freeDrawingCursor(string) // 默认"crosshair"，自由绘画状态下的光标样式 

FX_DURATION(number) // 默认 500，单位毫秒（ms）。动画的持续时间，给 fx*的方法使用。

hoverCursor(string) // 默认"move"，当鼠标覆盖在 Canvas 上任一对象上时的光标样式。 

imageSmoothingEnabled(boolean) // 默认 true。指明 Canvas 是否使用图片的平滑特性。 

includeDefaultValues(boolean) // 默认 true，指明 Canvas 序列化时是否包括默认值。 
 
interactive(boolean) // 默认 true。指明 Canvas 是否可以进行交互，该属性的值不可更改。  

moveCursor(string) // 默认"move"，移动 Canvas 任一对象时的光标样式。  

overlayColor(string|fabric.Pattern) // Canvas 的前景色，可以通过 fabric.StaticCanvas 的 setOverlayColor() 函数进行设置。 

/**
* 默认 null，Canvas 的前景图。
* 可以通过 fabric.StaticCanvas 的 setOverlayImage() 函数进行设置。
* 如果要设置位置，可通过 fabric.Image 的 left 和 top 属性进行设置。 
*/
overlayImage(fabric.Image) 

perPixelTargetFind(boolean) // 默认 false。当设置为 true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。

preserveObjectStacking(boolean) // 默认 false。指明对象被选定的时候，是否留在当前的栈位置上。如果设置为 false，对象会被移至最顶端，并被渲染为选择组的一部分。  

renderOnAddRemove(boolean) // 默认为 true。指明当调用 fabric.Collection.add、fabric.Collection.insertAt、fabric.Collection.remove 函数时是否重新渲染 Canvas。当大量的插入或移除对象时，将这个属性设置为 false，可以获得高的效率。

rotationCursor(string) // 默认"crosshair"，旋转点的光标样式。  

selection(boolean) // 默认 true。指明分组选择是否可用。  

selctionBorderColor(string) // 默认"rgba(255,255,255,0.3)"，选择边框的颜色。 

selectionColor(string) // 默认"rgba(100,100,255,0.3)"，对象被选中时的颜色。 

selectionDashArray(Array) //选择框的点状样式数组。如果非空，选择空即为点状样式。  

selectionLineWidth(number) //默为 1。对象或组被选中时，选择框的线条宽度。  

skipTargetFind(boolean) //默认 false。设置为 true 时，当鼠标覆盖在 Canvas 上时，对象的探测均会失效。这个属性可用于提高性能。

stateful(boolean) //默认 true。指明对象的状态是否会被保存。  

/**
* 默认 true。
* 当设置为 true 时，getSvgTransform() 函数将会 StaticCanvas.viewprotTransform 赋值给 SVG transform；
* 当设置为 true 时，被拉伸的 Canvas 将会把拉伸效果应用到 SVG 的输出。  
*/
svgViewportTransformation(boolean)

targetFindTolerance(number) //默认 0。对象探测的误差像素点阈值。

uniScaleTransform(boolean) //默认 false。当设置为 true 时，对象可以固定一边被进行拉伸。

viewportTransform(Array) //应用于视口的拉伸（译者注：这个属性完全不知道在干啥）

类函数成员

void _setCursorFromEvent(e,target) //根据光标在 Canvas 上的位置对光标进行设置。编者注 //这个函数在 opera 上有很大的 BUG。

absolutePan(fabric.Point) //将画布视图的原点移至 point 指定的点。

beingForward(fabric.Object,boolean) //将指定对象在栈中称前一位。第二个参数如果设置为 true，将会把指定对象在 Canvas 上移至到覆盖它的对象之上。

bringToFront(fabric.Object) //将指定的对象移至栈顶。

calcOffset() //计算 Canvas 相对于 document 的偏移量。这个函数被附加给 Window 的 resize 事件的处理函数。

centerObject(fabric.Object) //在水平和垂直方向上居中指定的对象。在居中之后，你可能属要调用对象上的 setCoords() 函数来更新 controls 的区域。

centerObjectH(fabric.Object) //在水平方向上居中指定的对象。在居中之后，你可能属要调用对象上的 setCoords() 函数来更新 controls 的区域。

centerObjectV(fabric.Object) //在垂直方向上居中指定的对象。在居中之后，你可能属要调用对象上的 setCoords() 函数来更新 controls 的区域。

clear() //清空 Canvas 上的所有实例，包括背景、对象等。

clearContext(CanvasRenderingContext2D) //清除指定的 Canvas 的元素。

clone(callback opt, Array opt) //复制 Canvas 的实例。callback 是一个回调函数，它的第一个参数用于接收被复制的对象实例；第二个参数放置着包含在被复制的 Canvas 以及它的子元素中的属性。

cloneWithoutData(callback opt) //复制 Canvas 的实例，但不复制其包含的数据。这个函数是复制必要的维度、裁剪属性等等，但它们的数据会被置空（你可以自己计算出这些属性的值）。callback 是一个回调函数，它的第一个参数用于接收被复制的对象的实例。

boolean containsPoint(Event, fabric.Object) //检测点是否包含在给定的 Object 的区域中。

deactivateAll() //使 Canvas 上活动的 Object 无效。移除任何处于活动状态的的 Group 或 object。

deactivateAllWithDispatch() //使 Canavs 上活动的 Object 无效，并且分发合适的事件。

discardActiveGroup() //抛弃当前处于活动状态的 Group。

discardActiveObject() //抛弃当前处于活动状态的 Object。

dispose() //清楚 Canvas 上的所有元素，并移除所有的侦听事件。

drawControls(CanvasRenderingContext2D) //绘制 Object 的控制器（边框和控制器，就是那几个小方块）。

findTarget(Event, boolean) //确定了我们点中了哪个 Object。如果第二个参数为 true，则会跳过 Group，只有 Object 会被探测到。

fxCenterObjectH(fabric.Object, callback object opt) //让指定的 Object 水平居中，带有动画效果。第二个参数是一个回调的 Object，可以有两个属性，onComplete 和 onChange 两个属性（都是 Function）。

fxCenterObjectV(fabric.Object, callback object opt) //让指定的 Object 垂直居中，带有动画效果。第二个参数是一个回调的 Object，可以有两个属性，onComplete 和 onChange 两个属性（都是 Function）。

fxRemove(fabirc.Object, callback object opt) //和 fabric.Canvas.remove() 函数效果一样，只不过带了动画效果。第二个参数是一个回调的 Object，可以有两个属性，onComplete 和 onChange 两个属性（都是 Function）。

fxStraightenObject(fabric.Object) //和 fabric.Canvas.prototype.straightenObject() 效果一样，只不过带了动画效果。

fabric.Group getActiveGroup() //获取当前处于活动状态的 Group。

fabric.Object getActiveObject() //获取当前处于活动状态的 Object。

Object getCenter() //返回 Canvas 的中点坐标。返回值中包含了 left 和 top 两个属性。

CanvasRenderingContext2D getContext() //返回 Canvas 的 Context。

HTMLCanvasElement getElement() //返回与 Canvas 相关联的<canvas>HTML 元素。

Number getHeight() //获取 Canvas 的高度，以像素为单位。

Object getPointer(Event) //返回与 Canvas 相关联的点坐标，返回值中包含了 x 和 y 两个属性。

CanvasRenderingContext2D getSelectionContext() //返回绘置选中对象的 Canvas 的 Context。

HTMLCanvasElement getSelectionElement() //返回绘置着选中对象的 Canvas 的相关联的<canvas>HTML 对象。

Number getWidth() //获取 Canvas 的宽度，以像素为单位。

Number getZoom() //返回 Canvas 的缩放级别。

Object initialize(HTMLElement | String, Object opt) //构造函数。第一个参数指定需要实例代的 HTML 元素；第二个参数则指定了需要预先设置的一些属性（可选）。

boolean isTargetTransparent(fabric.Object, Number x, Number y) //当 Object 在指定的坐标上是透明的，则返回 true。

loadFromDatalessJSON(String | Object, Function, Function opt) //从无数据的 json 中还原出 Canvas。这个无数据的 json 必须符合 fabric.Canvas.toDatalessJSON()。这个函数有三个参数，第一个参数是需要还原的 json 数据；第二个参数是一个回调函数，这个回调函数在解析 json，相关的 Object（如 fabric.Image）初始化时被调用；第三个参数也是一个回调函数，可选，在每一个元素创建之后被调用。编者注 //这个函数在 1.2.2 版本后已被废弃。

loadFromJSON(String | Object, Function, Function opt) //从指定的 json 数据中还原出 Canvas。这个 json 数据必须符合 fabric.Canvas.toJSON()。这个函数有三个参数，第一个参数是需要还原的 json 数据；第二个参数是一个回调函数，这个回调函数在解析 json，相关的 Object（如 fabric.Image）初始化时被调用；第三个参数也是一个回调函数，可选，在每一个元素创建之后被调用。文档中的示例 //

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  // `o` = json object
  // `object` = fabric.Object instance
  // ... do some stuff ...
});
moveTo(fabric.Object, Number) //将指定的 Object 移动到栈的指定位置。

onBeforeScaleRotate() //这是一个回调函数，在 Object 缩放或旋转时被调用。

relativePan(fabric.Point) //整个视口，根据给定的点形成向量进行移动。译者注 //没看懂这里整个视口是怎么移动的。

removeListeners() //移除所有的事件侦听函数。

renderAll(boolean) //将上层的 Canvas 以及从属的 Canvas 全部进行渲染。如果需要所有的顶层 Images 重新进行渲染，则将参数设置为 true。

renderTop() //只渲染顶层的 Canvas，同时也会渲染选中的 Group。

sendBackwards(fabric.Object, boolean opt) //将指定的 Object 在栈中向下移一位。如果第二个参数设置为 true，则会在 Canvas 上将指定的 Object 放置在下一个与之有交集的 Object 的后面。

sendToBack(fabric.Object) //将指定的 Object 置于栈中的最底部。

setActiveGroup(fabric.Group) //设置指定的 Group 为活动状态。

setActiveObject(fabric.Object, Event opt) //设置指定的 Object 为活动状态。第二个参数通过 object:selected 事件进行传递。

setBackgroundColor(string | fabric.Pattern, Function) //设置 Canvas 的背景色。第二个参数是个回调函数，在背景色设置之后被调用。

// 文档中示例
// eg1
canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
// eg2
canvas.setBackgroundColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));
// eg3
canvas.setBackgroundColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png',
  repeat: 'repeat',
  offsetX: 200,
  offsetY: 100
}, canvas.renderAll.bind(canvas));

/**
* 设置 Canvas 的背景图片。
* 第二个参数是回调函数，当图片被成功加载被设置成背景后被调用；
* 第三个是可选参数，将设置给背景图的一些属性。
*/
setBackgroundImage(fabric.Image | string, Function, Object opt) 
// 文档中示例
// eg1
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'
});
// eg2
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'
});
// eg3
fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img) {
   img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
   canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});
// eg4
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'
});
// eg5
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(string) //设置光标的样式。参数的可选值有：[ [<url> [<x> <y>]?,] 可参考： http://www.w3.org/TR/css3-ui/#cursor 


/**
* 设置 Canvas 的长宽。
* 第一个参数有两个属性 width 和 height，分别表示要设置的长宽，类型为 Number 或 string；
* 第二个参数有两个属性 backstoreOnly 和 cssOnly，这两个均为 boolean 类型.
* 当 cssOnly 为 true 时，width 和 height 的设置需要带上单位（px/%/em 等）。
* 当 backstroeOnly 为 true 时，则将设置的长宽以 backstore 的模式进行设置。
* （译者注：不太清楚这里的 backstore 什么意思，去查了字典也没查到这个词）
*/
setDimensions(Object, Object opt)

setOverlayColor(string | fabric.Pattern, Function) //设置 Canvas 的前景色。第一个参数是用来设置的颜色；第二个参数是个回调函数，当前景色设置后被调用。
// 文档中示例：
// eg1
canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
// eg2
canvas.setOverlayColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));
// eg3
canvas.setOverlayColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png',
  repeat: 'repeat',
  offsetX: 200,
  offsetY: 100
}, canvas.renderAll.bind(canvas));

/**
* 设置 Canvas 的前景图。
* 第一个参数是要设置的前景图；
* 第二个参数是个回调函娄，在成功加载图片并设置为前景图中被调用；
* 第三个参数是个可选参数，是要设置给前景图的选项。
*/
setOverlayImage(fabric.Image | string, Function, Object opt)
//文档中示例：
// eg1
canvas.setOverlayImage('xx.png', canvas.renderAll.bind(canvas), {
  // Needed to position overlayImage at 0/0
  originX: 'left',
  originY: 'top'
});
// eg2
canvas.setOverlayImage('xx.png', canvas.renderAll.bind(canvas), {
  opacity: 0.5,
  angle: 45,
  left: 400,
  top: 400,
  originX: 'left',
  originY: 'top'
});
// eg3
fabric.Image.fromURL('xxx.png', function(img) {
   img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
   canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
});
// eg4
canvas.setOverlayImage('xxxx', canvas.renderAll.bind(canvas), {
  width: canvas.width,
  height: canvas.height,
  // Needed to position overlayImage at 0/0
  originX: 'left',
  originY: 'top'
});
// eg5
canvas.setOverlayImage('xxx.png', canvas.renderAll.bind(canvas), {
  opacity: 0.5,
  angle: 45,
  left: 400,
  top: 400,
  originX: 'left',
  originY: 'top',
  crossOrigin: 'anonymous'
});

setViewportTransform(Array) //设置 Canvas 的变换。参数则属于 context.transform 的一种表现形式。

setZoom(Number) //设置 Canvas 的缩放程度。当参数小于 1 时，Canvas 则缩小。

straightenObject(fabric.Object) //将 Object 拉直（译者注 //不太清楚这里拉直什么意思）。

string toDatalessJSON(Array opt) //返回代表 Canvas 的无数据 JSON。参数是一个数组，指定了需要额外包含在输出中的属性。

Object toDatalessObject(Array opt) //返回代表 Canvas 的无数据 Object。参数是一个数组，指定了需要额外包含在输出中的属性。

/**
* 将 Canvas 转为数据串形式的 URL。要注意，当 multiplier 被使用的时候，裁剪区域会被适当缩放。
* Object 是一个可选值，附带着以下属性：
* format  string，可选，默认"png"，指定输出的图像格式，"jpeg"或"png"
* quality  Number，可选，默认 1，取值范围 0 到 1，只对于"jpeg"格式有效
* multiplier  Number，可选，默认 1，缩放因子
* left  Number，可选，裁剪的左偏移量
* top  Number，可选，裁剪的顶部偏移量
* width  Number，可选，裁剪宽度
* height  Number，可选，裁剪高度
*
*/
string toDataURL(Object opt) 
// 文档中示例：
// eg1
var dataURL = canvas.toDataURL({
  format: 'jpeg',
  quality: 0.8
});
// eg2
var dataURL = canvas.toDataURL({
  format: 'png',
  left: 100,
  top: 100,
  width: 200,
  height: 200
});
// eg3
var dataURL = canvas.toDataURL({
  format: 'png',
  multiplier: 2
});

/**
* 将 Canavs 转成数据串格式的 URL，通过缩放因子可以对图片进行缩放。
* 第一个参数是输入的格式，jpeg 或 png；
* 第二个参数是缩放因子；
* 第三个参数则是输出的质量，取值为 0 到 1 之间。本函数已废*弃。
*/
string toDataURLWithMultiplier(string, Number, Number)
string toJSON(Array) //将 Canvas 序列化为 JSON 数据。参数是一个数组，包含你想要额外添加到输出数据中的属性。文档中示例：
// eg1
var json = canvas.toJSON();
// eg2
var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockUniScaling']);
// eg3
canvas.includeDefaultValues = false;
var json = canvas.toJSON();

Object toObject(Array) //将 Canvas 序列化为 Object 数据。参数是一个数组，包含你想要额外添加到输出数据中的属性。

string toString() //返回一个代表 Canvas 实例的字符串。

string toSVG(Object opt, Function opt) 
//返回一个代表 Canvas 的 SVG 数据。参数比较复杂，如需查看请点击 /assets/toSVG.png
// 文档中示例：
// eg1
var svg = canvas.toSVG();
// eg2
var svg = canvas.toSVG({suppressPreamble: true});
// eg3
var svg = canvas.toSVG({
  viewBox: {
    x: 100,
    y: 100,
    width: 200,
    height: 300
  }
});
// eg4
var svg = canvas.toSVG({encoding: 'ISO-8859-1'});
// eg5
var svg = canvas.toSVG(null, function(svg) {
  return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');
});

zoomToPoint(fabric.Point, Number) //设置 Canvas 以指定的点为中心进行缩放。第一个参数即为指定的中心点；第二个参数为缩放级别，小于 1 即为缩小。