android 图片区域点击（图片热区）

背景：在一张图片中，有时希望点击不同的区域时，有不同的表现。

 

思路：把要用的图片调整为合适的大小后（重要），导入到Dreamweaver中，在图片上，把需要添加事件的部分建立图片“热区”，然后映射到手机上的相应区域（有点麻烦，但没想到其它好的方法）。

在该实例中，只对西藏与新疆做了热区响应

 

效果图： 

    

 

 

 1.重写ImageView类(关键代码如下)

 

a.从arrays.xml中加载热点区域

//从arrays.xml中加载热点区域
	protected void initMapArea() {
		mMapArea.clear();
		mFocus.clear();
		String[] keys = mContext.getResources().getStringArray(R.array.map_area);
		MapArea bodyArea = null;
		int idenId = -1;
		if(keys != null) {
			for(String key : keys) {
				idenId = mContext.getResources().getIdentifier(key, "array", mContext.getPackageName());
				int[] paths = mContext.getResources().getIntArray(idenId);
				idenId = mContext.getResources().getIdentifier(key + "_code", "array", mContext.getPackageName());
				String[] ptKeys = mContext.getResources().getStringArray(idenId);
				bodyArea = new MapArea(ptKeys, paths);
				mMapArea.put(key, bodyArea);
			}
		}
	}

 

b.把照片上的位置与手机位置进行统一

//进行不同材质机器的兼容
private float toDip(Context context,float pxValue){
	final float scale = context.getResources().getDisplayMetrics().density;
	return (int) (pxValue * scale + 0.5f);
}

 

c.热点区域判断

//判断触摸点是否在热点区域
protected void checkAreas(MotionEvent event) {
        mFocus.clear();
	for(String key : mMapArea.keySet()) {
		mPathRectF.setEmpty();
		Path path = mMapArea.get(key).getPath();
		path.computeBounds(mPathRectF, true);
		if(mPathRectF.contains(event.getX(),event.getY())) {
			mFocus.add(key);
			break;
		}
	}
}

 

d.热点区域坐标(arrays.xml) 

 <string-array name="map_area">
        <item>map_xj</item>
        <item>map_xz</item>
    </string-array>
    
    <string-array name="map_xj_code">
        <item>XinJiang</item>
        <item>新疆</item>
    </string-array>
    
    <string-array name="map_xz_code">
        <item>XiZang</item>
        <item>西藏</item>
    </string-array>

    <integer-array name="map_xz">
        <item>27</item>
        <item>155</item>
           .......

 

2.在调用的Activity中做交互

protected Handler mHandler = new Handler() {
	public void handleMessage(android.os.Message msg) {
		if(HotImgActivity.this.isFinishing()) {
			return;
		}
		Object obj = msg.obj;
		if(obj != null) {
			String[] codes = (String[]) obj;
			String message  ="Code:" + codes[0] + ", Name:" + codes[1]; 
			Toast.makeText(HotImgActivity.this, message, Toast.LENGTH_SHORT).show();
		}
	};
};

 

3.在布局文件中体现

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <!-- 注意scaleType要为'matrix'即原始图像的大小，这样才能保证绘制的点的位置没有发生变化，如果其它，则需要另做转换 -->
    <com.hotimg.view.MapAreaView
        android:id="@+id/map_areaview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="matrix"
        android:src="@drawable/china" />
</HorizontalScrollView>

评论

8 楼 u011135662 2015-11-07  

把要用的图片调整为合适的大小后（重要），导入到Dreamweaver中，在图片上，把需要添加事件的部分建立图片“热区”，然后映射到手机上的相应区域（有点麻烦，但没想到其它好的方法）   这个能不能具体点。。。

7 楼 lwhhuahua 2014-10-09  

test162543 写道

-0-Devil 写道

求教，怎么获得图片的热点区域坐标？？

请问知道答案了吗？

不知道

6 楼 test162543 2014-06-03  

-0-Devil 写道

求教，怎么获得图片的热点区域坐标？？

请问知道答案了吗？

5 楼 -0-Devil 2014-05-04  

求教，怎么获得图片的热点区域坐标？？

4 楼 yq135314 2014-03-21  

ss200614474 写道

这个功能实现缩放了现在？

已经有了的，在另一篇里面就有的

3 楼 ss200614474 2014-03-11  

这个功能实现缩放了现在？

2 楼 dongljuan 2013-11-13  

楼主版本多少的？

1 楼 shuishoumu 2013-09-02  

博主能实现一下缩放吗，我实现了缩放之后就点击不了了