Android 用canvas绘制半圆

谁能帮我解决如何用画布绘制下面图片的半圆以及如何检测绘图对象的集合？

我曾尝试使用 XML 绘制它，但我不知道如何检测它的碰撞。我只想检测黑色部分的碰撞，而不是整个圆的碰撞。 谢谢。

我刚刚用自定义视图做了类似的事情：

class SemiCircleView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val paint: Paint = Paint()
    private var rectangle: RectF? = null
    private var margin: Float

    init {
        paint.isAntiAlias = true
        paint.color = ContextCompat.getColor(context, R.color.colorAquamarine)
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = 5.dpToPx()
        margin = 3.dpToPx() // margin should be >= strokeWidth / 2 (otherwise the arc is cut)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (rectangle == null) {
            rectangle = RectF(0f + margin, 0f + margin, width.toFloat() - margin, height.toFloat() - margin)
        }
        canvas.drawArc(rectangle!!, 90f, 180f, false, paint)
    }

}

将其添加到您的 XML 布局中，如下所示：

<com.example.view.SemiCircleView
    android:layout_width="120dp"
    android:layout_height="120dp"/>

这就是结果：

就我而言，我想要以编程方式控制所绘制圆的百分比，所以我添加了一个方法setArcProportion控制：

class SemiCircleView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val mainPaint: Paint = Paint()
    private val backgroundPaint: Paint = Paint()
    private var rectangle: RectF? = null
    private var margin: Float
    private var arcProportion: Float = 0f

    init {
        mainPaint.isAntiAlias = true
        mainPaint.color = ContextCompat.getColor(context, R.color.colorLutea)
        mainPaint.style = Paint.Style.STROKE
        mainPaint.strokeWidth = 5.dpToPx()
        backgroundPaint.isAntiAlias = true
        backgroundPaint.color = ContextCompat.getColor(context, R.color.black_08)
        backgroundPaint.style = Paint.Style.STROKE
        backgroundPaint.strokeWidth = 5.dpToPx()
        margin = 3.dpToPx() // margin should be >= strokeWidth / 2 (otherwise the arc is cut)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (rectangle == null) {
            rectangle = RectF(0f + margin, 0f + margin, width.toFloat() - margin, height.toFloat() - margin)
        }
        canvas.drawArc(rectangle!!, -90f, arcProportion * 360, false, mainPaint)
        // This 2nd arc completes the circle. Remove it if you don't want it
        canvas.drawArc(rectangle!!, -90f + arcProportion * 360, (1 - arcProportion) * 360, false, backgroundPaint)
    }

    /**
     * @param arcProportion The proportion of the semi circle arc, from 0 to 1. Setting 0 makes the arc invisible, and 1
     * makes a whole circle.
     */
    fun setArcProportion(arcProportion: Float) {
        this.arcProportion = arcProportion
        invalidate()
    }

}

所以如果我这样做semiCircleView.setArcProportion(0.62f) I have:

Bonus- 使弧线随着动画修改而增长setArcProportion像这样：

private const val ANIMATION_BASE_DURATION_MS: Long = 500 // milliseconds

fun setArcProportion(arcProportion: Float) {
    ValueAnimator.ofFloat(0f, arcProportion).apply {
        interpolator = DecelerateInterpolator()
        // The animation duration is longer for a larger arc
        duration = ANIMATION_BASE_DURATION_MS + (arcProportion * ANIMATION_BASE_DURATION_MS).toLong()
        addUpdateListener { animator ->
            [email protected] /cdn-cgi/l/email-protection = animator.animatedValue as Float
            thi[email protected] /cdn-cgi/l/email-protection()
        }
        start()
    }
}