如何将 KonvaJs 舞台的使用区域作为高度/宽度属性传递给 toImage 函数？答案

【问题标题】：How do you get used area of a KonvaJs Stage to pass as height/width properties into the toImage function?如何将 KonvaJs 舞台的使用区域作为高度/宽度属性传递给 toImage 函数？
【发布时间】：2020-09-14 02:03:38
【问题描述】：

我正在使用 KonvaJs 3.2.4（尽管我可能可以升级）并且正在尝试使用 Stage Class 的 toImage function。看起来 toImage() 默认只返回舞台可见区域的图像，因此 config 属性要传入起始坐标，以及要在图像中返回的区域的高度/宽度。

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

我尝试遍历所有子对象并使用它们的 x/y 属性来建立 minX、maxX、minY、maxY，但是当形状旋转时会遇到问题，因为 x/y 坐标不再得到保证表示形状的内/外边界。我确实允许用户使用标准 Transformer 进行旋转。

任何指导将不胜感激！

【问题讨论】：

查看this question 的答案，它提供了一个代码示例来确定形状的边界框，包括旋转。它只使用矩形形状，但代码应该适用于所有形状。

标签： javascript vue.js canvas konvajs

【解决方案1】：

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

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

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

【讨论】：

这太棒了，正是我所需要的。非常感谢！