Javascript

Fabric.js 禁止元素超出画布

本文主要是介绍Fabric.js 禁止元素超出画布,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文简介

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


本文主要讲解如何禁止元素超出画布范围。效果如下图所示。

file

就算是修改了元素尺寸也一样可以限制元素超出画布。

file



分析

要实现上图的效果,需要考虑2中情况:

  1. 【情况1】元素的左边和上边不能超出画布的左边和上边。
  2. 【情况2】元素的右边和下边不能超出画布的右边和下边。

这两句话看上去很像一句话,但其实真实情况是有点不一样的。


元素的坐标和画布的坐标,都是以左上角为原点。所以【情况1】只需考虑元素的 xy坐标 有没有超过画布的左边和上边。


【情况2】是用元素右边和下边跟画布做比较,而元素的原点是在元素的左上角,所以元素的右边是 元素原点x坐标 + 元素的宽度 ,元素的下边是 元素原点y坐标 + 元素的高度


要获取画布的边界,我在文档中找到 calcViewportBoundaries 方法。

要获取被操作图形的边界,文档也给出了 getBoundingRect 方法。


最后得出的公式:

  • 【公式1】超出画布左边:图形左上方x坐标 < 画布左上方x坐标,将图形的 left 设置成画布左上方x坐标的值。
  • 【公式2】超出画布上边:图形左上方y坐标 < 画布左上方y坐标,将图形的 top 设置成画布左上方y坐标的值。
  • 【公式3】超出画布右边:图形左上方x坐标 + 图形宽度 > 画布右下方x坐标,将图形的 left 设置成画布右下方x坐标 - 图形宽度
  • 【公式4】超出画布下边:图形左上方y坐标 + 图形高度 > 画布右下方y坐标,将图形的 top 设置成画布右下方y坐标 - 图形高度


动手编码

公式有了,接下来就思考一下触发公式的时机。

我将这时机设置在元素的 mouseup 事件,也就是移动元素后松开鼠标的时刻


代码如下所示

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<script>
  // 初始化画布
  let canvas = new fabric.Canvas('canvasBox')

  // 矩形
  let rect = new fabric.Rect({
    width: 40,
    height: 40,
    left: 10,
    top: 10,
    fill: 'pink'
  })
  // 将矩形添加到画布中
  canvas.add(rect)

  // 作用在矩形的事件:松开鼠标
  rect.on('mouseup', ev => {
    // 获取画布视口边界
    let canvasBoundaries = canvas.calcViewportBoundaries()

    // 矩形本身
    let obj = ev.target

    // 矩形的边界
    let objBoundingRect = obj.getBoundingRect()

    // 【公式1】
    if (objBoundingRect.left < canvasBoundaries.tl.x) {
      ev.target.left = canvasBoundaries.tl.x
    }

    // 【公式2】
    if (objBoundingRect.left + objBoundingRect.width > canvasBoundaries.br.x) {
      ev.target.left = canvasBoundaries.br.x - objBoundingRect.width
    }

    // 【公式3】
    if (objBoundingRect.top < canvasBoundaries.tl.y) {
      ev.target.top = canvasBoundaries.tl.y
    }

    // 【公式4】
    if (objBoundingRect.top + objBoundingRect.height > canvasBoundaries.br.y) {
      ev.target.top = canvasBoundaries.br.y - objBoundingRect.height
    }

    // 刷新画布
    canvas.renderAll()
  })
</script>

在理解了原理之后,事情就变得非常简单了。


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

这篇关于Fabric.js 禁止元素超出画布的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!