共计 5488 个字符,预计需要花费 14 分钟才能阅读完成。
本文简介
带尬猴!
你是否在应用 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 设置容器类名要留神这几点》
点赞 + 关注 + 珍藏 = 学会了
代码仓库