• 自定义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);
    
        }
    }
    
    
    
     
  • 相关阅读:
    Git使用及关联远程仓库
    Ceres Solver
    Halcon手眼标定
    Halcon 3D定位方法
    机器学习-数学基础
    Halcon匹配方法
    手眼标定
    C动态内存分配
    Halcon Calibration Assistant
    Visualization
  • 原文地址:https://www.cnblogs.com/ruichenblogs/p/10456841.html
Copyright © 2020-2023  润新知