1. 程式人生 > >安卓Canvas繪製圓角矩形,帶文字旋轉

安卓Canvas繪製圓角矩形,帶文字旋轉

專案中一個簡單需求,用自定義寫了一下,做個筆記。
效果圖:
在這裡插入圖片描述

原始碼:

package com.demo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;


public class MyView extends View {

    private int viewWidth;
    private int viewHeight;

    private Paint paint;

    private TextPaint textPaint;

    private float ascent;
    private float descent;

    private float textOffset;

    private float startX = 0;
    private float startY = 0;
    private float endX = 0;
    private float endY = 0;

    private RectF rectF;

    public MyView(Context context) {
        this(context, null);
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }


    private void init() {

        Log.e("MyView", "init");

        /*
         * 畫筆樣式分三種:
         * 1.Paint.Style.STROKE:描邊
         * 2.Paint.Style.FILL_AND_STROKE:描邊並填充
         * 3.Paint.Style.FILL:填充
         */

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setColor(0xff000000);

        //初始化文字畫筆
        textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextSize(50);
        textPaint.setColor(0xff000000);
        textPaint.setTextAlign(Paint.Align.CENTER);

        //文字的上坡度和下坡度。用於計算偏移量
        ascent = textPaint.ascent();
        descent = textPaint.descent();

        //偏移量,用於輔助文字居中
        textOffset = (ascent + descent) / 2;

        startX = 10;
        startY = 10;

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        Log.e("MyView", "onSizeChanged");

        viewWidth = w;
        viewHeight = h;

        endX = viewWidth - 10;
        endY = viewHeight - 10;

        rectF = new RectF(startX, startY, endX, endY);
    }


    @Override
    protected void onDraw(Canvas canvas) {

        Log.e("MyView", "onDraw");

        canvas.save();

        // 平移和旋轉畫布
        canvas.translate(viewWidth / 2, viewHeight / 2 - textOffset);
        canvas.rotate(-30);

        //繪製文字。因為這個時候,畫布已經移動到控制元件中心點了,如果在中心位置寫字,字的中心座標,就是(0,0)
        canvas.drawText("該課程已下架", 0, 0, textPaint);

        // 釋放畫布
        canvas.restore();

        canvas.drawRoundRect(rectF, 50, 50, paint);

    }
}

最後,佈局程式碼中使用:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#55ff0000"
              android:gravity="center"
              android:orientation="vertical"
    >

    <com.demo.MyView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#5500ff00"/>

</LinearLayout>