在 Fabric JS 上应用帧图像 Canvas

Question

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

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

 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的边框没有选项canvas docs

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

第 1 部分：创建边界错觉

CSS 方法

第一个可以轻松地在 canvas 周围创建 CSS 边框。
最好的方法是在 canvas 周围创建 div，因为 fabricjs 将 canvas 一分为二，而运行.
您可以创建滑块来控制宽度，color/image 用于 div 的边框。
这看起来就像您的第二张自定义图片。

或

另一个Canvas方法

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

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

如果你使用了CSS方法

现在您得到了 canvas 的样子。您有 width 个边框，image/color 个边框。

步骤：

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

如果您使用了另一种 Canvas 方法

直接按照上面第2步

Export main canvas as image and put it over 2nd Canvas. And now you can export this as final image. For 2nd step check my answer on this

在 Fabric JS 上应用帧图像 Canvas

Apply frame image on top of Fabric JS Canvas

javascript

image

canvas

fabricjs