乐趣区

关于前端:Fabricjs-修改画布交互方式到底有什么用

本文简介

点赞 + 关注 + 珍藏 = 学会了

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 的区别

hasControlshasBorders 须要在图形元素上设置。

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>

从上图的成果能够看出,将 hasControlshasBorders 设置成 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 的话,是能够进行操作的。

总结

  1. interactive 设置为 false:可操作(挪动、旋转、缩放等),但看不见管制角和管制边。
  2. 将元素的 hasControlshasBorders 设置成 false:可挪动,但不能旋转和缩放,同时看不见管制角和管制边。
  3. 应用 StaticCanvas 创立画布:元素无奈被选中,也无奈挪动、选中、缩放等操作。

综上所述,在日常开发中,canvas.interactive 真的如同没啥用耶(我还没想到有什么利用场景)。

代码仓库

⭐Fabric.js 批改画布交互方式

举荐浏览

👍《Fabric.js 从入门到_ _ _ _》

👍《Fabric.js 上划线、中划线(删除线)、下划线》

👍《Fabric.js 激活输入框》

👍《Fabric.js 输入精简的 JSON》

👍《Fabric.js 动静设置字号大小》

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

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

退出移动版