如何使用 Jetpack Compose Canvas 绘制带有描边和霓虹灯发光的正方形？

Question

我需要绘制一个圆角正方形，类似于drawRoundRect，但只有轮廓。

像这样的东西。

该图像是手工绘制的，正如我所说，我需要它看起来像drawRoundRect但没有轮廓（我不希望它看起来是手绘的）

如果你看到它，这条线有这样的渐变：红色 -> 白色 -> 红色

我需要同样的渐变。如果有人有想法或解决方案，我将不胜感激。

Answer 1

你可以这样画

Column(modifier = Modifier
    .fillMaxSize()
    .background(Color.Black)) {
    val gradient = Brush.radialGradient(
        listOf(Color.Red.copy(.3f), Color.Red, Color.Red.copy(.3f)),
        center = Offset(300f,300f),
        radius = 500f
    )

    Canvas(modifier = Modifier.fillMaxSize()) {
        drawRoundRect(
            gradient,
            topLeft = Offset(100f, 100f),
            size = Size(400f, 400f),
            cornerRadius = CornerRadius(5.dp.toPx(), 5.dp.toPx()),
            style = Stroke(width = 6.dp.toPx())
        )
        drawRoundRect(
            Color.White,
            topLeft = Offset(100f, 100f),
            size = Size(400f, 400f),
            cornerRadius = CornerRadius(5.dp.toPx(), 5.dp.toPx()),
            style = Stroke(width = 2.dp.toPx())
        )
    }
}

这个会更好看

@Composable
private fun NeonSample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
    ) {

        val paint = remember {
            Paint().apply {
                style = PaintingStyle.Stroke
                strokeWidth = 30f
            }
        }

        val frameworkPaint = remember {
            paint.asFrameworkPaint()
        }

        val color = Color.Red


        Canvas(modifier = Modifier.fillMaxSize()) {
            this.drawIntoCanvas {

                val transparent = color
                    .copy(alpha = 0f)
                    .toArgb()

                frameworkPaint.color = transparent

                frameworkPaint.setShadowLayer(
                    10f,
                    0f,
                    0f,
                    color
                        .copy(alpha = .5f)
                        .toArgb()
                )

                it.drawRoundRect(
                    left = 100f,
                    top = 100f,
                    right = 500f,
                    bottom = 500f,
                    radiusX = 5.dp.toPx(),
                    5.dp.toPx(),
                    paint = paint
                )

                drawRoundRect(
                    Color.White,
                    topLeft = Offset(100f, 100f),
                    size = Size(400f, 400f),
                    cornerRadius = CornerRadius(5.dp.toPx(), 5.dp.toPx()),
                    style = Stroke(width = 2.dp.toPx())
                )


                frameworkPaint.setShadowLayer(
                    30f,
                    0f,
                    0f,
                    color
                        .copy(alpha = .5f)
                        .toArgb()
                )


                it.drawRoundRect(
                    left = 600f,
                    top = 100f,
                    right = 1000f,
                    bottom = 500f,
                    radiusX = 5.dp.toPx(),
                    5.dp.toPx(),
                    paint = paint
                )

                drawRoundRect(
                    Color.White,
                    topLeft = Offset(600f, 100f),
                    size = Size(400f, 400f),
                    cornerRadius = CornerRadius(5.dp.toPx(), 5.dp.toPx()),
                    style = Stroke(width = 2.dp.toPx())
                )
            }
        }
    }
}

编辑

全尺寸圆角矩形。如果您不想为画布添加填充，可以删除插图

@Composable
private fun NeonSample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
    ) {

        val paint = remember {
            Paint().apply {
                style = PaintingStyle.Stroke
                strokeWidth = 30f
            }
        }

        val frameworkPaint = remember {
            paint.asFrameworkPaint()
        }

        val color = Color.Red

        val transparent = color
            .copy(alpha = 0f)
            .toArgb()

        frameworkPaint.color = transparent

        frameworkPaint.setShadowLayer(
            10f,
            0f,
            0f,
            color
                .copy(alpha = .5f)
                .toArgb()
        )


        Canvas(modifier = Modifier.fillMaxSize()) {
           inset(10.dp.toPx()){
               this.drawIntoCanvas {
                   it.drawRoundRect(
                       left = 0f,
                       top = 0f,
                       right = size.width,
                       bottom = size.height,
                       radiusX = 5.dp.toPx(),
                       5.dp.toPx(),
                       paint = paint
                   )

                   drawRoundRect(
                       Color.White,
                       cornerRadius = CornerRadius(5.dp.toPx(), 5.dp.toPx()),
                       style = Stroke(width = 2.dp.toPx())
                   )
               }
           }
        }
    }
}