Fabric.js 禁止元素超出画布

<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>