--- theme: smartblue --- # 本文简介带尬猴！你是否在使用 `Fabric.js` 时希望能在选中元素后自定义元素样式或选框（控制角和辅助线）的样式？ ![01.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1c790ecd8ab47a999f67e491ac93d19~tplv-k3u1fbpfcp-watermark.image?) 如果是的话，可以放心往下读。本文将手把脚和你一起过一遍 `Fabric.js` 在对象元素选中后常用的样式设置。我将对象元素选中后的设置分成3类进行讲解： - 控制角 - 辅助边 - 其他样式 - 状态

# 准备工作创建一个画布和一个圆形。为什么是圆形而不是矩形？等下你就知道了。 ![02.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a085511b2074fe9ac2c7eee4d6197a0~tplv-k3u1fbpfcp-watermark.image?) ```html

``` 一个蛋黄出现了。上面这段代码是 `Fabric.js` 的基础。如果不太了解或者忘记语法了，可以查看 [《Fabric.js 从入门到膨胀》](https://juejin.cn/post/7026941253845516324)。我最近也在整理 `Fabric.js` 的常用方法，有兴趣的可以看看 [《Fabric.js中文教程》](https://k21vin.gitee.io/fabric-js-doc/)

# 约定本文所说的控制角和辅助边请看下图。翻译能力有限，将就理解下吧~ ![03.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab342bce456b4da48f76152e8c8f092f~tplv-k3u1fbpfcp-watermark.image?)

# 控制角控制角就是选中元素后周边出现的几个方形。
## 实心控制角默认情况下，控制角是空心的。也就是只有边框，没有填充色。如果想要做成实心的控制角，只需将元素的 `transparentCorners` 属性设置为 `true` 即可。 ![04.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd45b502ea4b4fc0b904e1ff899f95f4~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ transparentCorners: false, // 其他配置... }) ```
## 控制角颜色元素的 `cornerColor` 属性可以控制控制角的颜色。 ![05.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20d97a73d33049dc85ac0c47e801f18e~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ transparentCorners: false, cornerColor: 'pink', // 其他配置... }) ``` 此时控制角的边框颜色和填充颜色都变成了粉红色。
## 控制角边框颜色如果你想单独设置控制角的边框颜色也行！要设置的属性叫 `cornerStrokeColor`。 ![06.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b748536bec564682bac1acecd89dcc95~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ transparentCorners: false, cornerColor: 'pink', cornerStrokeColor: 'blue', // 其他配置... }) ```
## 控制角大小想修改控制角的大小，可以修改 `cornerSize` 的值。 ![07.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/842d4162f1994f9f828c8615e38d9cd8~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ cornerSize: 30, // 其他配置... }) ``` 和前面的例子对比，将 `cornerSize` 设置成 `30` 之后，控制角明显大了很多。
## 控制角边框虚线规则控制角那几个小把手的边框是可以设置成虚线的。要调整的参数是 `cornerDashArray` ，该参数的值是一个数值型数组。虚线的规则主要分以下几种情况： - 数组只有1个元素：虚线和实现的长度相等。 - 数组有2个元素：第一个元素是实线长度，第二个元素是虚线长度。 - 数组有3个或3个以上的元素：实线、虚线、实线、虚线…… 一直轮回下去。为了方便演示，我先将控制角的尺寸设置得大一点。 ### 情况1：数组只有1个元素 ![08.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c91e451d04c747e4b5eb8b73167cce8e~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ cornerSize: 30, cornerDashArray: [4], // 其他配置... }) ``` ### 情况2：数组有2个元素 ![09.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99e30a17ccd94d7fa44de39966e7bb78~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ cornerSize: 30, cornerDashArray: [4, 10], // 其他配置... }) ``` ### 情况3：数组有3个或3个以上的元素 ![10.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/752510a6c1ce4362bd1dadd047a6584a~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ cornerSize: 30, cornerDashArray: [4, 10, 20], // 其他配置... }) ```
## 控制角形状控制角除了是正方形外，还可以将它设置成圆形。只需将 `cornerStyle` 设置为 `circle` 即可。 ![11.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/877d54cafcd54fb3addc9618316ff59b~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ cornerStyle: 'circle', // 其他配置... }) ```

# 辅助边前面说完控制角，接下来讲讲辅助边
## 辅助边颜色我们可以通过 `selectionBackgroundColor` 属性设置辅助边的颜色。 ![12.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7144c61533a649c6b8297ff3af677675~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ borderColor: 'red', // 其他配置... }) ```
## 辅助边粗细设置辅助边粗细的属性名叫 `borderScaleFactor`。 ![13.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0a36344848344dea9f334f01b273a14~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ borderScaleFactor: 4, // 其他配置... }) ```
## 辅助边虚线规则设置辅助边虚线规则使用的属性是 `borderDashArray`。使用规则和 `cornerDashArray` 是一样的。 ![14.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53030f26296347c1b927d2853ccf7d94~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ borderDashArray: [10, 20, 30], // 其他配置... }) ```

