在 Fabric JS Canvas 上应用框架图像

Question

我正在使用 Fabric JS 让用户在我的 React 应用程序上获得交互式体验。是否可以在从图像中获取的 Fabric JS 周围应用框架？例如，如果画布是 400x400 像素，我可以将中间透明的框架图像调整为 410x410 像素，然后将其应用到画布顶部以供用户查看？我附上了两张图片供参考。

编辑：这是我用于放大的代码

 const zoomIn = useCallback(() => {
    // Get original height of canvas
    const canvasDimensions = getInitialCanvasSize()

    let zoom = HTML5Canvas.getZoom()
    zoom += 0.2
    if (zoom >= 2) zoom = 2
    HTML5Canvas.setZoom(zoom)

    HTML5Canvas.setWidth(canvasDimensions.width * HTML5Canvas.getZoom());
    HTML5Canvas.setHeight(canvasDimensions.height * HTML5Canvas.getZoom());

  }, [HTML5Canvas])

Answer 1

fabricjs canvas docs中没有画布边框选项

但您仍然可以使用以下步骤轻松实现此目的。

第 1 部分：创造边界的幻觉

CSS 方法

1. 第一个可以轻松地在画布周围创建 CSS 边框。
   最好的方法是在画布周围创建 div，因为 fabricjs 在运行时将画布一分为二。
2. 您可以创建滑块来控制 div 边框的宽度和颜色/图像。
   这看起来就像您的第二张自定义图片。

或

另一种画布方法

在当前画布后面放置第二个画布并控制其宽度和图像。
I don't recommend this one, as this will make it more complex to implement.

第 2 部分：让幻想成为现实

如果你使用 CSS 方法

现在你得到了你的画布的样子。你有width的边框，image/color的边框。

步骤：

1. 如果画布的宽度为400px，边框为5px，则创建410px 的新画布（我们称之为第二个画布）。
2. 将主画布导出为图像并将其放在第二个画布上。现在您可以将其导出为最终图像。 对于第二步，请检查我对此stack 的回答

如果您使用了另一种画布方法

直接按照上面的第二步

将主画布导出为图像并将其放在第二个画布上。现在您可以将其导出为最终图像。 对于第二步，请检查我对此stack的回答