React を使用して画像上にインタラクティブ マーカーを配置する

Question

＃＃＃助けてください。 ホームページには以下のような画像が表示されています（拡大画像）。 「FORGE」の家には、中央に

白と青のマーカー と 黒い矢印 があることに注意してください。

「賃貸」住宅についても同様です。

これらのタグはそれぞれ、インタラクティブなボタンとして機能します。予想される対話動作は次のとおりです:

マウスを置くと、青い背景が拡大して「Forge」または「Rentals」というテキストが表示されます
クリックすると、ユーザーは対応する「Forge」または「Rentals」ページに移動します。

また、画面のサイズが変更されたときに、ボタンがこれらの特定の位置に留まる必要がある場合に応答できるようにしたいと考えています。

絶対位置決め、X、Y 座標を使用して機能させようとしています。しかし、私はこの種のユーザー インターフェイスのエクスペリエンスを楽しんでいるので、有効な解決策が見つかりません。キャンバスを使用するべきか、それとも他のものを使用すべきかわかりません。

ご協力いただければ幸いです。

私のコードは次のようになりますが、正しい方向に進んでいないように見えます:

リーリー

Answer 1

コントロールはイメージ コンテナ内に絶対に配置する必要があります。 実装は、画像が配置される場所、全画面かどうか、画像の前後にコンテンツがあるかどうかなど、さまざまな要因によって決まります。 しかし、このコードは主な原則を示しているはずです。

ウィンドウのサイズ変更時に画像のサイズも変更される場合は、画像と同じコンテナを作成する必要があります。その後、そのコンテナを基準にしてコントロールの位置を設定し、コントロールをそれぞれのポイントに固定することができます。

リーリー リーリー

コードを使用すると、次のようになります (ただし、反応でモジュール スタイルを使用する方法 を学ぶためにスタイル ファイルにスタイルを移動することをお勧めします ):

リーリー

位置を固定して通常のコントロール ビューを追加するだけです。

制御するには、別のコンポーネントを作成する必要があります。必要な動作を実現する方法の例を次に示します:

リーリー リーリー