如何在Imageview上画一个黑色边框背景透明的矩形？

Question

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

Answer 1

您 android.view.InflateException 的问题可以通过从 DrawView class 中删除构造函数并重新自动生成它们来解决。现在对于矩形你必须有类似这样的 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);
}

如果你想在点击时获取坐标然后绘制矩形覆盖 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;
    }

}

Answer 2

感谢@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" />

我创建了一个 Class 矩形：

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);
  ...

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

如何在Imageview上画一个黑色边框背景透明的矩形？

How to draw a rectangle with black border and background transparent on Imageview?

android

canvas

paint

draw

imageview