# 本文簡介 帶尬猴！ 你是否在使用 `Fabric.js` 時希望能在選中元素後自定義元素樣式或選框（控制角和輔助線）的樣式？ 
如果是的話，可以放心往下讀。
本文將手把腳和你一起過一遍 Fabric.js 在對象元素選中後常用的樣式設置。
我將對象元素選中後的設置分成3類進行講解：
- 控制角
- 輔助邊
- 其他樣式
- 狀態
準備工作
創建一個畫布和一個圓形。為什麼是圓形而不是矩形？等下你就知道了。
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = new fabric.Canvas('c', {
width: 400,
height: 400,
})
let circle = new fabric.Circle({
top: 80,
left: 80,
radius: 50,
fill: '#ffde7d' // 淡黃色
})
canvas.add(circle)
</script>
一個蛋黃出現了。上面這段代碼是 Fabric.js 的基礎。如果不太瞭解或者忘記語法了，可以查看 《Fabric.js 從入門到膨脹》。
我最近也在整理 Fabric.js 的常用方法，有興趣的可以看看 《Fabric.js中文教程》
約定
本文所說的控制角和輔助邊請看下圖。翻譯能力有限，將就理解下吧~
控制角
控制角就是選中元素後周邊出現的幾個方形。
實心控制角
預設情況下，控制角是空心的。也就是只有邊框，沒有填充色。
如果想要做成實心的控制角，只需將元素的 transparentCorners 屬性設置為 true 即可。
// 省略部分代碼
let circle = new fabric.Circle({
transparentCorners: false,
// 其他配置...
})
控制角顏色
元素的 cornerColor 屬性可以控制控制角的顏色。
// 省略部分代碼
let circle = new fabric.Circle({
transparentCorners: false,
cornerColor: 'pink',
// 其他配置...
})
此時控制角的邊框顏色和填充顏色都變成了粉紅色。
控制角邊框顏色
如果你想單獨設置控制角的邊框顏色也行！要設置的屬性叫 cornerStrokeColor。
// 省略部分代碼
let circle = new fabric.Circle({
transparentCorners: false,
cornerColor: 'pink',
cornerStrokeColor: 'blue',
// 其他配置...
})
控制角大小
想修改控制角的大小，可以修改 cornerSize 的值。
// 省略部分代碼
let circle = new fabric.Circle({
cornerSize: 30,
// 其他配置...
})
和前面的例子對比，將 cornerSize 設置成 30 之後，控制角明顯大了很多。
控制角邊框虛線規則
控制角那幾個小把手的邊框是可以設置成虛線的。要調整的參數是 cornerDashArray ，該參數的值是一個數值型數組。
虛線的規則主要分以下幾種情況：
- 數組只有1個元素：虛線和實現的長度相等。
- 數組有2個元素：第一個元素是實線長度，第二個元素是虛線長度。
- 數組有3個或3個以上的元素：實線、虛線、實線、虛線…… 一直輪迴下去。
為了方便演示，我先將控制角的尺寸設置得大一點。
情況1：數組只有1個元素
// 省略部分代碼
let circle = new fabric.Circle({
cornerSize: 30,
cornerDashArray: [4],
// 其他配置...
})
情況2：數組有2個元素
// 省略部分代碼
let circle = new fabric.Circle({
cornerSize: 30,
cornerDashArray: [4, 10],
// 其他配置...
})
情況3：數組有3個或3個以上的元素
// 省略部分代碼
let circle = new fabric.Circle({
cornerSize: 30,
cornerDashArray: [4, 10, 20],
// 其他配置...
})
控制角形狀
控制角除了是正方形外，還可以將它設置成圓形。只需將 cornerStyle 設置為 circle 即可。
// 省略部分代碼
let circle = new fabric.Circle({
cornerStyle: 'circle',
// 其他配置...
})
輔助邊
前面說完控制角，接下來講講輔助邊
輔助邊顏色
我們可以通過 selectionBackgroundColor 屬性設置輔助邊的顏色。
// 省略部分代碼
let circle = new fabric.Circle({
borderColor: 'red',
// 其他配置...
})
輔助邊粗細
設置輔助邊粗細的屬性名叫 borderScaleFactor。
// 省略部分代碼
let circle = new fabric.Circle({
borderScaleFactor: 4,
// 其他配置...
})
輔助邊虛線規則
設置輔助邊虛線規則使用的屬性是 borderDashArray。使用規則和 cornerDashArray 是一樣的。
// 省略部分代碼
let circle = new fabric.Circle({
borderDashArray: [10, 20, 30],
// 其他配置...
})
其他樣式
內邊距
設置內邊距的屬性是 padding，這名字和 css 的內邊距是一樣的。
在 Fabric.js 中，給元素設置了內邊距，會影響控制角和輔助邊到元素邊緣的距離。
padding 接受一個數值，不需要傳入單位。
// 省略部分代碼
let circle = new fabric.Circle({
padding: 20,
// 其他配置...
})
和前面的例子對比一下，將 padding 設置為 20 後，輔助邊和元素之間的距離明顯增大了。
背景色
這裡所說的背景色和 css 裡面的背景色不是同一回事。
本文要介紹 Fabric.js 的背景色有2種。一種是元素自身的背景色，另一種是選中後的背景色。
在 Fabric.js 里，背景色和填充色是兩回事。
- 填充色：
fill - 背景色：
backgroundColor - 選中後的背景色：
selectionBackgroundColor
填充色是基礎，忘了的話可以查看 《Fabric.js 從入門到膨脹》 ，本文不再講解。
Fabric.js 是以矩形的方式去計算元素占位面積的，這也很好理解，比較方便嘛。所以使用 backgroundColor 設置背景顏色就能看到元素占據多大面積了。
// 省略部分代碼
let circle = new fabric.Circle({
fill: '#ffde7d',
backgroundColor: '#f6416c',
// 其他配置...
})
而 selectionBackgroundColor 屬性是設置元素選中後的背景色。
但需要註意，如果你同時設置了 backgroundColor 和 selectionBackgroundColor，重疊的部分 backgroundColor 的優先順序更高。
那什麼地方纔是不重疊的地方呢？那就是設置了 padding 的地方。
// 省略部分代碼
let circle = new fabric.Circle({
fill: '#ffde7d',
backgroundColor: '#f6416c',
padding: 20,
selectionBackgroundColor: '#00b8a9',
// 其他配置...
})
移動元素時的透明度
元素移動時會先進入選中狀態。此時會產生控制角和輔助線。
你可以使用 borderOpacityWhenMoving 設置控制角和輔助線的透明度。這個屬性接受 0 ~ 1 的值。
0 表示完全透明，1 表示完全不透明。
註意，borderOpacityWhenMoving 設置的是『移動時』控制角和輔助邊的透明度。 重點詞是 『移動時』。
// 省略部分代碼
let circle = new fabric.Circle({
borderOpacityWhenMoving: 0.1,
// 其他配置...
})
本例將 borderOpacityWhenMoving 設置為 0.1 ，所以移動時就只能隱隱約約看到控制角和輔助邊了。
狀態
我把能否選中、局部控制操作等內容放在“狀態”章節里。
禁止選中
如果你不希望元素被選中，可以將元素的 selectable 屬性設置為 false。
// 省略部分代碼
let circle = new fabric.Circle({
borderOpacityWhenMoving: 0.1,
// 其他配置...
})
無法通過空白區域操作元素
如果圖形不是矩形，在選中元素後，輔助邊和圖形之間會有一個空白區。也就是前面用 backgroundColor 填充的那部分。
箭頭所指的4個地方都是空白區域。
預設情況下，你可以點擊空白區選中或者拖拽圖形。
但如果你希望只能點擊圖形區域才能選中圖形的話，可以將圖形的 perPixelTargetFind 屬性設置為 true。
// 省略部分代碼
let circle = new fabric.Circle({
perPixelTargetFind: true,
// 其他配置...
})
隱藏控制角
可以通過 hasControls 屬性設置控制角的顯示和隱藏。
如果將 hasControls 設置為 false ，就會將控制角隱藏起來，你也就無法通過控制角去縮放和旋轉元素了。
// 省略部分代碼
let circle = new fabric.Circle({
hasControls: false,
// 其他配置...
})
隱藏輔助邊
同樣你也可以將輔助邊隱藏起來，只需將 hasBorders 屬性設置為 false 即可。
// 省略部分代碼
let circle = new fabric.Circle({
hasBorders: false,
// 其他配置...
})
設置控制角的可見性
前面將 hasControls 屬性設置為 false 後就可以隱藏所有控制角。
其實 Fabric.js 還提供了2個方法可以單獨設置指定控制角的可見性：
setControlsVisibility(optionsopt)：批量設置控制角可見性setControlVisible(controlKey, visible)：單獨設置控制角可見性
這兩個方法的作用是一樣的，只是使用方式上有點不同。
需要註意的是，一旦把控制角隱藏起來，就意味著不能通過被隱藏的控制角去縮放和旋轉元素了。
在使用者兩個方法之前，你需要瞭解一堆屬性：tl, tr, br, bl, ml, mt, mr, mb, mtr，它們分別對應9個控制點，如下圖所示。
setControlsVisibility(optionsopt)
setControlsVisibility() 方法接收一個對象參數，在這對象中可以描述要顯示或者隱藏哪些控制角。
比如我想把左上角和右下角隱藏。
// 省略部分代碼
let circle = new fabric.Circle({
// 其他配置...
})
circle.setControlsVisibility({
tl: false,
br: false
})
setControlVisible(controlKey, visible)
setControlVisible() 方法一次只能設置1個控制角的可見性，它接收2個參數。第一個參數是要操作的控制角，第二個參數是控制角的顯示狀態。
比如我想將左下角的控制角隱藏起來。
// 省略部分代碼
let circle = new fabric.Circle({
// 其他配置...
})
circle.setControlsVisibility('bl', false)
返回控制角的可見性
可以使用 isControlVisible(controlKey) 方法獲取控制角當前的可見性。
// 省略部分代碼
let circle = new fabric.Circle({
// 其他配置...
})
circle.setControlsVisibility('bl', false)
console.log(circle.isControlVisible('bl')) // 返回 false
console.log(circle.isControlVisible('br')) // 返回 true
獲取當前被選中的對象
Fabric.js 還提供了2個方法可以捕捉到當前被選中的對象。這2個方法分別叫 getActiveObject() 和 getActiveObjects() 。需要在 canvas 對象中調用的。
getActiveObject() 和 getActiveObjects() 從名字來看就已經知道，末尾沒加 s 的就是返回當前選中的元素；末尾加了 s 的就是返回當前選中的所有元素（比如通過框選操作選擇了一堆元素）。
選中元素時，getActiveObject() 會返回的當前元素對象，而 getActiveObjects() 則返回一個數組集合。
沒選中元素時，getActiveObject() 會返回 null，而 getActiveObjects() 會返回一個空數組。
可以通過這兩個方法獲取當前選中的對象再做其他操作（比如修改填充顏色、描邊顏色、描邊粗細等）。
代碼倉庫
推薦閱讀
我最近在整理 Fabric.js 常用方法，有興趣的可以看看 《Fabric.js中文教程》
