ユーザーが画面上でドラッグできる小さな情報ポップアップを表すドラッグ可能な div があります。しかし、この div は画面上のポイントに固定されています。div と固定されているポイントの間にキャレットを描画したいと思います。
この例は、Google マップで、検索した店舗または関心のあるポイントにカーソルを合わせると見つかります。ポイントとポップアップの間にキャレットが表示されます。これは簡単ですが、私のポップアップはドラッグできません。
では、これを実装する最良の方法は何ですか? アンカーポイントに対するポップアップの向きに応じてサイズが変更される一連のキャレット画像を使用することを考えています。ポップアップがアンカーに対して配置される角度に応じて、異なるタイプのキャレットを使用する必要があるという点で注意が必要です。これを行うより良い方法はありますか？
ありがとう！
つまり、基本的に画面上の 2 点間に動的な画像を描画しようとしているということですか? これが HTML でどれほど実用的かはわかりません。dom は画像の回転をサポートしておらず、画像のサイズ変更は品質が制限されています。サーバーサイズの画像生成を行うことができますが、それは遅くなり、サーバーの負荷が高くなります.
一部の新しいブラウザー (IE 以外) は Canvas オブジェクトをサポートしており、ユーザーの 80% を除外したい場合はこれを行うことができます。
結局のところ、あなたがすでに考えているよりも優れた解決策があるかどうかはわかりません。また、それがうまくいくかどうかもわかりません。
この JavaScript での線の描画に関するチュートリアルは、JavaScriptを使用して比較的効率的な動的な線の描画を行う方法を示しているため、役に立つかもしれません (ページの下部にある例を参照してください)。
また、jsgraphicsライブラリを使用して、現在の行をクリアし、ユーザーが行の終点を移動するたびに新しい行を描画することで、同様のことを実現しました。