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

Question

我正在努力做到这一点，以便我网站的用户可以通过简单地拖动它的边来调整他们的 canvas 大小。我正在使用 Fabric.js，它允许我从 canvas 中调整元素的大小，但我需要调整实际 canvas 本身的大小。我可以使用您推荐的任何新库。

This image 应该可以帮助您更多地了解我想要的东西。

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

Answer 1

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

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

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

Answer 2

将您的 fabric.js canvas 放入包装器 div。
使包装可调整大小。这里我使用 CSS resize. It only adds a bottom-left corner as a resize control but it's good enough for the sake of the demo. To have all the edges as controls you can try something like this.
检测包装器的尺寸变化。理想情况下，您会使用类似 ResizeObserver 的内容。但是，由于在发布此文时浏览器支持率仍约为 80%，您可能会觉得需要使用 polyfill 或针对您的情况编写一些特定内容。带有大小检查的简单 setInterval 可能就足够了。
当包装器的尺寸发生变化时，通过 setWidth() 和 setHeight().

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>

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

Resizing a canvas element via dragging the edges

html

javascript

resize

canvas

fabricjs