乐趣区

关于前端:Fabricjs-禁止元素超出画布

jiezi

本文简介

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

本文次要解说如何禁止元素超出画布范畴。成果如下图所示。

就算是批改了元素尺寸也一样能够限度元素超出画布。

剖析

要实现上图的成果，须要思考 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 从入门到_ _ _ _》

👍《Fabric.js 管制元素层级》

👍《Fabric.js 上划线、中划线（删除线）、下划线》

👍《Fabric.js 激活输入框》

👍《Fabric.js 自在绘制椭圆》

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

退出移动版