Konva JS - 带图像的工具提示

Question

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

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

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

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

提前致谢！

Answer 1

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

Answer 2

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

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