初めての JavaScript Web アプリ: インタラクティブな画像座標ファインダー

Linda Hamilton
リリース: 2024-11-11 20:41:02
オリジナル
847 人が閲覧しました

フルセイル大学で最初の JavaScript コースを修了した後、私は自分の新しいスキルをテストするプロジェクトに積極的に参加したいと考えていました。私の目標は、機能的で直感的で実用的なものを作成することでした。これが、私の最初の JavaScript Web アプリケーションである Interactive Image Coowned Finder の開発につながりました。

このアプリでは、ユーザーが地図画像をアップロードし、クリックして座標を記録し、一意の名前とオプションの URL を持つレイヤーとして保存できます。このツールを使用すると、誰でもカスタム画像をマッピングしたり注釈を付けたりできるため、Web ページ上の特定の領域やランドマークの識別を伴うビジュアル プロジェクトに特に便利です。この投稿では、アプリの機能、設定、使用方法について説明します。

始める前に、これは仕事のプロジェクトでもあるという重要な注意点があると思います。私の職場では、閉じたネットワークで作業しているため、API やその他のライブラリを使用することができないため、このプロジェクトはホイールを再作成するか、より現代的で高度な開発者が改良した古いアプローチを採用している可能性があります。私自身もそこに到達するのが待ちきれません。とりあえず始めましょう!

まず、中東の地図を表示するシンプルな Web ページを用意します。

My First JavaScript Web App: Interactive Image Coordinate Finder
これをどうやって便利にできるだろうかと考えました。単純なやり取りかもしれませんが、どうやって? Google、コードペン、その他いくつかのサイトを数時間検索した後、低レベルの方法は画像上の座標を使用することであることに気付きました。どうすれば見つけられますか?グーグルが私に絵を描くように指示したため、私は静かなオフィスの真ん中でパームと向き合うことになりました。そこで、それらを掴むのに役立つツールを作成することにしました。

My First JavaScript Web App: Interactive Image Coordinate Finder

実用性を重視した非常にシンプルな UI を作りたかったのです。このアプリを使用すると、ユーザーは画像を参照して画面に表示できます。ユーザーは、レイヤー名とオプションのリンクの入力を求められます。次に、対象とする画像領域の周囲の境界ボックスをクリックします。この例ではエジプトを選択しました。

My First JavaScript Web App: Interactive Image Coordinate Finder

ユーザーが [保存] をクリックすると、結果が以下のレイヤー ログに表示されます。ユーザーは座標だけをコピーしたり、GitHub リポジトリにリンクされたテスト ページで動作するコード行をコピーしたり、レイヤーを編集したりできます。またはレイヤーをまとめて削除します。

デモの最終結果は中東の地図で、ユーザーは国をクリックしてその Wikipedia ページにアクセスできます。このツールを使って試してみたいユースケースは他にもたくさんあります。

読んでいただきありがとうございます!

以上が初めての JavaScript Web アプリ: インタラクティブな画像座標ファインダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート