图片热区点击的实现

来源：互联网发布：复杂网络的作用编辑：程序博客网时间：2024/04/28 19:02

有时我们需要根据点击图片的不同位置响应不同的事件，即通常所说的图片热区点击

1、前期准备：要实现热区点击，需要提前测量好原始图片上每块区域的边界点坐标，组成一个坐标数组，用以检测点击是否在某个区域内和绘制点击时的覆盖物

2、加载图片并计算实际显示的图片缩放比例

imageView.post(new Runnable(){    @Override    public void run() {        int boundWidth = imageView.getDrawable().getBounds().width();        int boundHeight = imageView.getDrawable().getBounds().height();        Log.i("henry","boundWidth:"+boundWidth + " | boundHeight:" + boundHeight);        Log.i("henry","ImageViewWidth:"+imageView.getDrawable() + " | ImageViewHeight:" + imageView.getHeight());        //获取imageView中Image的变换矩阵        Matrix matrix = imageView.getImageMatrix();        float[] values = new float[9];        matrix.getValues(values);        //获取Image在X，Y方向的缩放        float scaleX = values[0];        float scaleY = values[4];        //获取Image在X,Y方向的移动        float transX = values[2];        float transY = values[5];

3、根据图片缩放比例重新计算区域的边界坐标点

//计算实际显示的区域path坐标int[] xj = getResources().getIntArray(R.array.map_xj);int[] xz = getResources().getIntArray(R.array.map_xz);float[] xjf = new float[xj.length];float[] xzf = new float[xz.length];for(int i = 0; i < xj.length; i++){    if(i % 2 == 0){        xjf[i] = (xj[i] * scaleX + transX);    }else{        xjf[i] = (xj[i] * scaleY + transY);    }}for(int i = 0; i < xz.length; i++){    if(i % 2 == 0){        xzf[i] = (xz[i] * scaleX + transX);    }else{        xzf[i] = (xz[i] * scaleY + transY);    }}

4、重写onTouchEvent()事件，监听用户按下的坐标点，并判断坐标点是否在某个区域内

case MotionEvent.ACTION_DOWN:    checkClickArea(event);    if(baseAreaBean != null){        invalidate();    }    return true;

/** * 检测点击区域 */private void checkClickArea(MotionEvent event){    for(BaseAreaBean areaBean : areaPaths){        RectF rectF = new RectF();        areaBean.path.computeBounds(rectF,true);        Region region = new Region();        region.setPath(areaBean.path,new Region((int)rectF.left,(int)rectF.top,(int)rectF.right,(int)rectF.bottom));        if(region.contains((int)event.getX(),(int)event.getY())){            baseAreaBean = areaBean;            break;        }    }}

5、若用户按下位置处于某个区域，重写onDraw()方法，绘制区域覆盖物

@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    if(baseAreaBean != null){        Paint paint = new Paint();        paint.setARGB(0xAA,0xB2,0xB2,0xB2);        paint.setStyle(Paint.Style.FILL);        canvas.drawPath(baseAreaBean.path,paint);    }}

6、在up事件中响应用户操作

case MotionEvent.ACTION_UP:    //触发点击事件    if(baseAreaBean != null && onAreaClickListener != null){        onAreaClickListener.onAreaClick(baseAreaBean);    }    //将当前点击区域置空    baseAreaBean = null;    invalidate();    break;

0 1