在点和可拖动的 div 之间绘制插入符号

Question

我有一个可拖动的 div，它代表一个小信息弹出窗口，用户可以在屏幕上拖动它。但是这个 div 被锚定到屏幕上的一个点，我希望在 div 和它被锚定到的点之间画一个插入符号。

当您将鼠标悬停在您搜索过的商店或兴趣点上时，可以在 Google 地图上找到一个示例。您会看到在点和弹出窗口之间绘制了一个插入符号。这很简单，但是他们的弹出窗口是不可拖动的，而我的是。

那么实现这一点的最佳方法是什么？我正在考虑使用一系列插入符号图像，这些图像根据弹出窗口相对于锚点的方向调整大小。这会变得很棘手，因为我将不得不使用不同类型的插入符号，具体取决于弹出窗口相对于锚点的角度。有没有更好的方法来做到这一点？

谢谢！

Answer 1

所以您实际上是在尝试在屏幕上的两点之间绘制动态图像？我不确定这在 HTML 中有多实用。 dom 不支持图像旋转，并且图像大小的质量受到限制。您可以生成服务器大小的图像，但这会很慢并且会给您带来很高的服务器负载。

一些较新的浏览器（不是 IE）支持 Canvas 对象，如果您愿意排除 80% 的用户，则可以这样做。

最后，我不确定是否有比您已经在想的更好的解决方案 - 我不确定它的效果如何。

Answer 2

Drawing lines in JavaScript 上的本教程可能对您有所帮助，因为它向您展示了如何使用 JavaScript 进行相对高效的动态线条绘制（参见页面底部的示例）。

我还使用jsgraphics 库通过清除当前行并在用户每次移动行的端点时绘制一个新行来实现类似的效果。