自定義View實現圖片熱區效果

我司主要從事工業物聯網領域軟件的開發，現有個需求，在外廢品處理時需要對產品的不良位置進行標記，點選圖片實現圖片網格的着色功能。

需求是通過自定義view來實現，實現思路如下：

首先將點擊的小方格對象實例化，創建小方格PointBean對象

/**
 * 圖片上的點
 */
public class PointBean {

    private int x_max;

    private int x_mix;

    private int y_min;

    private int y_max;

    private String picPointName;

    public String getPicPointName() {
        return picPointName;
    }

    public void setPicPointName(String picPointName) {
        this.picPointName = picPointName;
    }

    public int getX_max() {
        return x_max;
    }

    public void setX_max(int x_max) {
        this.x_max = x_max;
    }

    public int getX_mix() {
        return x_mix;
    }

    public void setX_mix(int x_mix) {
        this.x_mix = x_mix;
    }

    public int getY_min() {
        return y_min;
    }

    public void setY_min(int y_min) {
        this.y_min = y_min;
    }

    public int getY_max() {
        return y_max;
    }

    public void setY_max(int y_max) {
        this.y_max = y_max;
    }
}

繼承ImageView，捕捉對控件點擊的坐標，在坐標內進行矩形的繪制

public class CustomImageView extends android.support.v7.widget.AppCompatImageView {

    private boolean firstDrawBl = true;

    List<Rectangle> rectangleList = new ArrayList<>();

    List<PointBean> pointList = new ArrayList<>();
　　 //對圖片的橫坐標和縱坐標進行解析
    String [] h_name = {"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P"};
    String [] l_name = {"1","2","3","4","5","6","7","8","9","10","11","12"};


    private onPointClickListener onPointClickListener;
　　//設置對點擊事件的監聽 public void setOnChosePoint(onPointClickListener pointListener){
        this.onPointClickListener = pointListener;
    }

    public CustomImageView(Context context){
        super(context);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs){
        super(context,attrs);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
        Drawable d = getDrawable();

        if(d!=null){
            // ceil not round - avoid thin vertical gaps along the left/right edges
            int width = MeasureSpec.getSize(widthMeasureSpec);
            //高度根據使得圖片的寬度充滿屏幕計算而得
            int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
            setMeasuredDimension(width, height);
        }else{
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
    //利用(Canvas與Paint)繪制顯示的內容
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        int left = getLeft();
        int right = getRight();
        int top = getTop();
        int bottom = getBottom();
        Log.e("msgCustomView","左面坐標:"+left+"右面坐標:"+right);
        Log.e("msgCustomView","上面坐標:"+top+"下面坐標:"+bottom);
        for(Rectangle rectangle:rectangleList){
　　　　　　　//繪制矩形方格
            rectangle.drawSelf(canvas,paint);
        }
　　　　　//對圖片進行橫豎分隔解析成小方格 if(firstDrawBl){
            int wk = right -left;
            int hk = bottom-top;
            int positionX = left+wk/18;
            for(int i=0;i<16;i++){
                int positionY = top+hk/14;
                for(int j=0;j<12;j++){
                    PointBean pointBean = new PointBean();
                    pointBean.setX_mix(positionX);
                    pointBean.setX_max(positionX+wk/18);
                    pointBean.setY_min(positionY);
                    pointBean.setY_max(positionY+hk/14);
                    positionY = positionY+hk/14;
                    pointBean.setPicPointName(h_name[i]+"_"+l_name[j]);
                    pointList.add(pointBean);
                }
                positionX = positionX+wk/18;
            }
            firstDrawBl = false;
        }
    }
    //處理控件的觸摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //獲取手指的行為
        int action = event.getAction();
        int action_code = action&0xff;
        //手指的下標Index
        int pointIndex = action>>8;
        //獲取手指的坐標
        float x = event.getX(pointIndex);
        float y = event.getY(pointIndex);
        Log.e("自定義控件","點擊坐標："+"("+x+","+y+")");
        //獲取手指的名字ID
        int pointerId = event.getPointerId(pointIndex);
//        if(action_code>=5){
//            action_code-=5;
//        }
        switch (action_code){
            case MotionEvent.ACTION_DOWN://按下
                for(PointBean pointBean:pointList){
                    if(x<pointBean.getX_max()&&x>pointBean.getX_mix()&&y>pointBean.getY_min()&&y<pointBean.getY_max()){
                        Rectangle rectangle = new Rectangle(pointBean, pointerId);
                        rectangleList.add(rectangle);
                        onPointClickListener.onChoose(pointBean.getPicPointName());
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                break;
        }
　　　　　//對view進行重新布局繪制
        invalidate();
        return true;
    }
　　//定義接口，將點擊事件坐標回調 public interface onPointClickListener{
        public void onChoose(String pointName);
    }

}

矩形對象的繪制

/**
 * 繪畫矩形對象
 */
public class Rectangle {

    private int xMin;

    private int xMax;

    private int yMin;

    private int yMax;

    private int poinitId;
    int red;
    int green;
    int blue;
    Random random = new Random();

    public Rectangle(PointBean pointBean,int pointId){
        this.xMin = pointBean.getX_mix();
        this.xMax = pointBean.getX_max();
        this.yMin = pointBean.getY_min();
        this.yMax = pointBean.getY_max();
        this.poinitId = pointId;
        red = random.nextInt(255);
        green = random.nextInt(255);
        blue = random.nextInt(255);
    }
    public void drawSelf(Canvas canvas, Paint paint){
        paint.setColor(Color.rgb(red,green,blue));
//        canvas.drawCircle(x,y,r,paint);
        Log.e("圖片繪制圖片","x坐標:"+xMin+"y坐標:"+yMin+"x大坐標:"+xMax+"y大坐標"+yMax);
        canvas.drawRect(xMin,yMin,xMax,yMax,paint);

    }
}