Canvas-＞左上角坐标系和中心坐标系的转换

XML文件

<?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:orientation="vertical"
    android:gravity="center">
    <com.yang.app.MyView
        android:id="@+id/iv"
        android:layout_width="300dp"
        android:layout_height="300dp"/>
</LinearLayout>

自定义View代码

class MyView(context: Context, attrs: AttributeSet) : View(context, attrs) {
    private val spanValue = 200f
    private val mNewPaint = Paint().apply {
        isAntiAlias = true
        isFilterBitmap = true
        style = Paint.Style.STROKE   // 只绘制边
        strokeWidth = 10f             // 设置线宽
        color = Color.RED
    }
    private val mOldPaint = Paint().apply {
        isAntiAlias = true
        isFilterBitmap = true
        style = Paint.Style.STROKE   // 只绘制边
        strokeWidth = 10f             // 设置线宽
        color = Color.BLUE
    }

    private val mFinalPaint = Paint().apply {
        isAntiAlias = true
        isFilterBitmap = true
        style = Paint.Style.STROKE   // 只绘制边
        strokeWidth = 10f             // 设置线宽
        color = Color.GREEN
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        // 1. 左上角(0, 0)开始画出整个View的轮廓
        canvas?.drawRect(0f, 0f, width.toFloat(), height.toFloat(), mNewPaint)
        // 2. 左上角(0, 0)开始画一个矩形
        canvas?.drawRect(0f, 0f, spanValue, spanValue, mOldPaint)

        // 3. 平移到当前View中心点(width/2, height/2)画一个矩形
        val matrix = Matrix()
        matrix.setTranslate((width / 2).toFloat(), (height / 2).toFloat())
        canvas?.concat(matrix)
        canvas?.drawCircle(0f, 0f, 20f, Paint().apply {
            color = Color.BLACK
        })
        canvas?.drawRect(-spanValue/2, -spanValue/2, spanValue/2, spanValue/2, mNewPaint)

        // 4. 返回View坐标系左上角(0, 0)再绘制一个矩形
        matrix?.invert(matrix)
        canvas?.concat(matrix)
        canvas?.drawRect(0f, 0f, spanValue * 2, spanValue * 2, mFinalPaint)
    }
}

效果图