如何在Imageview上绘制一个黑色边框和背景透明的矩形?

时间:2015-12-01 10:56:36

标签: android canvas imageview draw paint

我想在ImageView上绘制一个矩形,如下图所示(黑色边框和透明背景)。 基本上我下载一个图像,放入ImageView并在我收到4个点后绘制一个矩形。 提前致谢

enter image description here

2 个答案:

答案 0 :(得分:2)

android.view.InflateException 的问题可以通过从DrawView类中删除构造函数并再次自动生成它们来解决。现在对于矩形,你必须像这样使用onDraw:

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Paint paint = new Paint();
    paint.setColor(Color.TRANSPARENT);
    paint.setStyle(Paint.Style.FILL);
    float leftx = 50;
    float topy =  50;
    float rightx =  150;
    float bottomy =  150;
    // FILL
    canvas.drawRect(leftx, topy, rightx, bottomy, paint);

    paint.setStrokeWidth(10);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    // BORDER
    canvas.drawRect(leftx, topy, rightx, bottomy, paint);
}

如果你想点击a获取坐标然后绘制矩形覆盖 onTouchEvent 方法并执行类似这样的操作

class DrawView extends ImageView {

    float x, y;
    float width = 60.0f;
    float height = 50.0f;
    boolean touched = false;

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

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DrawView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        if (touched) {
            Paint paint = new Paint();
            paint.setColor(Color.TRANSPARENT);
            paint.setStyle(Paint.Style.FILL);
            // FILL
            canvas.drawRect(x, y, (x + width) / 0.5f, (y + height) / 0.5f, paint);

            paint.setStrokeWidth(10);
            paint.setColor(Color.BLACK);
            paint.setStyle(Paint.Style.STROKE);
            // BORDER
            canvas.drawRect(x, y, (x + width) / 0.5f, (y + height) / 0.5f, paint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        touched = true;
        //getting the touched x and y position
        x = event.getX();
        y = event.getY();
        invalidate();
        return true;
    }

}

答案 1 :(得分:0)

我在@vasilis的帮助下解决了我的问题。

我创建了:

class DrawView extends ImageView {
   private int numberOfRectangles=0;
   private ArrayList<Rectangles> listRect;
   public DrawView(Context context) {
       super(context);
   }
   public DrawView(Context context, AttributeSet attrs) {
       super(context, attrs);
   }
   public DrawView(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
   }

   @Override
   public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (numberOfRectangles> 0 && listRect!= null)
    {
        for (int i=0; i< numberOfRectangles; i++)
        {
            Paint paint = new Paint();
            paint.setColor(Color.TRANSPARENT);
            paint.setStyle(Paint.Style.FILL);
            float leftx = listRect.get(i).getLeftx();
            float topy = listRect.get(i).getTopy();
            float rightx = listRect.get(i).getRightx();
            float bottomy = listRect.get(i).getBottomy();
            // FILL
            canvas.drawRect(leftx, topy, rightx, bottomy, paint);

            paint.setStrokeWidth(10);
            paint.setColor(Color.BLACK);
            paint.setStyle(Paint.Style.STROKE);
            // BORDER
            canvas.drawRect(leftx, topy, rightx, bottomy, paint);
        }
    }
}
 public void creatRectangles(ArrayList<Rectangles> arrayRettangoliTest) {
    numberOfRectangles=arrayRettangoliTest.size();
    this.listRect= arrayRettangoliTest;
    this.invalidate();
  }

}

在我的xml文件中:

 <it.path.DrawView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/placeholder" />

我创建了一个类矩形:

public class Rectangles {
   private float leftx;
   private float topy ;
   private float rightx;
   private float bottomy;

    public Rectangles(float leftx, float topy, float rightx, float bottomy)      {
        this.leftx = leftx;
        this.topy = topy;
        this.rightx = rightx;
        this.bottomy = bottomy;
    }

    @Override
    public String toString() {
        return "Rectangles{" +
            "leftx=" + leftx +
            ", topy=" + topy +
            ", rightx=" + rightx +
            ", bottomy=" + bottomy +
            '}';
    }

    public void setLeftx(float leftx) {
        this.leftx = leftx;
    }

    public void setTopy(float topy) {
        this.topy = topy;
    }

    public void setRightx(float rightx) {
        this.rightx = rightx;
    }

    public void setBottomy(float bottomy) {
        this.bottomy = bottomy;
    }

    public float getLeftx() {
        return leftx;
    }

    public float getTopy() {
        return topy;
    }

    public float getRightx() {
       return rightx;
    }

    public float getBottomy() {
        return bottomy;
   }

}

在我的MainActivity中(在onClick()之后):

  ...
  ArrayList<Rectangles> arrayRectanglesTest= new ArrayList<>(4);
  arrayRectanglesTest.add(new Rectangles(50, 50, 100, 100));
  arrayRectanglesTest.add(new Rectangles(150, 150, 200, 200));
  arrayRectanglesTest.add(new Rectangles(250, 250, 300, 300));
  arrayRectanglesTest.add(new Rectangles(350, 350, 400, 400));
  arrayRectanglesTest.add(new Rectangles(450, 450, 500, 500));
  imageView.creatRectangles(arrayRectanglesTest);
  ...

所以我制作了动态矩形的数量 这里是结果

enter image description here