類似HTML map標籤功能的Android組件

Android Image Map

一個類似HTML map標籤功能的Android組件。可以實現HTML裏圖片熱點映射。

An android view like html map tag.

項目地址

 https://github.com/chenyoca/android-image-map

項目結構

此項目是在Android Stdio IDE中創建的，其目錄結構與Eclipse很不同。如果使用Eclipse打開，需要把路徑設置到 ...../ImageMap/src/main 裏。

截圖

![ScreenShot](https://github.com/chenyoca/ImageMap/ScreenShot.png)

特點

 * 支持圖像縮放和拖動。圖中色塊覆蓋的區域爲圖片熱點。圖像縮放和拖動時，這些熱點區域也會跟着縮放和移動。

 * 支持 Circle,Rect,Poly 三種形狀。對應的類爲 CircleShape, RectShape, PolyShape。向ImageMap對象中添加即可。

 * 支持純生HTML map數據，可以直接把HTML Map生成的coords數據直接設置到Shape中。

 * 支持Bitmap對象，res目錄下的drawable文件等數據來源。

 * 在代碼中創建或者XML中佈局。

## 使用

詳細代碼見MainActivity.java文件。

```java

//取得在XML中佈局的ImageMap對象，並設置圖片

ImageMap map = (ImageMap) findViewById(R.id.imagemap);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.pink_girl,new BitmapFactory.Options());
    map.setMapBitmap(bitmap);

// 設置Shape被點擊時的監聽
// 注意：同一時刻只有一個Shape被監聽點擊
map.setOnShapeClickListener(new ShapeExtension.OnShapeClickListener() {
    @Override
    public void onShapeClick(Shape shape, float xOnImage, float yOnImage) {
        String msg = "Shape "+shape.tag+" clicked !";
        Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();
    }
});

// 圓形
// "black"是唯一標識這個Shape的字符串，不可重複。
Shape black = new CircleShape("black", Color.BLACK);
black.setValues(633,122,15);
map.addShape(black);

// 矩形
Shape black = new CircleShape("black", Color.BLACK);
black.setValues(633,122,15);
map.addShape(black);

// 多邊形
Shape black = new CircleShape("black", Color.BLACK);
black.setValues(633,122,15);
map.addShape(black);

```