在點和可拖動div之間繪製插入符號

Question

我有一個可拖動的div，表示用戶可以在屏幕上拖動的小信息彈出窗口。但是這個div被錨定在屏幕上的一個點上，我希望在div和它所錨定的點之間有一個插入符號。

當您將鼠標懸停在您搜索的商店或興趣點上時，可以在Google地圖上找到此示例。你會在點和彈出窗口之間看到一個插入符號。這很簡單，但我的彈出不可拖動。

那麼實現這個最好的方法是什麼？我正在考慮使用一系列根據彈出窗口相對於定位點的方向調整大小的脫字符圖片。它會變得棘手，因爲根據彈出窗口相對於錨點放置的角度，我必須使用不同類型的插入符號。有一個更好的方法嗎？

謝謝！

Answer 1

所以你基本上試圖在屏幕上的兩點之間畫一個動態圖像？我不確定這在HTML中有多實用。該dom不支持圖像旋轉和圖像大小限制的質量。你可以做服務器大小的圖像生成，但這會很慢，並給你高服務器負載。

一些較新的瀏覽器（不是IE）支持Canvas對象，如果您願意排除80％的用戶，則可以允許您執行此操作。

最後，我不確定是否有比您已經想到的更好的解決方案 - 而且我不確定這種解決方案效果如何。

Answer 2

本教程中的Drawing lines in JavaScript可能對您有用，因爲它向您展示瞭如何使用JavaScript實現相對高效的動態線條繪製（請參閱頁面底部的示例）。

此外，我還使用jsgraphics庫來實現類似的功能，方法是清除當前行並在用戶每次移動行的端點時繪製一個新行。