【发布时间】：2020-10-26 22:16:43
【问题描述】：
我创建了一个与办公室白板非常相似的 React 应用程序。我想生成每个白板的缩略图或卡片预览，并想知道如何去做。
我最初的想法是创建一个卡片组件并将形状渲染为与我为真正的白板所做的相同的方式。但是，每个形状的点都会在舞台之外，我想不出如何缩小它。
有什么想法吗？
【问题讨论】：
标签： react-konva
【发布时间】：2020-10-26 22:16:43
【问题描述】：
看看官方canvas thumbnail demo from Konva。
您可以对react-konva 使用类似的方法。
为预览创建一个特殊的组件。
我认为这种方法效果更好，并且可能性能更高（取决于您的应用）。您只需要创建另一个舞台并将所有对象绘制到其中。如果你能画出简化版的形状会更好，因为画的小很多，所以不是所有的细节都是可见的。
您必须计算自己的比例。
使用图片预览
无需为白板制作完整的组件树，您只需将主舞台导出为图像并显示即可。您必须不时进行再出口。
【讨论】：
-
嘿，谢谢伙计！你现在已经回答了我关于 react-konva 的一些问题 :) 我会看看这些选项。
-
我选择了第一个选项，效果很好。虽然我不确定如何绘制简化版本，但我无法区分应该绘制什么与不应该绘制什么。跳过点并采取每秒 x,y 对是否是一个想法？
-
这取决于您的应用。当我制作类似的东西时，我删除了预览中的所有文本、笔触和阴影。他们都看不见。删除它们也提高了性能。