接到一个这样的需求,有一张图片,需要点击图片的不同区域需要执行不同的操作,比如,图上有一个人,点击头部弹出一句话“你点击了头部”,点击胳膊同样提示“你点击了胳膊”,刚拿到这个需求一头雾水,一般点击监听都是给这个图片添加点击监听,点击图片执行什么操作,点击图片不同位置执行不同操作该怎么办呢?别急,一步一步来:
首先分析一下,我们要想监听图片某个点,就必须获取到点击图片那个点的相对于图片本身的一个像素坐标,然后根据这个点向x和y轴分别延伸一定的距离就可以获取到我们说需要的区域,那么点击图片的点能获取到么?答案当然是肯定的,怎么获取呢?话不多说直接上代码:
imageview.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_UP://抬起的时候
onSingleTap(motionEvent);
break;
}
return true;
}
});
我们通过给imageview添加OnTouchListener捕获它的点击事件,然后从motionEvent可以获取点击的位置,这里有个地方需要注意,就是我们在手势抬起之后去处理一次,这里不做处理一次点击会执行三次,分别是按下,触摸,抬起。拿到motionEvent之后把motionEvent传进onSingleTap方法进行处理:
public void onSingleTap(MotionEvent e) {
// 获取触摸点的坐标 x, y
float x = e.getX();
float y = e.getY();
// 目标点的坐标
float dst[] = new float[2];
// 获取到ImageView的matrix
Matrix imageMatrix = imageView.getImageMatrix();
// 创建一个逆矩阵
Matrix inverseMatrix = new Matrix();
// 求逆,逆矩阵被赋值
imageMatrix.invert(inverseMatrix);
// 通过逆矩阵映射得到目标点 dst 的值
inverseMatrix.mapPoints(dst, new float[]{x, y});
float dstX = dst[0];
float dstY = dsy[1];
// 判断dstX, dstY在Bitmap上的位置即可
int dstX = (int) dst[0];
int dstY = (int) dst[1];
Log.i("OnTouchListener", "dstX:" + dstX + "+++ dstY" + dstY);
}
然后运行程序点击imageview中显示的图片,控制台就会打印出点击的位置相对于图片的像素坐标,横轴是x纵轴是y。然后在onSingleTap获取到坐标后就可以对点击位置进行监听处理:例如点击的点是人的头部坐标是x:210,y:230那么就可以这么进行判断,分别给x轴和y轴以点击坐标点一个范围进行判断,重新运行代码点击一下头部控制台就会打印“点击了头部”,依次类推你想监听胳膊,肚子,脚都是先点击获取像素位置坐标,然后给一个范围进行判断就可以监听你想监听的区域。
public void onSingleTap(MotionEvent e) {
// 获取触摸点的坐标 x, y
float x = e.getX();
float y = e.getY();
// 目标点的坐标
float dst[] = new float[2];
// 获取到ImageView的matrix
Matrix imageMatrix = imageView.getImageMatrix();
// 创建一个逆矩阵
Matrix inverseMatrix = new Matrix();
// 求逆,逆矩阵被赋值
imageMatrix.invert(inverseMatrix);
// 通过逆矩阵映射得到目标点 dst 的值
inverseMatrix.mapPoints(dst, new float[]{x, y});
float dstX = dst[0];
float dstY = dsy[1];
// 判断dstX, dstY在Bitmap上的位置即可
int dstX = (int) dst[0];
int dstY = (int) dst[1];
Log.i("OnTouchListener", "dstX:" + dstX + "+++ dstY" + dstY);
if ((240 >= dstX && dstX >= 180)&&(260 >= dstY && dstY >= 200)) {//头部
Log.i("OnTouchListener", "点击了头部");
}
}
这是我实现这个功能用到的方法,如果有更好的方法欢迎分享。