Javascript

Fabric.js 修改画布交互方式到底有什么用?

本文主要是介绍Fabric.js 修改画布交互方式到底有什么用?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文简介

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


fabric.js 为我们提供了很多厉害的方法。今天要搞明白的一个东西是 canvas.interactive

官方文档对 canvas.interactive 的解释是:

Indicates that canvas is interactive. This property should not be changed.

canvas.interactive 默认值是 true ,官方建议我们不要修改该值,但我偏不。



动手试试

先来看看将 interactive 设为 false 之后有什么效果。

创建一个画布,并在上面添加一个矩形。

file

<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 就会取消元素被选中时的控制边。

file

<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 就行了。

file

<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 修改画布交互方式到底有什么用?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!