自由绘画

如果说有什么功能能让在眼前一亮，那一定是它能够很好的支持自由绘图！由于画布只是一个2D位图， Fabric为我们提供了一张纸：可以自由绘画，而且非常自然。

只需将Fabric canvas的isDrawingMode属性设置为true即可实现自由绘制模式。这样画布上的点击和移动就会被立刻解释为铅笔或刷子。

当isDrawingMode为true时，您可以随意在画布上多次绘制，但是一旦你在画布上做任何动作，然后触发“mouseup”事件，Fabric就会触发"path:created" 事件，并且将刚刚的绘画转变为fabric.Path的实例，

如果在任何时刻，将isDrawingMode设置为false，你创建的路径对象会仍然存在于画布上。而且由于它们是fabric.Path对象，所以可以以任何方式修改它们： 移动，旋转，缩放等。

还有两个属性可以定制自由绘图： freeDrawingBrush.color and freeDrawingBrush.width，两者都可以通过freeDrawingBrush实例在Fabric画布实例上使用。freeDrawingBrush.color可以是任何常规的颜色值，代表画笔的颜色。freeDrawingBrush.width是一个像素，代表画笔的宽度。

在不久的将来，我们计划添加更多的自由绘图选项：各种版本的画笔（如喷雾式或粉笔式）。还可以自定义画笔模式，还有一个可以自己扩展的选项，类似于Fabric图像滤镜。

自定义

一件有趣的事情是如何去自定义Fabric，您可以在canvas或canvas对象上调整数十种各样的参数，以使事情按照所需的方式运行。我们来看看其中的一些。

锁定对象

画布上的每个对象都可以以几种方式锁定。“lockMovementX”，“lockMovementY”，“lockRotation”，“lockScalingX”，“lockScalingY”是锁定相应对象动作的属性。所以将某个对象的lockMovementX属性设置为true会阻止对象被水平移动，此时你仍然可以垂直移动它。类似的，lockRotation可以阻止旋转，lockScalingX / lockScalingY 可以阻止水平或者垂直缩放。所有这些都是可以叠加的，你可以将它们组合在一起使用。

改变边框和角

您可以通过“hasControls”和“hasBorders”属性来控制对象的边框和角的可见性。只是将它们设置为false。

object.hasBorders = false;

object.hasControls = false;

您还可以通过某些自定义属性来调整它的外观：“cornerDashArray”，“borderDashArray”，“borderColor”，“transparentCorners”“cornerColor”，“cornerStrokeColor”，“cornerStyle”，“selectionBackgroundColor”，“padding”和“cornerSize”。

object.set({
  borderColor: 'red',
  cornerColor: 'green',
  cornerSize: 6
});

  object.set({
    transparentCorners: false,
    cornerColor: 'blue',
    cornerStrokeColor: 'red',
    borderColor: 'red',
    cornerSize: 12,
    padding: 10,
    cornerStyle: 'circle',
    borderDashArray: [3, 3]
  });
  

禁用选择

您可以通过将canvas的“selection”属性设置为false来禁用画布上的对象选择，这可以防止在画布上选中任何对象。如果只需要使某些对象不可选，则可以更改某个对象的“selectable”属性，只是将其设置为false，并且对象失去其交互性。

自定义选择

现在，如果你不想禁用选择，而是要改变它的外观呢？没问题。

canvas画布上有4个属性来控制它的表现： "selectionColor", "selectionBorderColor", "selectionLikeWidth", and "selectionDashArray"。这些都非常的语义化，让我们来看一个例子：

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;

最后一个属性“selectionDashArray”可不是那么简单，他允许我们使用虚线作为选择线。定义虚线模式的方式是通过数组指定间隔。因此，要创建一个模式，其中有一个大点的数字，后面跟着一个小一点的数字来代表虚线的间隔，我们可以使用[10，5]，作为“selectionDashArray”。这将画出10px长的线，然后跳过5px，再画一个10px长度的线，以此类推。如果我们使用[2, 4, 6]的数组，这样将通过绘制2px长的线，然后跳过4px，然后绘制6px线，然后跳过2px，然后绘制4px线，然后跳过6px，以此类推。例如，这就是[5,10]规则的样子：

虚线描边

与canvas上的“selectionDashArray”类似，所有Fabric对象都有“strokeDashArray”属性，负责在对象上执行虚线的描边操作。

var rect = new fabric.Rect({
  fill: '#06538e',
  width: 125,
  height: 125,
  stroke: 'red',
  strokeDashArray: [5, 5]
});
canvas.add(rect);

可点击区域

如你所知，所有的Fabric对象都有边界边框，用于拖动、旋转、缩放。您可能已经注意到，当用于控制的角和边框存在时，即使在单击没有绘制内容的对象边框内的空白时也可以拖动该对象。

看看这个图像：

默认情况下，画布上的所有Fabric对象都可以通过边框拖动。如果你想要不同的行为，例如根据Fabric对象的实际内容进行点击或拖拽，您可以在对象上使用“perPixelTargetFind”属性。只需将其设置为true即可获得所需的行为。

旋转控件

由于版本1.0 Fabric在默认情况下使用默认UI，对象不能同时缩放和旋转。作为代替的是每个对象都有一个单独的旋转控件。该控件的相应属性为“hasRotatingPoint”，默认是true，将其设置为false可以禁用旋转控制。您也可以通过“rotatePointOffset”数字属性自定义其相对于对象的偏移量。

Fabric对象变形

自1.0版以来，Fabric中还提供了许多其他与转换相关的属性，其中一个是画布实例上的“uniScaleTransform”。默认为false，可用于启用对象的非均匀缩放;换句话说，它允许在通过角拖动时改变对象的比例。

有“centeredScaling”和“centeredRotation”属性（在v1.3.4之前是一个属性“centerTransform”）。他们指定对象的中心是否应该用作转换的起点。当它们都设置为true，对象总是从中心缩放/旋转时，它会和1.0之前的行为相同。由于1.0变形原点是动态的，这样可以在缩放对象时进行更精细的控制。

最后一对新属性是“originX”和“originY”。默认设置为“left”和“top”，它们允许以编程的方式更改变形的原点。当你拖动对象的角时，就是这些属性正在动态变化。

那么什么时候需要我们手动更改它们？举个例子，当我们处理文本对象时，当您动态的改变文本并且文本框尺寸变大，“originX”和“originY”指出了增长的位置。所以如果你需要文本对象居中时，你可以将originX设置为“center”。如果让文本移到右边，你需要将“originX”设置为“right”等等。这种行为类似于CSS中的“position：absolute”。

画布的背景和叠加

可以指定一个颜色来填充整个画布背景。只需将任意常规颜色值设置为canvas的“backgroundColor”属性。

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.backgroundColor = 'rgba(0,0,255,0.3)';
canvas.renderAll();

可以进一步去分配图像作为背景。您需要使用setBackgroundImage方法，传递url和一个可选的完成回调。

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));

还可以设置叠加图像，在这种情况下，它将始终显示在画布上呈现的任何对象之上。只需使用setOverlayImage，传递url和一个可选的完成回调。

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));