在 KnovaJs 中，如何允许 Rect 随文本扩展或允许文本具有随文本扩展的边框，就像其在 Html 中的 Div答案

【问题标题】：In KnovaJs, How to allow Rect to expand with Text or Allow Text to Have Border That Expand With Text Like If its Div in Html在 KnovaJs 中，如何允许 Rect 随文本扩展或允许文本具有随文本扩展的边框，就像其在 Html 中的 Div
【发布时间】：2018-09-27 22:46:49
【问题描述】：

我很难看到一个易于应用的解决方案，因此 Rect 可以是 Text 的容器，就像 Html 中的 a 作为 a 的容器一样，因此如果 div 有边框，随着文本数量的增加，它会随着文本的增加而扩展。

我无法通过Rect 在Group 中使用Text 或在Label 上方应用Label 来做到这一点...

这甚至可行吗？如果没有，我可以以某种方式让 Rect 巧妙地检测同一 Group 中 Text 的大小，以便相应地扩展？

我通过konva-react使用Konva

【问题讨论】：

标签： javascript reactjs canvas html5-canvas konvajs

【解决方案1】：

Konva.Label 对于该用例非常有用。

      <Label>
        <Tag fill="red" />
        <Text text="hello" />
      </Label>

演示：https://codesandbox.io/s/84mzo6l5k0

如果您想使用Konva.Rect + Konva.Text，您必须手动计算文本的大小，然后将其应用于矩形实例。

【讨论】：

只是好奇，有没有一种简单的方法可以计算使用多种字体的句子的大小，即富文本句子？
我知道填充工作，但关键功能是 border 哪个标签不支持...这在我看来很奇怪哈哈@lavrton
@VanquiishedWombat 没有简单的方法。您必须手动计算每种字体，然后求和。
@Ezeewei 你应该使用stroke 属性。它工作正常。