乐趣区

关于前端:Fabricjs-元素选中状态的事件与样式

jiezi

本文简介

带尬猴！

你是否在应用 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 个元素：虚线和实现的长度相等。
  • 数组有 2 个元素：第一个元素是实线长度，第二个元素是虚线长度。
  • 数组有 3 个或 3 个以上的元素：实线、虚线、实线、虚线…… 始终轮回上来。

为了不便演示，我先将管制角的尺寸设置得大一点。

状况 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 里，背景色和填充色是两回事。

  • 填充色：fill
  • 背景色：backgroundColor
  • 选中后的背景色：selectionBackgroundColor

填充色是根底，忘了的话能够查看《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 个办法能够独自设置指定管制角的可见性：

  • setControlsVisibility(optionsopt)：批量设置管制角可见性
  • setControlVisible(controlKey, visible)：独自设置管制角可见性

这两个办法的作用是一样的，只是应用形式上有点不同。

须要留神的是，一旦把管制角暗藏起来，就意味着不能通过被暗藏的管制角去缩放和旋转元素了。

在使用者两个办法之前，你须要理解一堆属性：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')) // 返回 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 元素选中状态的事件与款式

举荐浏览

我最近在整顿 Fabric.js 罕用办法，有趣味的能够看看《Fabric.js 中文教程》

👍《Fabric.js 拖放元素进画布》

👍《Fabric.js 限度边框宽度缩放》

👍《Fabric.js 监听元素相交(重叠)》

👍《Fabric.js 橡皮擦的用法（蕴含复原性能）》

👍《Fabric.js 喷雾笔刷 从入门到放肆》

👍《Fabric.js 设置容器类名要留神这几点》

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

退出移动版