类似HTML map标签功能的Android组件

AndroidImageMap：实现HTML地图功能的Android组件

最新推荐文章于 2024-03-14 11:49:46 发布

最新推荐文章于 2024-03-14 11:49:46 发布 · 277 阅读

文章标签：

#Android ImageMap

Android 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个名为AndroidImageMap的组件，它可以在Android应用中实现类似于HTMLmap标签的功能，用于图像热点映射。通过支持图像缩放、拖动以及多种形状的配置，开发者可以方便地在应用中添加交互式的图像热点。此外，该组件还支持纯生HTMLmap数据导入、使用Bitmap对象以及在代码或XML中进行布局。

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);

```