如何让KonvaJs舞台的使用区域作为高度宽度属性传递到toImage函数中？

Question

我正在使用KonvaJs 3.2.4 (尽管我可能会升级)，并试图使用 "toImage "函数。toImage函数 的属性。看起来，默认情况下，toImage()只返回舞台可见区域的图像，因此配置属性传递起始坐标，以及图像中要返回的区域的高度宽度。

我的主要目标是返回一个舞台的图像，其中包括该图像中的每个子形状（我将其用作打印等的封面图像）。有没有一种方法可以让我轻松地得到正在使用的Stage的区域？我想象的是使用区域的外围。我目前把所有的形状都保存在一个视图层中，在运行这个toImage之前，我把所有的形状都解组了，所以在视图层下面没有嵌套的子代数组。

我试着在所有的子代中循环，并使用它们的xy属性来建立minX、maxX、minY、maxY，但当一个形状被旋转时，这就会遇到问题，因为xy坐标不能再保证代表形状的内外部边界。我确实允许用户使用标准的Transformer进行旋转。

如果有任何指导意见，我将非常感激

Answer 1

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

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

演示： https:/jsbin.combehoyoyeda1edit?html,js,output。