从舞台为 react-konva 生成缩略图

Question

我创建了一个反应应用程序，它与办公室白板非常相似。我想生成每个白板的缩略图或卡片预览，想知道如何去做。

我最初的想法是只创建一个卡片组件并按照我为真正的白板所做的相同方式渲染形状。但是，每个形状的点都会在舞台之外，我想不出如何缩小它。

有什么想法吗？

Answer 1

看看官方canvas thumbnail demo from Konva.

您可以对 react-konva 使用类似的方法。

为预览创建一个特殊组件。

我认为这种方法会更好，而且性能可能更高（取决于您的应用）。您只需要创建另一个舞台并将所有对象绘制到其中。如果能画出简化版的形状就更好了，因为图小了很多，所以不是所有的细节都看得见。

您将必须计算自己的比例。

使用图片预览

无需为白板制作完整的组件树，您只需将主舞台导出为图像并显示即可。您必须不时进行再导出。