android - 如何绘制带圆角的路径

Question

我应该像这张照片一样画一个 CustomView。

但它们并不相同。边角笔触不同。

我使用 2 个分开的 Path 来绘制顶部形状:第一个黄色背景:

   private val paint = Paint().apply {
        isAntiAlias = false                    // pass true does not make change
        color = Color.YELLOW
        style = Paint.Style.FILL_AND_STROKE    // pass only FILL does not make change
        }

第二个是:

private val strokePaint = Paint().apply {
        isAntiAlias = false                   // pass true does not make change
        color = Color.BLACK
        strokeWidth = 2.toPx().toFloat()
        style = Paint.Style.STROKE
    }

并在 onDraw() 函数中由它们绘制:

override fun onDraw(canvas: Canvas) {
        drawPath()

        canvas.drawPath(path, paint)
        canvas.drawPath(path, strokePaint)

        // at the end, draw text and default things to avoid overlapping with background
        super.onDraw(canvas)

    }

更新:现在我画了这个，它的指针有两个面。

并使用此路径绘制:

 private fun drawPath() {
    path.run {
        moveTo(left + radius, top)

        if (_side == SIDE_TOP) {
            lineTo(pointerX - pointerSize / 2, top)
            lineTo(pointerX, rect.top)
            lineTo(pointerX + pointerSize / 2, top)
        }
        lineTo(right - radius, top)

        arcTo(topRightRect, 270F, 90F, false)
        lineTo(right, bottom - radius)
        arcTo(bottomRightRect, 0F, 90F, false)

        if (_side == SIDE_BOTTOM) {
            lineTo(pointerX + pointerSize / 2, bottom)
            lineTo(pointerX, rect.bottom)
            lineTo(pointerX - pointerSize / 2, bottom)
        }
        lineTo(left + radius, bottom)

        arcTo(bottomLeftRect, 90F, 90F, false)
        lineTo(left, top + radius)
        arcTo(topLeftRect, 180F, 90F, false)
        close()
    }
}

Answer 1

Canvas 有一些预定义的方法来绘制圆形和矩形等常见形状。在您的场景中，您可以使用 drawRoundRect，它需要一个 RectF 来绘制一个矩形。

这是一个例子:

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

    private val roundCorner = 32f

    private val paint = Paint().apply {
        color = Color.YELLOW
        style = Paint.Style.FILL
        isAntiAlias = true
    }

    private val strokePaint = Paint().apply {
        color = Color.BLACK
        strokeWidth = 4f
        style = Paint.Style.STROKE
        isAntiAlias = true
    }

    private var rect = RectF(0f, 0f, 0f, 0f)

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)

        rect = RectF(0f, 0f, w.toFloat(), h.toFloat())
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        canvas.drawRoundRect(rect, roundCorner, roundCorner, paint)
        canvas.drawRoundRect(rect, roundCorner, roundCorner, strokePaint)
    }
}

顺便说一句，如果你想使用路径绘制圆角，你必须将 pathEffect 设置为 CornerPathEffect。

举个例子:

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

    private val roundCorner = 32f

    private val paint = Paint().apply {
        color = Color.YELLOW
        isAntiAlias = true
        pathEffect = CornerPathEffect(roundCorner)
        strokeCap = Paint.Cap.ROUND
    }

    private val strokePaint = Paint().apply {
        color = Color.BLACK
        strokeWidth = 4f
        isAntiAlias = true
        style = Paint.Style.STROKE
        pathEffect = CornerPathEffect(roundCorner)
    }

    private var path = Path()
    private val offset = 50f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        path = Path().apply {
            moveTo(offset, offset)
            lineTo(w.toFloat() - offset, offset)
            lineTo(w.toFloat() - offset, h.toFloat() - offset)
            lineTo(offset, h.toFloat() - offset)
        }
        path.close()

    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        canvas.drawPath(path, paint)
        canvas.drawPath(path, strokePaint)
    }
}