我們在昨天知道 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 的物件屬性以及方法
  本日程式連結