# 其他样式 ## 内边距设置内边距的属性是 `padding`，这名字和 `css` 的内边距是一样的。在 `Fabric.js` 中，给元素设置了内边距，会影响控制角和辅助边到元素边缘的距离。 `padding` 接受一个数值，不需要传入单位。 ![15.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8e58955e8414a269686fd0bc0ac8e83~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ padding: 20, // 其他配置... }) ``` 和前面的例子对比一下，将 `padding` 设置为 `20` 后，辅助边和元素之间的距离明显增大了。
## 背景色这里所说的背景色和 `css` 里面的背景色不是同一回事。本文要介绍 `Fabric.js` 的背景色有2种。一种是元素自身的背景色，另一种是选中后的背景色。在 `Fabric.js` 里，背景色和填充色是两回事。 - 填充色：`fill` - 背景色：`backgroundColor` - 选中后的背景色：`selectionBackgroundColor` 填充色是基础，忘了的话可以查看 [《Fabric.js 从入门到膨胀》](https://juejin.cn/post/7026941253845516324) ，本文不再讲解。 `Fabric.js` 是以矩形的方式去计算元素占位面积的，这也很好理解，比较方便嘛。所以使用 `backgroundColor` 设置背景颜色就能看到元素占据多大面积了。 ![16.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b2746cf89fd48c88653974361d4c63d~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ fill: '#ffde7d', backgroundColor: '#f6416c', // 其他配置... }) ```
而 `selectionBackgroundColor` 属性是设置元素选中后的背景色。但需要注意，如果你同时设置了 `backgroundColor` 和 `selectionBackgroundColor`，重叠的部分 `backgroundColor` 的优先级更高。那什么地方才是不重叠的地方呢？那就是设置了 `padding` 的地方。 ![17.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19518ca35d754aea9e2b9a91dfcc4f08~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ fill: '#ffde7d', backgroundColor: '#f6416c', padding: 20, selectionBackgroundColor: '#00b8a9', // 其他配置... }) ```
## 移动元素时的透明度元素移动时会先进入选中状态。此时会产生控制角和辅助线。你可以使用 `borderOpacityWhenMoving` 设置控制角和辅助线的透明度。这个属性接受 `0 ~ 1` 的值。 `0` 表示完全透明，`1` 表示完全不透明。 **注意，borderOpacityWhenMoving 设置的是『移动时』控制角和辅助边的透明度。** 重点词是 **『移动时』**。 ![18.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e5df3b63f82475f824d0383bf49a979~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ borderOpacityWhenMoving: 0.1, // 其他配置... }) ``` 本例将 `borderOpacityWhenMoving` 设置为 `0.1` ，所以移动时就只能隐隐约约看到控制角和辅助边了。

# 状态我把能否选中、局部控制操作等内容放在“状态”章节里。
## 禁止选中如果你不希望元素被选中，可以将元素的 `selectable` 属性设置为 `false`。 ![19.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c52ded1e782a44d981b12ff72b572077~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ borderOpacityWhenMoving: 0.1, // 其他配置... }) ```
## 无法通过空白区域操作元素如果图形不是矩形，在选中元素后，辅助边和图形之间会有一个空白区。也就是前面用 `backgroundColor` 填充的那部分。 ![20.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbc9692df9cb49788f46b97d26fdd77e~tplv-k3u1fbpfcp-watermark.image?) 箭头所指的4个地方都是空白区域。默认情况下，你可以点击空白区选中或者拖拽图形。但如果你希望只能点击图形区域才能选中图形的话，可以将图形的 `perPixelTargetFind` 属性设置为 `true`。 ![21.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a574c79983b343f78cec9f6f1844f8e5~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ perPixelTargetFind: true, // 其他配置... }) ```
## 隐藏控制角可以通过 `hasControls` 属性设置控制角的显示和隐藏。如果将 `hasControls` 设置为 `false` ，就会将控制角隐藏起来，你也就无法通过控制角去缩放和旋转元素了。 ![22.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9981f3ee75974c969829d6de8cb94ba8~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ hasControls: false, // 其他配置... }) ```
## 隐藏辅助边同样你也可以将辅助边隐藏起来，只需将 `hasBorders` 属性设置为 `false` 即可。 ![23.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/676f597722424ccd856d8bde23b6246f~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 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个控制点，如下图所示。 ![24.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0943c8a775604f52b9531120c69c650a~tplv-k3u1fbpfcp-watermark.image?)
### setControlsVisibility(optionsopt) `setControlsVisibility()` 方法接收一个对象参数，在这对象中可以描述要显示或者隐藏哪些控制角。比如我想把左上角和右下角隐藏。 ![25.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62484bc893b84cfbb400b0e5817c71af~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ // 其他配置... }) circle.setControlsVisibility({ tl: false, br: false }) ```
### setControlVisible(controlKey, visible) `setControlVisible()` 方法一次只能设置1个控制角的可见性，它接收2个参数。第一个参数是要操作的控制角，第二个参数是控制角的显示状态。比如我想将左下角的控制角隐藏起来。 ![26.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d8c55c8513c47e2b1d0fa694b17839a~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 let circle = new fabric.Circle({ // 其他配置... }) circle.setControlsVisibility('bl', false) ```
## 返回控制角的可见性可以使用 `isControlVisible(controlKey)` 方法获取控制角当前的可见性。 ```js // 省略部分代码 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 元素选中状态的事件与样式](https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/Object/selection.html)

# 推荐阅读我最近在整理 `Fabric.js` 常用方法，有兴趣的可以看看 [《Fabric.js中文教程》](https://k21vin.gitee.io/fabric-js-doc/)
👍[《Fabric.js 拖放元素进画布》](https://juejin.cn/post/7186836299209244733) 👍[《Fabric.js 限制边框宽度缩放》](https://juejin.cn/post/7179894655524274234) 👍[《Fabric.js 监听元素相交(重叠)》](https://juejin.cn/post/7169855784249983013) 👍[《Fabric.js 橡皮擦的用法（包含恢复功能）》](https://juejin.cn/post/7097379869276766238) 👍[《Fabric.js 喷雾笔刷从入门到放肆》](https://juejin.cn/post/7146013798854295589) 👍[《Fabric.js 设置容器类名要注意这几点》](https://juejin.cn/post/7144178650290585637)
**点赞 + 关注 + 收藏 = 学会了**