关于前端:Fabricjs-自定义选框样式

本文简介

点赞 + 关注 + 珍藏 = 学会了

选框是 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》

点赞 + 关注 + 珍藏 = 学会了
代码仓库