我如何在 android canvas 中只绘制矩形的角

Question

我想画一个canvas

如何在中心 android canvas 上绘制它？我尝试使用 canvas.drawLine 但没有得到所需的输出

Answer 1

Image

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint(Paint.DITHER_FLAG);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(50);
        paint.setColor(0xFF2287BB);

        paint.setStrokeJoin(Paint.Join.MITER);
        canvas.drawPath(createCornersPath(getWidth()/2 - 500, getHeight()/2 - 500, getWidth()/2  +500, getHeight()/2 + 500, 150), paint);
    }

    private Path createCornersPath(int left, int top, int right, int bottom, int cornerWidth){
        Path path = new Path();

        path.moveTo(left, top + cornerWidth);
        path.lineTo(left, top);
        path.lineTo(left + cornerWidth, top);

        path.moveTo(right - cornerWidth, top);
        path.lineTo(right, top);
        path.lineTo(right , top + cornerWidth);

        path.moveTo(left, bottom - cornerWidth);
        path.lineTo(left, bottom);
        path.lineTo(left + cornerWidth, bottom);

        path.moveTo(right - cornerWidth, bottom);
        path.lineTo(right, bottom);
        path.lineTo(right, bottom - cornerWidth);


        return path;
    }

Answer 2

我想用圆角创建相同的效果，所以我这样修改它（我使用的是 Jetpack Compose canvas API，但路径创建是相同的）：

Canvas(modifier = Modifier
    .fillMaxSize()
    .graphicsLayer(alpha = 0.99f)
) {
    val rectSize = androidx.compose.ui.geometry.Size(size.width / 1.5f, size.width / 1.5f)

    drawPath(
        createCornersPath(
            left = (size.width - rectSize.width) / 2f,
            top = (size.height - rectSize.width) / 2f,
            right = (size.width - rectSize.width) / 2f + rectSize.height,
            bottom = (size.height - rectSize.width) / 2f + rectSize.width,
            cornerRadius = 40f,
            cornerLength = 40f
        ),
        color = Color.Blue,
        style = Stroke(width = 10f)
    )
}


private fun createCornersPath(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    cornerRadius: Float,
    cornerLength: Float
): Path {
    val path = Path()

    // top left
    path.moveTo(left, (top + cornerRadius))
    path.arcTo(
        Rect(left = left, top = top, right = left + cornerRadius, bottom = top + cornerRadius),
        180f,
        90f,
        true
    )

    path.moveTo(left + (cornerRadius / 2f), top)
    path.lineTo(left + (cornerRadius / 2f) + cornerLength, top)

    path.moveTo(left, top + (cornerRadius / 2f))
    path.lineTo(left, top + (cornerRadius / 2f) + cornerLength)

    // top right
    path.moveTo(right - cornerRadius, top)
    path.arcTo(
        Rect(left = right - cornerRadius, top = top, right = right, bottom = top + cornerRadius),
        270f,
        90f,
        true
    )

    path.moveTo(right - (cornerRadius / 2f), top)
    path.lineTo(right - (cornerRadius / 2f) - cornerLength, top)

    path.moveTo(right, top + (cornerRadius / 2f))
    path.lineTo(right, top + (cornerRadius / 2f) + cornerLength)

    // bottom left
    path.moveTo(left, bottom - cornerRadius)
    path.arcTo(
        Rect(left = left, top = bottom - cornerRadius, right = left+cornerRadius, bottom = bottom),
        90f,
        90f,
        true
    )

    path.moveTo(left + (cornerRadius / 2f), bottom)
    path.lineTo(left + (cornerRadius / 2f) + cornerLength, bottom)

    path.moveTo(left, bottom - (cornerRadius / 2f))
    path.lineTo(left, bottom - (cornerRadius / 2f) - cornerLength)

    // bottom right
    path.moveTo(left, bottom - cornerRadius)
    path.arcTo(
        Rect(left = right - cornerRadius, top = bottom - cornerRadius, right = right, bottom = bottom),
        0f,
        90f,
        true
    )

    path.moveTo(right - (cornerRadius / 2f), bottom)
    path.lineTo(right - (cornerRadius / 2f) - cornerLength, bottom)

    path.moveTo(right, bottom - (cornerRadius / 2f))
    path.lineTo(right, bottom - (cornerRadius / 2f) - cornerLength)

    return path
}

结果：

也许这对某人有帮助 :)

我如何在 android canvas 中只绘制矩形的角

How do i draw only corners of a rectangle in android canvas

android

paint

android-canvas