Fabric.js動(dòng)態(tài)調(diào)節(jié)元素選中狀態(tài)的事件與樣式
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
你是否在使用 Fabric.js 時(shí)希望能在選中元素后自定義元素樣式或選框（控制角和輔助線）的樣式？ 如果是的話，可以放心往下讀。 本文將手把腳和你一起過(guò)一遍 Fabric.js 在對(duì)象元素選中后常用的樣式設(shè)置。 我將對(duì)象元素選中后的設(shè)置分成3類進(jìn)行講解：
準(zhǔn)備工作創(chuàng)建一個(gè)畫(huà)布和一個(gè)圓形。為什么是圓形而不是矩形？等下你就知道了。 <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>復(fù)制代碼一個(gè)蛋黃出現(xiàn)了。上面這段代碼是 Fabric.js 的基礎(chǔ)。如果不太了解或者忘記語(yǔ)法了，可以查看 《Fabric.js 從入門(mén)到膨脹》。 我最近也在整理 Fabric.js 的常用方法，有興趣的可以看看 《Fabric.js中文教程》 約定本文所說(shuō)的控制角和輔助邊請(qǐng)看下圖。翻譯能力有限，將就理解下吧~ 控制角控制角就是選中元素后周邊出現(xiàn)的幾個(gè)方形。 實(shí)心控制角默認(rèn)情況下，控制角是空心的。也就是只有邊框，沒(méi)有填充色。 如果想要做成實(shí)心的控制角，只需將元素的 transparentCorners 屬性設(shè)置為 true 即可。 // 省略部分代碼let circle = new fabric.Circle({
transparentCorners: false, // 其他配置...})
復(fù)制代碼控制角顏色元素的 cornerColor 屬性可以控制控制角的顏色。 // 省略部分代碼let circle = new fabric.Circle({
transparentCorners: false,
cornerColor: 'pink', // 其他配置...})
復(fù)制代碼此時(shí)控制角的邊框顏色和填充顏色都變成了粉紅色。 控制角邊框顏色如果你想單獨(dú)設(shè)置控制角的邊框顏色也行！要設(shè)置的屬性叫 cornerStrokeColor。 // 省略部分代碼let circle = new fabric.Circle({
transparentCorners: false,
cornerColor: 'pink',
cornerStrokeColor: 'blue', // 其他配置...})
復(fù)制代碼控制角大小想修改控制角的大小，可以修改 cornerSize 的值。 // 省略部分代碼let circle = new fabric.Circle({
cornerSize: 30, // 其他配置...})
復(fù)制代碼和前面的例子對(duì)比，將 cornerSize 設(shè)置成 30 之后，控制角明顯大了很多。 控制角邊框虛線規(guī)則控制角那幾個(gè)小把手的邊框是可以設(shè)置成虛線的。要調(diào)整的參數(shù)是 cornerDashArray ，該參數(shù)的值是一個(gè)數(shù)值型數(shù)組。 虛線的規(guī)則主要分以下幾種情況：
為了方便演示，我先將控制角的尺寸設(shè)置得大一點(diǎn)。 情況1：數(shù)組只有1個(gè)元素// 省略部分代碼let circle = new fabric.Circle({
cornerSize: 30,
cornerDashArray: [4], // 其他配置...})
復(fù)制代碼情況2：數(shù)組有2個(gè)元素// 省略部分代碼let circle = new fabric.Circle({
cornerSize: 30,
cornerDashArray: [4, 10], // 其他配置...})
復(fù)制代碼情況3：數(shù)組有3個(gè)或3個(gè)以上的元素// 省略部分代碼let circle = new fabric.Circle({
cornerSize: 30,
cornerDashArray: [4, 10, 20],
// 其他配置...})復(fù)制代碼控制角形狀控制角除了是正方形外，還可以將它設(shè)置成圓形。只需將 cornerStyle 設(shè)置為 circle 即可。 // 省略部分代碼let circle = new fabric.Circle({
cornerStyle: 'circle', // 其他配置...})
復(fù)制代碼輔助邊前面說(shuō)完控制角，接下來(lái)講講輔助邊 輔助邊顏色我們可以通過(guò) selectionBackgroundColor 屬性設(shè)置輔助邊的顏色。 // 省略部分代碼let circle = new fabric.Circle({
borderColor: 'red', // 其他配置...})
復(fù)制代碼輔助邊粗細(xì)設(shè)置輔助邊粗細(xì)的屬性名叫 borderScaleFactor。 // 省略部分代碼let circle = new fabric.Circle({
borderScaleFactor: 4, // 其他配置...})
復(fù)制代碼輔助邊虛線規(guī)則設(shè)置輔助邊虛線規(guī)則使用的屬性是 borderDashArray。使用規(guī)則和 cornerDashArray 是一樣的。 // 省略部分代碼let circle = new fabric.Circle({
borderDashArray: [10, 20, 30], // 其他配置...})
復(fù)制代碼其他樣式內(nèi)邊距設(shè)置內(nèi)邊距的屬性是 padding，這名字和 css 的內(nèi)邊距是一樣的。 在 Fabric.js 中，給元素設(shè)置了內(nèi)邊距，會(huì)影響控制角和輔助邊到元素邊緣的距離。 padding 接受一個(gè)數(shù)值，不需要傳入單位。 // 省略部分代碼let circle = new fabric.Circle({
padding: 20, // 其他配置...})
復(fù)制代碼和前面的例子對(duì)比一下，將 padding 設(shè)置為 20 后，輔助邊和元素之間的距離明顯增大了。 背景色這里所說(shuō)的背景色和 css 里面的背景色不是同一回事。 本文要介紹 Fabric.js 的背景色有2種。一種是元素自身的背景色，另一種是選中后的背景色。 在 Fabric.js 里，背景色和填充色是兩回事。
填充色是基礎(chǔ)，忘了的話可以查看 《Fabric.js 從入門(mén)到膨脹》 ，本文不再講解。 Fabric.js 是以矩形的方式去計(jì)算元素占位面積的，這也很好理解，比較方便嘛。所以使用 backgroundColor 設(shè)置背景顏色就能看到元素占據(jù)多大面積了。 // 省略部分代碼let circle = new fabric.Circle({
fill: '#ffde7d',
backgroundColor: '#f6416c', // 其他配置...})
復(fù)制代碼而 selectionBackgroundColor 屬性是設(shè)置元素選中后的背景色。 但需要注意，如果你同時(shí)設(shè)置了 backgroundColor 和 selectionBackgroundColor，重疊的部分 backgroundColor 的優(yōu)先級(jí)更高。 那什么地方才是不重疊的地方呢？那就是設(shè)置了 padding 的地方。 // 省略部分代碼let circle = new fabric.Circle({
fill: '#ffde7d',
backgroundColor: '#f6416c',
padding: 20,
selectionBackgroundColor: '#00b8a9', // 其他配置...})
復(fù)制代碼移動(dòng)元素時(shí)的透明度元素移動(dòng)時(shí)會(huì)先進(jìn)入選中狀態(tài)。此時(shí)會(huì)產(chǎn)生控制角和輔助線。 你可以使用 borderOpacityWhenMoving 設(shè)置控制角和輔助線的透明度。這個(gè)屬性接受 0 ~ 1 的值。 0 表示完全透明，1 表示完全不透明。 注意，borderOpacityWhenMoving 設(shè)置的是『移動(dòng)時(shí)』控制角和輔助邊的透明度。 重點(diǎn)詞是 『移動(dòng)時(shí)』。 // 省略部分代碼let circle = new fabric.Circle({
borderOpacityWhenMoving: 0.1, // 其他配置...})
復(fù)制代碼本例將 borderOpacityWhenMoving 設(shè)置為 0.1 ，所以移動(dòng)時(shí)就只能隱隱約約看到控制角和輔助邊了。 狀態(tài)我把能否選中、局部控制操作等內(nèi)容放在“狀態(tài)”章節(jié)里。 禁止選中如果你不希望元素被選中，可以將元素的 selectable 屬性設(shè)置為 false。 // 省略部分代碼let circle = new fabric.Circle({
borderOpacityWhenMoving: 0.1, // 其他配置...})
復(fù)制代碼無(wú)法通過(guò)空白區(qū)域操作元素如果圖形不是矩形，在選中元素后，輔助邊和圖形之間會(huì)有一個(gè)空白區(qū)。也就是前面用 backgroundColor 填充的那部分。 箭頭所指的4個(gè)地方都是空白區(qū)域。 默認(rèn)情況下，你可以點(diǎn)擊空白區(qū)選中或者拖拽圖形。 但如果你希望只能點(diǎn)擊圖形區(qū)域才能選中圖形的話，可以將圖形的 perPixelTargetFind 屬性設(shè)置為 true。 // 省略部分代碼let circle = new fabric.Circle({
perPixelTargetFind: true, // 其他配置...})
復(fù)制代碼隱藏控制角可以通過(guò) hasControls 屬性設(shè)置控制角的顯示和隱藏。 如果將 hasControls 設(shè)置為 false ，就會(huì)將控制角隱藏起來(lái)，你也就無(wú)法通過(guò)控制角去縮放和旋轉(zhuǎn)元素了。 // 省略部分代碼let circle = new fabric.Circle({
hasControls: false, // 其他配置...})
復(fù)制代碼隱藏輔助邊同樣你也可以將輔助邊隱藏起來(lái)，只需將 hasBorders 屬性設(shè)置為 false 即可。 // 省略部分代碼let circle = new fabric.Circle({
hasBorders: false, // 其他配置...})
復(fù)制代碼設(shè)置控制角的可見(jiàn)性前面將 hasControls 屬性設(shè)置為 false 后就可以隱藏所有控制角。 其實(shí) Fabric.js 還提供了2個(gè)方法可以單獨(dú)設(shè)置指定控制角的可見(jiàn)性：
這兩個(gè)方法的作用是一樣的，只是使用方式上有點(diǎn)不同。 需要注意的是，一旦把控制角隱藏起來(lái)，就意味著不能通過(guò)被隱藏的控制角去縮放和旋轉(zhuǎn)元素了。 在使用者兩個(gè)方法之前，你需要了解一堆屬性：tl, tr, br, bl, ml, mt, mr, mb, mtr，它們分別對(duì)應(yīng)9個(gè)控制點(diǎn)，如下圖所示。 setControlsVisibility(optionsopt)setControlsVisibility() 方法接收一個(gè)對(duì)象參數(shù)，在這對(duì)象中可以描述要顯示或者隱藏哪些控制角。 比如我想把左上角和右下角隱藏。 // 省略部分代碼let circle = new fabric.Circle({ // 其他配置...})
circle.setControlsVisibility({
tl: false,
br: false})
復(fù)制代碼setControlVisible(controlKey, visible)setControlVisible() 方法一次只能設(shè)置1個(gè)控制角的可見(jiàn)性，它接收2個(gè)參數(shù)。第一個(gè)參數(shù)是要操作的控制角，第二個(gè)參數(shù)是控制角的顯示狀態(tài)。 比如我想將左下角的控制角隱藏起來(lái)。 // 省略部分代碼let circle = new fabric.Circle({ // 其他配置...})
circle.setControlsVisibility('bl', false)
復(fù)制代碼返回控制角的可見(jiàn)性可以使用 isControlVisible(controlKey) 方法獲取控制角當(dāng)前的可見(jiàn)性。 // 省略部分代碼let circle = new fabric.Circle({ // 其他配置...})
circle.setControlsVisibility('bl', false)console.log(circle.isControlVisible('bl')) // 返回 falseconsole.log(circle.isControlVisible('br')) // 返回 true復(fù)制代碼獲取當(dāng)前被選中的對(duì)象Fabric.js 還提供了2個(gè)方法可以捕捉到當(dāng)前被選中的對(duì)象。這2個(gè)方法分別叫 getActiveObject() 和 getActiveObjects() 。需要在 canvas 對(duì)象中調(diào)用的。 getActiveObject() 和 getActiveObjects() 從名字來(lái)看就已經(jīng)知道，末尾沒(méi)加 s 的就是返回當(dāng)前選中的元素；末尾加了 s 的就是返回當(dāng)前選中的所有元素（比如通過(guò)框選操作選擇了一堆元素）。 選中元素時(shí)，getActiveObject() 會(huì)返回的當(dāng)前元素對(duì)象，而 getActiveObjects() 則返回一個(gè)數(shù)組集合。 沒(méi)選中元素時(shí)，getActiveObject() 會(huì)返回 null，而 getActiveObjects() 會(huì)返回一個(gè)空數(shù)組。 可以通過(guò)這兩個(gè)方法獲取當(dāng)前選中的對(duì)象再做其他操作（比如修改填充顏色、描邊顏色、描邊粗細(xì)等）。 代碼倉(cāng)庫(kù)⭐ Fabric.js 元素選中狀態(tài)的事件與樣式 推薦閱讀我最近在整理 Fabric.js 常用方法，有興趣的可以看看 《Fabric.js中文教程》 《Fabric.js 拖放元素進(jìn)畫(huà)布》 《Fabric.js 限制邊框?qū)挾瓤s放》 《Fabric.js 監(jiān)聽(tīng)元素相交(重疊)》 《Fabric.js 橡皮擦的用法（包含恢復(fù)功能）》 《Fabric.js 噴霧筆刷 從入門(mén)到放肆》 《Fabric.js 設(shè)置容器類名要注意這幾點(diǎn)》 該文章在 2023/5/23 8:51:10 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
