文本
如果你不仅仅要在画布上展示图形和矢量图形，还想试试文本怎么办？Fabric都为你准备好了！fabric.Text对象了解下。
我们在Fabric中提供文本抽象基于如下两个原因，首先是允许我们以面向对象的方式来处理文本，原生画布方法--像往常一样--只允许很底层的填充和画出文本，通过实例化fabric.Text实例，我们可以像操作其他Fabric对象那样操作文本--移动、缩放、改变属性等。其次，可以提供比画布给我们多得多的强大功能，附加功能包括：
- 多行支持 原生方法忽略了新行。
- 文本对齐 靠左、居中、靠右，在多行文本时非常有用。
- 文本背景 背景也可以对齐。
- 文本修饰 下划线、上划线、中划线。
- 行高 在多行文本时非常有用。
- 字间距 使文本更紧凑或间隔更大
- 子范围 对文本对象的子范围应用颜色和属性
- 多字节 支持表情符号
- 画布编辑 使用交互式类，可以直接在画布上键入文本
试试helloworld的例子？
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);
没错！在画布上显示文本就像添加fabric.Text实例到希望的位置一样简单，如你所见，这必须的第一个参数是真实文本字符串，第二个参数是通常的选项对象，它可以具有左、顶部、填充、不透明度等属性。
当然，文本对象也具有它们自己特有的，和文本相关的属性，我们看看都有哪一些：
字体系列
默认是 "Times New Roman"，这个属性允许你改变字体系列来渲染文本对象，更改它将立即使文本以新字体呈现。
var comicSansText = new fabric.Text("I'm in Comic Sans", {
fontFamily: 'Comic Sans'
});
字体大小
字体大小控制文本渲染的尺寸，不像Fabric中的其他对象，你不能直接修改文本的width/height属性，而是通过改变fontSize的值来间接的使文本对象更大或更小，不然，你就要一直使用scaleX/scaleY属性：
var text40 = new fabric.Text("I'm at fontSize 40", {
fontSize: 40
});
var text20 = new fabric.Text("I'm at fontSize 20", {
fontSize: 20
});
字体粗细
字体粗细可以是文本看起来更粗或更细，就像CSS一样，你可以使用关键字 ("normal", "bold") 或者数量(100, 200, 400, 600, 800)。请注意，你是否可以使用一定的权重取决于所选字体的权重是否可用，假如你在使用远程字体，你需要确保提供正常和粗体（以及任何其他所需的权重）字体定义：
var normalText = new fabric.Text("I'm a normal text", {
fontWeight: 'normal'
});
var boldText = new fabric.Text("I'm at bold text", {
fontWeight: 'bold'
});
文本修饰
文本修饰允许你对文本添加下划线、上划线、中划线，这个也类似与CSS，不过Fabric走的更远些，它允许组合上面几种操作，所以你可以让一个文本同时具有下划线和上划线或者下划线和中划线等等：
var underlineText = new fabric.Text("I'm an underlined text", {
underline; true
});
var strokeThroughText = new fabric.Text("I'm a stroke-through text", {
linethrough: true
});
var overlineText = new fabric.Text("I'm an overline text", {
overline: true
});
阴影(shadow)
这个属性在1.3.0版本前叫“textShadow”
文本阴影由4个部分组成：颜色、水平偏移、垂直偏移和模糊大小，如果你使用过CSS你会感到很熟悉，通过改变这些值可以得到很多组合：
var shadowText1 = new fabric.Text("I'm a text with shadow", {
shadow: 'rgba(0,0,0,0.3) 5px 5px 5px'
});
var shadowText2 = new fabric.Text("And another shadow", {
shadow: 'rgba(0,0,0,0.2) 0 0 5px'
});
var shadowText3 = new fabric.Text("Lorem ipsum dolor sit", {
shadow: 'green -5px -5px 3px'
});
字体风格
字体风格是下面两个值之一：normal和italic，这也类似与CSS中的同名属性：
var italicText = new fabric.Text("A very fancy italic text", {
fontStyle: 'italic',
fontFamily: 'Delicious'
});
var anotherItalicText = new fabric.Text("another italic text", {
fontStyle: 'italic',
fontFamily: 'Hoefler Text'
});
stroke and strokeWidth（描边和描边宽度）
通过组合描边和描边宽度，你可以在文本上获得一些有趣的效果。 下面是一组例子：
var textWithStroke = new fabric.Text("Text with a stroke", {
stroke: '#ff1318',
strokeWidth: 1
});
var loremIpsumDolor = new fabric.Text("Lorem ipsum dolor", {
fontFamily: 'Impact',
stroke: '#c3bfbf',
strokeWidth: 3
});
文本对齐
文本对齐在多行文本时非常有用，对于单行文本，边框的宽度总是与该行的宽度完全匹配，所以没啥好对齐的。
允许的值为 "left"、"center"和"right"。
var text = 'this is\na multiline\ntext\naligned right!';
var alignedRightText = new fabric.Text(text, {
textAlign: 'right'
});
行高
另外一个和CSS类似的是行高，它允许我们在多行文本中改变文本行之间的垂直间隔，在下面的例子中，第一个文本块的行高为3，第二个为1：
var lineHeight3 = new fabric.Text('Lorem ipsum ...', {
lineHeight: 3
});
var lineHeight1 = new fabric.Text('Lorem ipsum ...', {
lineHeight: 1
});
文本背景色
最后，文本背景色用来设置文本的背景，注意，背景只填充文本字符占用的空间，而不是整个边框。这意味着文本对齐改变了文本背景的呈现方式，行高也是如此，背景色不会覆盖被行高创建的行之间的空间。
var text = 'this is\na multiline\ntext\nwith\ncustom lineheight\n&background';
var textWithBackground = new fabric.Text(text, {
textBackgroundColor: 'rgb(0,200,0)'
});
事件
事件驱动架构是框架内一些惊人的功能和灵活性的基础，Fabric也不例外，它提供一个广泛的事件系统，从低级“鼠标”事件到高级对象事件。 这些事件使我们能够进入在画布上各种动作发生的不同时刻，想知道鼠标什么时候被按下？只需要观察"mouse:down"事件；想知道什么时候对象被添加到画布？"object:added"会告诉你；关于整个画布的重绘时间？使用"after:render"即可。
事件API非常简单，类似于 jQuery、Underscore.js或其他流行的JD类库，有一个on方法用来初始化事件监听，移除监听使用off。
让我们看一些真实的例子：
var canvas = new fabric.Canvas('...');
canvas.on('mouse:down', function(options) {
console.log(options.e.clientX, options.e.clientY);
});
我们添加画布的"mouse:down"事件监听，并且给它一个事件处理程序用来记录事件发生的原始坐标，换句话说，它将记录在画布上鼠标按下的确切位置。时间处理程序接收可选参数，该参数具有两个属性：e--原始事件 target--画布点击对象，如果有的话。事件始终存在，但是target只是在你真实点击了画布上的对象时才存在，target也只传递给有意义的事件的处理程序。举个例子，为"mouse:down" 事件处理，而不是"after:render" （那意味着整个画布被重绘）。
canvas.on('mouse:down', function(options) {
if (options.target) {
console.log('an object was clicked! ', options.target.type);
}
});
如果你点击了某个对象，上面的例子将记录"an object was clicked!" 它还将显示点击的对象的类型。
那么，还有那些事件在Fabric中是有效的呢？从鼠标角度来说有"mouse:down"、 "mouse:move"和"mouse:up"；总体来说，有"after:render"，然后是选择有关的事件："before:selection:cleared"、"selection:created"、"selection:cleared"，最后是关于对象的："object:modified"、"object:selected"、"object:moving"、"object:scaling"、"object:rotating"、"object:added"和"object:removed"。
注意，像"object:moving" (或 "object:scaling") 这种事件，在对象移动（或缩放）时被持续的触发，甚至每个像素都触发。另一方面，类似"object:modified" 或 "selection:created"的事件，只在动作结束时触发（对象修改或选中创建）
注意我们是如何附件事件到画布的 (canvas.on('mouse:down', ...))，你可以想象，这意味着所有的事件都是作用于画布实例范围的，如果你在一个网页上有多个画布实例，你需要为每一个附加事件监听，他们是互相独立的，并且只处理分配给他们的事件。
为了方便起见，画布的事件系统走的更远，允许你直接将侦听器连接到画布对象，让我们看一个例子：
var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {
console.log('selected a rectangle');
});
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
console.log('selected a circle');
});
我们将事件侦听器直接连接到矩形和圆实例，不是使用"object:selected"，我们使用"selected"事件，类似的，我们可以使用"modified"事件("object:modified"当附加到画布时)，"rotating"事件（"object:rotating"当附加到画布时）等等。
至此，入门和提高篇都翻译完了，水平所限，有不少翻译不合适的地方，见谅。
后面的高级篇如果有机会再说。
本文暂时没有评论，来添加一个吧(●'◡'●)