给一张Imageview特定区域添加点击监听

        接到一个这样的需求,有一张图片,需要点击图片的不同区域需要执行不同的操作,比如,图上有一个人,点击头部弹出一句话“你点击了头部”,点击胳膊同样提示“你点击了胳膊”,刚拿到这个需求一头雾水,一般点击监听都是给这个图片添加点击监听,点击图片执行什么操作,点击图片不同位置执行不同操作该怎么办呢?别急,一步一步来:

首先分析一下,我们要想监听图片某个点,就必须获取到点击图片那个点的相对于图片本身的一个像素坐标,然后根据这个点向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", "点击了头部");
    }
}

这是我实现这个功能用到的方法,如果有更好的方法欢迎分享。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值