本文简介
点赞 + 关注 + 珍藏 = 学会了
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 真的如同没啥用耶（我还没想到有什么利用场景）。
代码仓库
⭐Fabric.js 批改画布交互方式
举荐浏览
《Fabric.js 从入门到_ _ _ _》
《Fabric.js 上划线、中划线（删除线）、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输入精简的JSON》
《Fabric.js 动静设置字号大小》
《Fabric.js 橡皮擦的用法（蕴含复原性能）》
点赞 + 关注 + 珍藏 = 学会了
代码仓库