如何将 KonvaJs 舞台的已用区域作为 height/width 属性传递给 toImage 函数？

Question

我正在使用 KonvaJs 3.2.4（虽然我可能可以升级）并且正在尝试使用 Stage Class 的 toImage function。它看起来好像默认情况下 toImage() 只有 return 舞台可见区域的图像，因此配置属性传递起始坐标，height/width 区域到图像中的return。

我的主要目标是 return 包含该图像中每个子形状的舞台图像（我将其用作封面图像以进行打印等）。有没有办法可以轻松获得正在使用的舞台区域？我在想象使用区域的边界。我目前将所有形状都保存在一个视图层中，在我运行这个 toImage 之前，我取消了所有形状的组合，因此在视图层下面没有嵌套的子数组。

我试图遍历所有子项并使用它们的 x/y 属性来建立 minX、maxX、minY、maxY，但是当形状旋转时这运行s 变成了问题x/y 坐标不能再保证表示形状的 inner/outer 边界。我确实允许用户使用标准 Transformer 进行旋转。

任何指导将不胜感激！

Answer 1

您可以使用 node.getClientRect() 来计算任何 Konva 节点的总大小。如果您需要导出舞台的完整图像，您可以使用：

stage.toImage({
  ...stage.getClientRect(),
  callback: img => {
    console.log(img);
  }
})

演示：https://jsbin.com/behoyoyeda/1/edit?html,js,output

如何将 KonvaJs 舞台的已用区域作为 height/width 属性传递给 toImage 函数？

How do you get used area of a KonvaJs Stage to pass as height/width properties into the toImage function?

javascript

vue.js

canvas

konvajs