本文简介
点赞 + 关注 + 珍藏 = 学会了
选框是 fabric.js 默认提供的一种操作，fabric.js 提供了几个属性能够设置选框款式。
fabric.js 默认的选框款式如下图所示。
本文次要介绍一下 fabric.js 提供的这几个 api （全是以 selection 结尾的）。
禁用选框
fabric.js 默认是能够进行框选操作的，如果须要禁用选框，能够将 selection 设置为 false 。
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { selection: false // 设置成false，画布不能框选操作 }) // 也能够这样设置 // canvas.selection = false</script>从上图能够看出，我做框选操作时，基本没有选框。
这种状况下，如果画布上存在其余元素也是无奈框选中的。
选框边框色彩
选框分为“边框色彩”和“填充色彩”。
fabric.js 选框的默认色彩是 rgba(255, 255, 255, 0.3) ，是有肯定透明度的。
如果要批改选框的边框色彩，能够设置 selectionBorderColor 属性。
selectionBorderColor 接管的色彩值和 css 的差不多，能够间接传关键字（比方red、pink等），也能够传十六进制色彩值、rgb、rgba等等。
// 省略局部代码let canvas = new fabric.Canvas('canvasBox', { selectionBorderColor: 'red'})此时选框的边框色彩就变成红色了。
边框粗细
如果想加粗边框，能够将 selectionLineWidth 的值设置得大一些。
// 省略局部代码let canvas = new fabric.Canvas('canvasBox', { selectionBorderColor: 'red', // 设置边框色彩 selectionLineWidth: 10 // 加粗了边框})为了不便演示，我将边框色彩设置成红色。
将 selectionLineWidth 设置成 10 之后，边框就比默认的粗了很多。
虚线选框
如需将边框设置成虚线，能够批改 selectionDashArray 属性。
selectionDashArray 属性接管一个数组。
为了不便色彩，我将边框设置成红色，并且加粗了边框。
let canvas = new fabric.Canvas('canvasBox', { selectionBorderColor: 'red', selectionLineWidth: 10, selectionDashArray: [10]})如果直传1个值，比方下面只传了 [10] ，那么边框的规定就是 实线10, 虚线10, 实线10, 虚线10 ......
如果传了2个值：
// 省略局部代码let canvas = new fabric.Canvas('canvasBox', { selectionBorderColor: 'red', selectionLineWidth: 10, selectionDashArray: [10, 20]})将 selectionDashArray 设置成 [10, 20] ，此时的规定就是 实线10, 虚线20, 实线10, 虚线20 ......
如果传了3个以上的值：
// 省略局部代码let canvas = new fabric.Canvas('canvasBox', { selectionBorderColor: 'red', selectionLineWidth: 10, selectionDashArray: [10, 20, 30]})将 selectionDashArray 设置成 [10, 20, 30] ，此时的规定就是 实线10, 虚线20, 实线30, 虚线10, 实线20, 虚线30 ...... 以此类推。
选框色彩
fabric.js 选框的默认色彩是 rgba(100, 100, 255, 0.3)，是一个有透明度的蓝紫色。
如需批改选框色彩，能够设置 selectionColor 。
selectionColor 接管的值和 selectionBorderColor 一样。
// 省略局部代码let canvas = new fabric.Canvas('canvasBox', { selectionColor: 'pink'})上图所示，我将 selectionColor 设置成我最喜爱的粉红色
精准选框
fabric.js 的图形是有一个“隐形的选区”，如果图形不是矩形，默认是能够选中“隐形选区”的。
我用图片解释一下。
下图是默认状况，我没真正选中三角形，但只有选区呈现在三角形的范畴内就能选中它。
如果须要设置成精准抉择（真正选中图形才算选中），能够将 selectionFullyContained 设置成 true 。
// 省略局部代码let canvas = new fabric.Canvas('canvasBox', { selectionFullyContained: true // 精准抉择})// 三角形const triangle = new fabric.Triangle({ top: 100, left: 50, width: 80, // 底边宽度 height: 100, // 底边到定点的间隔 fill: 'blue',})canvas.add(triangle)从上图能够看出，要齐全框选图形能力做到真正选中。
多选组合键
如果在点选操作时心愿能够多选，fabric.js 默认是按住 shift 键就反对多选性能。
如果须要更改其余按键，能够设置 selectionKey 属性。
selectionKey 属性反对 'altKey'、'shiftKey'、'ctrlKey' 和 null
altKey代表alt键；shiftKey代表shift键；ctrlKey代表ctrl键；null代表不反对通过点击的形式多选；
// 省略局部代码let canvas = new fabric.Canvas('canvasBox', { selectionKey: null})代码仓库
⭐selection
⭐selectionBorderColor
⭐selectionColor
⭐selectionDashArray
⭐selectionFullyContained
⭐selectionKey
⭐selectionLineWidth
举荐浏览
《Fabric.js 从入门到_ _ _ _》
《Fabric.js 管制元素层级》
《Fabric.js 上划线、中划线（删除线）、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输入精简的JSON》
点赞 + 关注 + 珍藏 = 学会了
代码仓库