通过拖动边缘调整画布元素的大小

Question

我正在努力使我网站的用户可以通过简单地拖动画布的侧面来调整画布的大小。我正在使用Fabric.js，它允许我从画布内调整元素的大小，但我需要调整实际画布本身的大小。我可以使用您推荐的任何新库。

This image 应该可以帮助你更多地了解我想要什么。

附带说明一下，Fabric.js 团队有一个交互式工具箱 here 供您在需要时进行试验。

Answer 1

1. 将您的 fabric.js 画布放在一个包装 div 中。
2. 使包装器可调整大小。这里我使用 CSS resize。它只添加了一个左下角作为调整大小控件，但对于演示来说已经足够了。要将所有边缘作为控件，您可以尝试this 之类的方法。
3. 检测包装器的大小变化。理想情况下，您会使用ResizeObserver 之类的东西。但是，由于在发布此内容时浏览器支持仍约为 80%，因此您可能会觉得需要使用 polyfill 或针对您的情况编写一些特定的内容。一个简单的带有大小检查的setInterval 可能就足够了。
4. 当包装器的大小发生变化时，通过setWidth() 和setHeight() 设置新的fabric.js 画布尺寸。

const canvas = new fabric.Canvas('c')

canvas.add(new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  left: 100,
  top: 50,
}))

const canvasWrapper = document.getElementById('wrapper')
// initial dimensions
canvasWrapper.style.width = '300px'
canvasWrapper.style.height = '150px'

let width
let height
setInterval(() => {
  const newWidth = canvasWrapper.clientWidth
  const newHeight = canvasWrapper.clientHeight
  if (newWidth !== width || newHeight !== height) {
    width = newWidth
    height = newHeight
    canvas.setWidth(newWidth)
    canvas.setHeight(newHeight)
  }
}, 100)

#wrapper {
    border: solid 1px black;
    resize: both;
    overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<div id="wrapper">
  <canvas id="c"></canvas>
</div>

Answer 2

这不是一件容易的事，但绝对有可能。首先，您可能想知道原生浏览器元素resize CSS 属性和ResizeObserver，但是目前对它们的支持很差。您最好的选择是：

1. 创建画布元素
2. 检测画布上的鼠标移动：
   • 如果鼠标移动发生在画布边缘，请将光标设置为正确方向的调整大小图标
   • 如果鼠标当前处于按下状态，请根据鼠标的位置调整画布大小。

请记住，每次调整画布大小时，画布上的当前图像都会被擦除。