图片中不规则区域的点击

接着上一条，对于找茬里面更高的要求就是一张大图中不规则图形的点击处理，需要获取点击区域，然后点击对这个不规则区域进行处理，如变色等操作，还能知到点击的是哪个不规则区域。

先看效果图：

这个先要一个xml，这个xml里面就是各个不同区域的描点数据。先看看这个数据怎么获取吧，需要工具：Adobe Dreamweaver 。下面的演示操作使用的是Adobe Dreamweaver CC 2018.

第一步：

 

第二步点击插入一个Image,

 

第三步：

这里要选择设计，然后再回到拆分那里

第四步骤，在图片上右键，然后点击属性，选择不规则选择区域：

 

这里就是不规则选框，选择你要点击事件响应的不规则区域，选择完成在下面的html里面就有一个area便签，里面的一串数字代表了你的不规则区域。也就是后面安卓代码里面的pts字段里的数据了。

 

下面就是读取这个area区域，然后将这个区域存放在自己的一个实体中，这个实体作为后面返回给点击事件也是有必要的。然后就是监听onTouchEvent，将这个事件瓜分出来点击事件，将这个点击的位置在之前添加的area里查找，看是否包含这个点击的x,y值，如果有就说明点击到了某个区域，然后将这个区域返回出来。

  @Override
    public boolean onTouchEvent(MotionEvent event) {
        boolean resStat = super.onTouchEvent(event);
        if (mSourceBitmap != null && !isAnimation) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                mDownTime = System.currentTimeMillis();
                mPointF.set(event.getX(), event.getY());
            }
            if (event.getPointerCount() == 1) {
                if (isCanMove) {
                    moveEvent(event);
                    resStat = true;
                }
                if (isCanClick) {
                    clickEvent(event);
                    resStat = true;
                }
            } else if (event.getPointerCount() == 2) {
                if (isCanScale) {
                    scaleEvent(event);
                    resStat = true;
                }
            }
            if (isNeedToCheckOutOfSide) {
                outOfSideEvent(event);
                resStat = true;
            }
        }
        return resStat;
    }

   /**
     * 是否点击在热点区检测
     *
     * @param event
     */
    protected void checkAreas(MotionEvent event) {
        mHotKeys.clear();
        float[] curMove = getCurrentMoveXY();
        float scale = getCurrentScale();
        for (String key : mCheckAreas.keySet()) {
            if (mCheckAreas.get(key).isInArea(mEmptyRectF, (event.getX() - curMove[0]) / scale, (event.getY() - curMove[1]) / scale)) {
                mHotKeys.add(key);
                lastClick = event;
                break;
            }
        }
    }

    /**
     * 缩放事件
     *
     * @param event
     */
    protected void scaleEvent(MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_POINTER_DOWN:
                mIsTwoFinger = true;
                mBeforeDistance = spacing(event);
                if (mBeforeDistance > 10f) {
                    mSaveMatrix.set(mMatrix);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                float afterDistance = spacing(event);
                if (afterDistance > 10f) {
                    float tempScale = afterDistance / mBeforeDistance;
                    mMatrix.set(mSaveMatrix);
                    float newScale = getCheckRangeScale(tempScale);
//				imageCenterLocation(event);
                    mMatrix.postScale(newScale, newScale, VIEW_WIDTH / 2, VIEW_HEIGHT / 2);
                    invalidate();
                }
                break;
            case MotionEvent.ACTION_POINTER_UP:
                if (event.getPointerCount() == 0) {
                    upToCheckOutOfSide(event);
                }
                break;
            default:
                break;
        }
    }

基本上就这么弄完了，下面就来粘贴处demo链接，欢迎下载：https://download.csdn.net/download/greatdaocaoren/12561318

有兴趣可以看看下面服务号和订阅号：