自定义View实战八：绘制矩形框

目录

1、效果展示：

2、代码展示：

2.1、BorderedText.java

2.2、DrawRectFView.java

2.3、xml

2.4、DrawRectFActivity.java

---

1、效果展示：

2、代码展示：

2.1、BorderedText.java

public class BorderedText {
  private final Paint interiorPaint;
  private final Paint exteriorPaint;

  private final float textSize;

  /**
   * Creates a left-aligned bordered text object with a white interior, and a black exterior with
   * the specified text size.
   *
   * @param textSize text size in pixels
   */
  public BorderedText(final float textSize) {
    this(Color.WHITE, Color.BLACK, textSize);
  }

  /**
   * Create a bordered text object with the specified interior and exterior colors, text size and
   * alignment.
   *
   * @param interiorColor the interior text color
   * @param exteriorColor the exterior text color
   * @param textSize text size in pixels
   */
  public BorderedText(final int interiorColor, final int exteriorColor, final float textSize) {
    interiorPaint = new Paint();
    interiorPaint.setTextSize(textSize);
    interiorPaint.setColor(interiorColor);
    interiorPaint.setStyle(Style.FILL);
    interiorPaint.setAntiAlias(false);
    interiorPaint.setAlpha(255);

    exteriorPaint = new Paint();
    exteriorPaint.setTextSize(textSize);
    exteriorPaint.setColor(exteriorColor);
    exteriorPaint.setStyle(Style.FILL_AND_STROKE);
    exteriorPaint.setStrokeWidth(textSize / 8);
    exteriorPaint.setAntiAlias(false);
    exteriorPaint.setAlpha(255);

    this.textSize = textSize;
  }

  public void setTypeface(Typeface typeface) {
    interiorPaint.setTypeface(typeface);
    exteriorPaint.setTypeface(typeface);
  }

  public void drawText(final Canvas canvas, final float posX, final float posY, final String text) {
    canvas.drawText(text, posX, posY, exteriorPaint);
    canvas.drawText(text, posX, posY, interiorPaint);
  }

  public void drawText(
          final Canvas canvas, final float posX, final float posY, final String text, Paint bgPaint) {

    float width = exteriorPaint.measureText(text);
    float textSize = exteriorPaint.getTextSize();
    Paint paint = new Paint(bgPaint);
    paint.setStyle(Style.FILL);
    paint.setAlpha(160);
    canvas.drawRect(posX, (posY + (int) (textSize)), (posX + (int) (width)), posY, paint);

    canvas.drawText(text, posX, (posY + textSize), interiorPaint);
  }

  public void drawLines(Canvas canvas, final float posX, final float posY, Vector<String> lines) {
    int lineNum = 0;
    for (final String line : lines) {
      drawText(canvas, posX, posY - getTextSize() * (lines.size() - lineNum - 1), line);
      ++lineNum;
    }
  }

  public void setInteriorColor(final int color) {
    interiorPaint.setColor(color);
  }

  public void setExteriorColor(final int color) {
    exteriorPaint.setColor(color);
  }

  public float getTextSize() {
    return textSize;
  }

  public void setAlpha(final int alpha) {
    interiorPaint.setAlpha(alpha);
    exteriorPaint.setAlpha(alpha);
  }

  public void getTextBounds(
          final String line, final int index, final int count, final Rect lineBounds) {
    interiorPaint.getTextBounds(line, index, count, lineBounds);
  }

  public void setTextAlign(final Align align) {
    interiorPaint.setTextAlign(align);
    exteriorPaint.setTextAlign(align);
  }
}

2.2、DrawRectFView.java

public class DrawRectFView extends View {

    // 绘制 损害框和损害名称
    private Paint mPaint;
    private RectF mRectF;

    // 边缘字体
    private BorderedText mBorderedText;

    // 标题 或 名字
    private String mTitle;
    // 概率
    private float mConfidence;

    public DrawRectFView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mRectF = new RectF();

        //画笔设置空心
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(5);

        float textSizePx = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                18.0f, context.getResources().getDisplayMetrics());
        mBorderedText = new BorderedText(textSizePx);
    }

    // 设置矩形框
    public void setRectF(RectF rectf) {
        this.mRectF = rectf;
    }

    public void setTitle(String title) {
        mTitle = title;
    }

    public void setConfidence(float confidence) {
        mConfidence = confidence;
    }

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

        // 绘制 损害框
        float cornerSize = Math.min(mRectF.width(), mRectF.height()) / 8.0f;
        canvas.drawRoundRect(mRectF, cornerSize, cornerSize, mPaint);

        // 绘制  损害名称
//        if (!TextUtils.isEmpty(mTitle)){
//            mBorderedText.drawText(canvas, mRectF.left + cornerSize,
//                    mRectF.top, mTitle, mPaint);
//        }else {
//            LogUtils.d("mTitle is null or empty!");
//        }

        // 绘制名称 和 概率
        final String labelString =
                !TextUtils.isEmpty(mTitle)
                        ? String.format("%s %.2f",mTitle, (100 * mConfidence))
                        : String.format("%.2f", (100 * mConfidence));

        mBorderedText.drawText(canvas,
                mRectF.left + cornerSize,
                mRectF.top, labelString + "%",
                mPaint);

    }

}

2.3、xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gs.common3.aView.customView.drawRectF.DrawRectFActivity">

    <ImageView
        android:id="@+id/ivBackGround"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/road_details_bg" />

    <com.gs.common3.aView.customView.drawRectF.DrawRectFView
        android:id="@+id/drawRectfView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

2.4、DrawRectFActivity.java

/**
 * 在已有图片上画一个矩形识别框
 */
public class DrawRectFActivity extends AppCompatActivity {

    @BindView(R.id.ivBackGround)
    ImageView ivBackGround;
    @BindView(R.id.drawRectfView)
    DrawRectFView drawRectfView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_draw_rect_f);
        ButterKnife.bind(this);

        RectF rectF = new RectF(650, 100, 1200, 1200);
        // RectF(118.33958, 45.164707, 299.81873, 282.58585)
        RectF rectF2 = new RectF(118.33958f, 45.164707f, 299.81873f, 282.58585f);
        // RectF(66.426094, 45.78909, 112.51868, 125.75089)
        RectF rectF3 = new RectF(66.426094f, 45.78909f, 112.51868f, 125.75089f);

        //  RectF(301.6704, 90.27226, 1366.7053, 1402.4152)
        RectF rectF4 = new RectF(301.6704f, 90.27226f, 1366.7053f, 1402.4152f);


        drawRectfView.setRectF(rectF4);
        drawRectfView.setTitle("网状裂缝");
        drawRectfView.setConfidence(0.8f);

    }

}