开源Html5画布操作类库Fabric.js基础入门——第一部分（中）

接上文开源Html5画布操作类库Fabric.js基础入门——第一部分（上）

对象

我们已经看到如何通过实例化fabric.Rect的构造函数操作矩形，当然Fabric也提供了其它基础图形--原型、三角形、椭圆等等。它们都暴露在fabric命名空间下，比如fabric.Circle, fabric.Triangle, fabric.Ellipse等。

Fabric提供的7个基础图形如下：

1. fabric.Circle
2. fabric.Ellipse
3. fabric.Line
4. fabric.Polygon
5. fabric.Polyline
6. fabric.Rect
7. fabric.Triangle

想画个圈圈？只要创建原型对象，并把它加入到画布中即可，其它图形也是类似的：

var circle = new fabric.Circle({

radius: 20, fill: 'green', left: 100, top: 100

});

var triangle = new fabric.Triangle({

width: 20, height: 30, fill: 'blue', left: 50, top: 50

});

canvas.add(circle, triangle);

这样，我们就在100，100位置有了一个绿色的圆形，在50，50位置有了一个蓝色三角形。

操作对象

创建图形对象--矩形、圆形还有其他图形，只是开始。在某种情况下，我们也许想修改这些对象，某些特定动作可能会触发状态的变化或者按照特定顺序播放动画，在特定鼠标操作下，有可能我们需要改变对象属性（颜色、透明度、大小、位置等）。

Fabric负责画布渲染和状态管理，我们只需要修改对象本身。

早先的例子演示了set方法，以及如何调用set({ left: 20, top: 50 })从上一个位置移动对象。同样的方式，我们可以改变对象的任何属性，那么有哪些属性呢？

嗯，正如你猜想的，他们是和位置有关的属性--left，top；维度--width，height；渲染 — fill, opacity, stroke, strokeWidth; 缩放和旋转 — scaleX, scaleY, angle; 和翻转有关的— flipX, flipY 还有倾斜skewX, skewY

是的，在Fabric里创建一个翻转对象只需要简单的设置一下flip*属性为true即可。

你可以通过get方法获取任意一个属性，也可以通过set设置它们。让我们试试改变一些红色矩形的属性：

var canvas = new fabric.Canvas('c');

...

canvas.add(rect);

rect.set('fill', 'red');

rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });

rect.set('angle', 15).set('flipY', true);

首先，我们设置“fill”（填充）属性为“red”，创建一个红色对象。然后设置 “strokeWidth”（笔宽）和“stroke”（笔触）的值，我们给矩形一个5像素的绿色描边，最后改变角度和y轴翻转。注意这三种操作在语法方面的细微差别。

这些演示表名了set是一个通用方法，你会经常使用它们，因此意味着尽可能的方便。

我们已经研究了属性值设置方法，那么如何获取属性值呢？很显然，有通用的一系列get*方法。要读取对象的“width”属性值，你应该使用get('width') 或getWidth()。要获取“scaleX”值--get('scaleX') 或者getScaleX()，诸如此类。对公开的对象，有一个类似getWidth或 getScaleX的对象属性（“stroke”, “strokeWidth”, “angle”等）获取方法。

你可能注意到早先的例子，被创建出来的对象与通过set方法设置的，产生的配置哈希是一样的，这是因为它们完全一样。你可以在创建时候配置它们，也可以在创建后使用set方法设置：

var rect = new fabric.Rect({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });

// or functionally identical

var rect = new fabric.Rect();

rect.set({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });

缺省选项

在这一点你可能会问--当我们没有使用配置创建了对象时发生了什么，它们仍然具有这些属性吗？

当然是的，在Fabric里，对象总是具有缺省属性值。当在创建过程中省略时，它是对象的“给定”默认属性值。 我们可以试试看：

var rect = new fabric.Rect(); // notice no options passed in

rect.get('width'); // 0

rect.get('height'); // 0

rect.get('left'); // 0

rect.get('top'); // 0

rect.get('fill'); // rgb(0,0,0)

rect.get('stroke'); // null

rect.get('opacity'); // 1

我们的矩形获得了缺省的属性值。它的位置在0，0，黑色，完全不透明，没有描边并且没有维度（宽和高都是0）。因为没有维度，我们在画布上看不到它。但是只要给它的宽/高设置任何正值，就会在画布的左上角上显示一个黑色矩形。

层级和继承

Fabric对象并不是互相独立的，它们构成了一个精确的层次关系。

大部分对象继承自根对象fabric.Object，fabric.Object代表一个在二维画布平面上的二维图形。它是一个具有 left/top和 width/height属性的实体，还具有一系列其他图形特征。我们在对象上看到的这些属性--fill, stroke, angle, opacity, flip*, 等等，是Fabric对象从fabric.Object对象继承过来的通用属性。

这种继承允许我们在fabric.Object上定义方法，并且共享给所有“子类”。比如，如果你想要所有的对象具有getAngleInRadians方法，你可以简单的在fabric.Object.prototype上创建它：

fabric.Object.prototype.getAngleInRadians = function() {

return this.get('angle') / 180 * Math.PI;

};

var rect = new fabric.Rect({ angle: 45 });

rect.getAngleInRadians(); // 0.785...

var circle = new fabric.Circle({ angle: 30, radius: 10 });

circle.getAngleInRadians(); // 0.523...

circle instanceof fabric.Circle; // true

circle instanceof fabric.Object; // true

如你所见，方法立刻对所有实例生效。

当“子类”从fabric.Object继承时，经常需要定义它们自己的方法和属性。比如，fabric.Circle需要 “radius”（半径）属性；fabric.Image--我们一会将会研究它--需要getElement/setElement方法用来存取图像实例来源的 元素。

对于高级项目，通过属性来进行自定义渲染和行为的情况很普遍。

（未完待续）