0

このクリック可能な画像をHTMLのimageMapに似たものにする必要があります。クリック可能な領域（中央のマップマーカーのようなもの）にもアイコンを配置する必要がありますが、画像のサイズ変更をどのように考慮すればよいですか？

つまり、私の画像は800x600で、クリック可能な領域は20、20、60、40で覆われた長方形である可能性がありますが、これらのピクセルは、完全なピクセルに表示されていない場合、実際には画像内の同じ位置を参照していません。ファッション。

編集：私の画像は、描画可能なフォルダからではなく、SDカードから取得されます

4

1 に答える 1

-1

これは私がこのリンクで見つけたものです

画像を表示し、ユーザーが画像のさまざまな部分をタップしてナビゲートしてアクションを実行する必要があることに気付きました。必要なものをスケッチした後、必要なものは HTML マップ タグのようなものであることが明らかになりましたが、Android ビューで表示されます。もう少し考えて、これは利用できる便利なウィジェットになると判断しました。

結果のコード:

レイアウトでドローアブルまたはビットマップとして画像をサポート xml でエリア タグのリストを許可 リソース xml への HTML エリア タグのカット アンド ペーストの使用を有効化 (つまり、HTML マップと画像を取得し、最小限の編集で使用する機能) サポート画像がデバイス画面よりも大きい場合のパン ピンチズームをサポート 領域がタップされたときのコールバックをサポートします。注釈をバブル テキストとして表示し、バブルがタップされた場合にコールバックを提供することをサポートします コードはGitHub – Android Image Mapにあります

2012 年 3 月 2 日更新: 常に元の画像ビットを使用して画像のサイズを変更するオプションを追加しました。特定の画像は、サイズを上下に変更すると、画質が大幅に低下します。常に元のビットからサイズを変更すると、可能な限り最良の画像が得られますが、余分なメモリが必要になります。トレードオフはあなた次第です。

実装に関するいくつかの簡単なメモを以下に示します。いくつかの重要な領域についての詳細を記載したフォローアップの投稿を作成します。

マップを img に関連付ける容易さは、HTML の img タグで容易に関連付けることができます。レイアウトで使用するマップの名前を指定するだけです。

<!--?xml version="1.0" encoding="utf-8"?-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ctc="http://schemas.android.com/apk/res/com.ctc.android.widget"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <com.ctc.android.widget.ImageMap  
        android:id="@+id/map"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:src="@drawable/usamap"
        ctc:map="usamap"/>
</LinearLayout>

エリア マップはプロジェクトの res/xml/map.xml で指定されます。HTML マップとの違いの 1 つは、各エリアに ID が必要なことです。私はこの要件について行ったり来たりしましたが、id のない領域を許可するようにコードを変更する可能性があります。コードは name 属性が存在する場合はそれを使用し、存在しない場合は title または alt を探します。現在の実装では、各エリアの名前も必要ですが、これは簡単に変更できます。

<!--?xml version="1.0" encoding="utf-8"?-->
<maps xmlns:android="http://schemas.android.com/apk/res/android">
    <map name="gridmap">
        <area id="@+id/area1001" shape="rect" coords="118,124,219,226" />
        <area id="@+id/area1002" shape="rect" coords="474,374,574,476" />
        <area id="@+id/area1004" shape="rect" coords="710,878,808,980" />
        <area id="@+id/area1005" shape="circle" coords="574,214,74" />
        <area id="@+id/area1006" shape="poly" coords="250,780,250,951,405,951" />
        <area id="@+id/area1007" shape="poly" coords="592,502,592,730,808,730,808,502,709,502,709,603,690,603,690,502" />
    </map>
    <map name="usamap">
        <area id="@+id/area1" shape="poly" coords="230,35,294,38,299,57,299,79,228,79" />
...
     </map>
</maps>

画像自体は res/drawable-nodpi に配置されるため、システムは dpi に基づいて画像をデバイスに合わせようとしません。このようにして、エリア座標が表示された画像に適切にマッピングされることが保証されます。

以下は、レイアウト内のビューを見つけてクリック ハンドラーを追加するサンプル アクティビティです。

public class ImageMapTestActivity extends Activity {
    ImageMap mImageMap;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // find the image map in the view
        mImageMap = (ImageMap)findViewById(R.id.map);

        // add a click handler to react when areas are tapped
        mImageMap.addOnImageMapClickedHandler(new ImageMap.OnImageMapClickedHandler() {
            @Override
            public void onImageMapClicked(int id) {
                // when the area is tapped, show the name in a
                // text bubble
                mImageMap.showBubble(id);
            }

            @Override
            public void onBubbleClicked(int id) {
                // react to info bubble for area being tapped
            }
        });
    }
}

これが役立つことを願っています。

于 2013-02-05T12:13:25.430 に答える