主页 / 问题 / 1605871
Accepted
Sirop4ik
Asked:2025-01-30 02:59:49 +0800 CST2025-01-30 02:59:49 +0800 CST

如何使画布背景模糊？

  • 772

有这样一个图标

在此处输入图片描述

它画得像这样：

    @Composable
    private fun IconWithCircleBackground(
        @DrawableRes res: Int,
        modifier: Modifier = Modifier,
        radius: Dp = 16.dp,
        strokeColor: Color = ColorTokens.grey_10,
        strokeWidth: Dp = 1.dp,
        backgroundColor: Color = Color.Black,
        backgroundAlpha: Float = 0.7f
    ) {
        Box(modifier = modifier.size(radius)) {
            Canvas(modifier = Modifier.size(radius)) {
                drawCircle(
                    color = backgroundColor.copy(alpha = backgroundAlpha),
                    radius = radius.toPx() - strokeWidth.toPx() / 2
                )

                drawCircle(
                    color = strokeColor,
                    radius = radius.toPx(),
                    style = Stroke(width = strokeWidth.toPx())
                )
            }

            Image(
                painter = painterResource(id = res),
                contentDescription = stringResource(id = ...)
            )
        }
    }

即Canvas在其上第一层绘制一个以黑色（+alpha）填充的圆圈作为背景，第二层绘制一条白线作为边框并且图标位于中心。

您需要制作第一层（黑色背景），以使其模糊。问题——这里如何应用模糊？

android

2 个回答

  1. 根据 进行模糊RenderScript，半径设置模糊深度：

        Bitmap bm_out = Bitmap.createBitmap( bm_in );
    RenderScript rs = RenderScript.create(context);
    ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
    Allocation alloc_in = Allocation.createFromBitmap(rs, bm_in);
    Allocation alloc_out = Allocation.createFromBitmap(rs, bm_out );
    theIntrinsic.setRadius( radius );
    theIntrinsic.setInput(alloc_in);
    theIntrinsic.forEach(alloc_out);
    alloc_out.copyTo( bm_out );

    更原始的选择是简单地将原始尺寸缩小Bitmap8-16 倍，然后“拉伸”它canvas。

    • 1
  2. Best Answer

    最后我这样做了（剧透 - 模糊并没有帮助我做我想做的事，我想要的仍然是玻璃态的，但也许它对某些人有用）

        @Composable
    private fun IconWithCircleBackground(
        @DrawableRes res: Int,
        modifier: Modifier = Modifier,
        radius: Dp = 32.dp,
        strokeColor: Color = ColorTokens.grey_10,
        strokeWidth: Dp = 2.dp,
        backgroundColor: Color = Color.Black,
        backgroundAlpha: Float = 0.8f
    ) {
        Box(
            modifier = modifier
                .size(radius)
                .clip(CircleShape)
        ) {
            // Background
            Image(
                modifier = modifier
                    .fillMaxSize()
                    .blur(radius = 10.dp)
                ,
                bitmap = coloredBitmap(color = backgroundColor, alpha = backgroundAlpha).asImageBitmap(),
                contentDescription = null
            )

            // Stroke
            Canvas(modifier = Modifier.matchParentSize()) {
                drawCircle(
                    color = strokeColor,
                    radius = size.minDimension / 2,
                    style = Stroke(width = strokeWidth.toPx())
                )
            }

            Image(
                modifier = Modifier.align(Alignment.Center),
                painter = painterResource(id = res),
                contentDescription = stringResource(id = ...)
            )
        }
    }

    想法是，有这样一个修改器blur(radius = 10.dp)，但它不能应用于drawCircle，所以我创建一个位图，将其插入到Image，然后通过修改器Image应用它。blur

    • 0

相关问题