Fabric.js 物件的继承关系以及物件控制

我们在昨天知道 Fabricjs 提供了很多 2D 的物件供我们使用

包含：

fabric.Line
fabric.Circle
fabric.Triangle
fabric.Ellipse
fabric.Rect
fabric.Polyline
fabric.Polygon
fabric.Group
fabric.Text
fabric.IText
fabric.Image
fabric.Path
发现它们的共通点

其实我们不难发现它们有很多共同都能使用的属性和方法，像是

属性

举几个常见例子

位置 top left
大小 width height
角度 angle
填满 fill
方法

也是很常用的 set

设置属性用的 set
选转物件 rotate
其实它们师出同门

以上这些 2D 物件其实都是继承 fabric.Object 这个物件，这些常用的属性和方法其实都是从 fabric.Object 继承下来的。并且也发展了自己的属性和方法。

我们可以 fabric.Object 当成是门派掌门人，而像是 fabric.Line、fabric.Rect 这些物件就是这个掌门人的弟子，他们深深地把所有武功密技记忆在脑海裡（物件属性），还有掌门人所教的功夫（物件方法），并且也发展出一套自己的武功祕技和方法（物件自己的属性和方法）。

透过 instanceof 来判断是否有继承关係

'rect is instanceof Rect? ' + (rect instanceof fabric.Rect ? 'yes' : 'no') // yes
'rect is instanceof Object? ' + (rect instanceof fabric.Object ? 'yes' : 'no') // yes
'rect is instanceof Circle? ' + (rect instanceof fabric.Circle ? 'yes' : 'no') // yes

这种让所有 2D 物件都去继承 fabric.Object 会带来给我们什麼便利性或好处呢？

设定所有物件的预设属性值

// 设定所有物件的边框
fabric.Object.prototype.set({
    strokeWidth: 5, 
    stroke: 'red'
})

或是用这种方式

fabric.Object.prototype.strokeWidth = 5
fabric.Object.prototype.stroke = 'red'

来设定所有 new 出来的物件的边框粗细

產生大家都能使用的方法

我们可以透过再 fabric.Object.prototype 中定义新的方法 (Method)， 让所有继承於 fabric.Object 所產生的物件都能够使用我们所定义的新方法。

举个例子:

如果我们今天有预设其他样式的边框

// 定义设定蓝色边框样式的方法
fabric.Object.prototype.setBlueBorder = function () {
  // 这边 this 為使用的物件本身
  this.stroke = 'blue'
  this.strokeWidth = 7
  this.strokeDashArray = [5, 5]
}
// 新增
const rect = new fabric.Rect({
  width: 100,
  height: 100
})
canvas.add(rect)
// 使用我们自订的方法
rect.setBlueBorder()

我们就会拿到一个虚线边框的正方形


纪录一些常用的属性和方法

属性

height|width
left|top
angle
fill 图形顏色
backgroundColor 这个是整个框框的背景顏色，不是建立出来的物件呦
stroke 图形边框顏色
strokeWidth 图形边框粗细
strokeDashArray 图形边框虚线
borderColor 这个是控制边框的顏色
hasControls 可设定物件不让使用者控制
hasRotatingPoint 是否显示旋转控制点
visible 是否被 rendered 在 canvas 上
opacity 透明度
方法

setCoords() 设定座标
这个常用在我们变更物件位置时，控制项并未跟著改变
animate() 做动画用
bringForward() 把物件上移一层 z-index
bringToFront() 把移到最上层 z-index
sendBackwards() 把物件后移一层 z-index
sendToBack() 把物件后移动到最底层 z-index
center() 把物件放到 canvas 正中心 (使用后须使用 setCoords() 将物件控制项一起移动到图形上)
setControlsVisibility() 传入一个物件，设定那些控制项要显示

setControlsVisibility({
    bl: true, // 左下
    br: true, // 右下
    mb: false, // 下中
    ml: true, // 中左
    mr: true, // 中右
    mt: true, // 上中
    tl: true, // 上左
    tr: false, // 上右
    mtr: true // 旋转控制键
})

到官方文件挖宝吧

fabric.Object 可使用的属性和方法真的非常非常非常的多，也能够很自由的添加自订方法，这边就部一一介绍完了，通常有些比较特殊的功能还是不能避免要去官方文件裡面 "挖宝"

fabricjs doc - Object http://fabricjs.com/docs/fabric.Object.html
本日小结

所有 2D 物件都是继承於 fabric.Object
透过 fabric.Object.prototype.set() 去设定所有物件的预设属性
自订物件方法只要新增方法在 fabric.Object.prototype 之下，就能让所有自己所 new 出来的物件使用
一些常用 fabricjs 的物件属性以及方法