Android Canvas如何在圆角矩形内绘制45度线并解决宽线溢出问题

如何在红色圆角矩形内绘制45度黑色线条？当线条宽度过大时，会超出矩形显示为蓝色，请问该如何解决此问题？

问题示意图：

相关代码：

private fun createRect(x: Float, y: Float, w: Int, h: Int) = RectF(
    x, y, (x + w), (y + h)
)

fun drawRoundRect(c: Canvas, p: Paint, x: Float, y: Float, w: Int, h: Int) {
    c.drawRoundRect(createRect(x, y, w, h), cornerSize, cornerSize, p)
}

fun drawRectWithLine(
    c: Canvas, frameP: Paint, disablePaint: Paint, x: Float, y: Float, w: Int, h: Int
) {
    drawRoundRect(c, frameP, x, y, w, h)
    c.drawLine(x, y, x + w, y + h, disablePaint)
}

线条绘制是以路径为中心向两侧扩展的，当线条宽度较大时，线条边缘会超出圆角矩形的边界。由于画布未对圆角矩形区域做裁剪，超出部分会直接显示在矩形外，导致出现蓝色（或背景色）的溢出效果。

使用Canvas的裁剪功能限制绘制区域，让线条只能在圆角矩形内部显示。操作时需先保存画布状态，裁剪后绘制线条，最后恢复状态避免影响后续绘制。

修改后的代码如下：

private fun createRect(x: Float, y: Float, w: Int, h: Int) = RectF(
    x, y, (x + w), (y + h)
)

fun drawRoundRect(c: Canvas, p: Paint, x: Float, y: Float, w: Int, h: Int) {
    c.drawRoundRect(createRect(x, y, w, h), cornerSize, cornerSize, p)
}

fun drawRectWithLine(
    c: Canvas, frameP: Paint, disablePaint: Paint, x: Float, y: Float, w: Int, h: Int
) {
    val rect = createRect(x, y, w, h)
    // 先绘制圆角矩形
    drawRoundRect(c, frameP, x, y, w, h)
    
    // 保存当前画布状态
    c.save()
    // 裁剪到圆角矩形区域，仅保留内部可绘制范围
    c.clipRoundRect(rect, cornerSize, cornerSize, Region.Op.INTERSECT)
    // 绘制对角线，超出矩形的部分会被自动裁剪
    c.drawLine(x, y, x + w, y + h, disablePaint)
    // 恢复画布状态，不影响后续其他绘制操作
    c.restore()
}

低版本兼容方案 #

如果你的Android版本低于API 26，clipRoundRect()方法不支持，可改用Path构建圆角路径后裁剪：

// 兼容低版本的裁剪逻辑
val path = Path()
path.addRoundRect(rect, cornerSize, cornerSize, Path.Direction.CW)
c.clipPath(path)

内容的提问来源于stack exchange，提问作者yefeng