Konva JS-带有图像的工具提示

Question

是否可以将图像添加到Konva.tooltip()？

我目前正在尝试制作一个看起来像媒体对象like this的工具提示，但是文档只显示了正常的文本标签，除了：之外我不知道如何做：

1. 创建大型工具提示
2. 使用Konva.Image()添加图片
3. 在图像旁边添加描述性文字。

但是，我必须创建许多工具提示，并且自定义每个工具提示都是荒谬的。

谢谢！

Answer 1

欢迎。我点击了链接并阅读了这篇文章。从本质上讲，您要提出的问题是一个非常广泛的问题。从本质上讲，您已经意识到您可以“单独”创建工具提示，但是工具提示是一种重复的模式，因此最好有一种方法可以将该行为包装在隐藏所有细节的容器中，然后只需调用容器来创建另一个tootlip，另一个，另一个。您可以看到此方法标记有DRY，OO，设计模式，封装和组件的各种名称。我建议您对如何使用JavaScript构造现代的基于组件的UI进行一些研究。至少，如果您想进行DIY，则需要研究如何用JavaScript创建对象，但是当您遍历对您和当前项目适用的JS库时，您可能会发现。祝你好运。

Answer 2

Konva.Label不支持内部图像。仅文本和矩形（Konva.Tag）。

但是您可以只创建一个Konva.Group，然后将所需的所有内容（图像，文本，形状）添加到其中并手动设置样式。