如何使用Fabric.js进行图形绘制和编辑？

本文共计1173个文字，预计阅读时间需要5分钟。

目录- 本文字简- 动手试试- hasControls 与 hasBorders 的区别- StaticCanvas 的区别- 总结- 本文字简fabric.js 为我们提供了丰富的绘图方法。今天要搞明白的一个重点是 canvas.interactive。

动手试试首先，我们需要创建一个 fabric.js 的画布，并设置 canvas.interactive 属性。

javascriptvar canvas=new fabric.Canvas('c');canvas.interactive=true; // 默认为 true

hasControls 与 hasBorders 的区别- hasControls：控制点，用于缩放和旋转对象。- hasBorders：边界框，仅显示对象的矩形边界。

StaticCanvas 的区别StaticCanvas 是一个静态的画布，不支持交互操作，通常用于展示静态图像。

总结通过理解 canvas.interactive 属性，我们可以更好地控制 fabric.js 画布的交互性。

目录

• 本文简介
• 动手试试
• 和 hasControls 、hasBorders 的区别
• 和 StaticCanvas 的区别
• 总结

本文简介

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 修改画布交互的资料请关注易盾网络其它相关文章！