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

Question

可以给Konva.tooltip()添加图片吗？

我目前正在尝试制作一个看起来像媒体对象 like this 的工具提示，但文档仅显示普通文本标签，我不知道如何做到这一点，除了：

1. 创建一个大尺寸的工具提示
2. 添加带有Konva.Image() 的图像
3. 在图片旁边添加描述性文字。

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

提前致谢！

Answer 1

Konva.Label 不支持里面的图片。只有文本和矩形 (Konva.Tag)。

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

Answer 2

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