本文简介
点赞 + 关注 + 收藏 = 学会了
fabric.js
为我们提供了很多厉害的方法。今天要搞明白的一个东西是 canvas.interactive
。
官方文档对 canvas.interactive
的解释是:
Indicates that canvas is interactive. This property should not be changed.
canvas.interactive
默认值是 true
,官方建议我们不要修改该值,但我偏不。
动手试试
先来看看将 interactive
设为 false
之后有什么效果。
创建一个画布,并在上面添加一个矩形。
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
interactive: false // 隐藏交互模式
})
let rect = new fabric.Rect({
top: 60,
left: 60,
width: 60,
height: 60,
fill: '#08d9d6'
})
canvas.add(rect)
</script>
从上面的效果可以看到,选中元素后并没有出现默认的控制点,但还是可以操作元素的缩放和旋转的(旋转的那个操作,我是猜了大概的操作点在那个位置)。
难怪官方劝大家不要修改 interactive
,确实有他的道理。
和 hasControls 、hasBorders 的区别
hasControls
和 hasBorders
需要在图形元素上设置。
将 hasControls
设置成 false
就会取消元素选中时的控制角。
将 hasBorders
设置成 false
就会取消元素被选中时的控制边。
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox')
let rect = new fabric.Rect({
top: 60,
left: 60,
width: 60,
height: 60,
fill: '#08d9d6',
hasControls: false, // 取消控制角
hasBorders: false // 取消控制边
})
canvas.add(rect)
</script>
从上图的效果可以看出,将 hasControls
和 hasBorders
设置成 false
后,元素可以移动,但不能缩放和旋转。
和 StaticCanvas 的区别
如果不希望画布可交互,可以使用 StaticCanvas
创建一个静态的画布。
只要将 new fabric.Canvas
改成 new fabric.StaticCanvas
就行了。
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let canvas = new fabric.StaticCanvas('canvasBox')
let rect = new fabric.Rect({
top: 60,
left: 60,
width: 60,
height: 60,
fill: '#08d9d6'
})
canvas.add(rect)
</script>
瞧,使用了 StaticCanvas
创建的画布,里面的元素选不中也拉不动。
而只是将 interactive
设置成 false
的话,是可以进行操作的。
总结
- 将
interactive
设置为false
:可操作(移动、旋转、缩放等),但看不见控制角和控制边。 - 将元素的
hasControls
和hasBorders
设置成false
:可移动,但不能旋转和缩放,同时看不见控制角和控制边。 - 使用
StaticCanvas
创建画布:元素无法被选中,也无法移动、选中、缩放等操作。
综上所述,在日常开发中,canvas.interactive
真的好像没啥用耶(我还没想到有什么应用场景)。
代码仓库
推荐阅读
点赞 + 关注 + 收藏 = 学会了 代码仓库