Fabric.js動態調節元素選中狀態的事件與樣式
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
你是否在使用 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：數組只有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 里，背景色和填充色是兩回事。
填充色是基礎，忘了的話可以查看 《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個方法可以單獨設置指定控制角的可見性：
這兩個方法的作用是一樣的，只是使用方式上有點不同。 需要注意的是，一旦把控制角隱藏起來，就意味著不能通過被隱藏的控制角去縮放和旋轉元素了。 在使用者兩個方法之前，你需要了解一堆屬性：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')) // 返回 falseconsole.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 常用方法，有興趣的可以看看 《Fabric.js中文教程》 《Fabric.js 拖放元素進畫布》 《Fabric.js 限制邊框寬度縮放》 《Fabric.js 監聽元素相交(重疊)》 《Fabric.js 橡皮擦的用法（包含恢復功能）》 《Fabric.js 噴霧筆刷 從入門到放肆》 《Fabric.js 設置容器類名要注意這幾點》 該文章在 2023/5/23 8:51:10 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
