Android Jetpack Compose 中的文本渐变

Posted 2023-04-18

【中文标题】Android Jetpack Compose 中的文本渐变

【英文标题】：Text Gradient in Android Jetpack Compose

【发布时间】：2021-01-19 23:59:29

【问题描述】：

不知道如何将渐变添加到带有内阴影的文本中Jetpack Compose 中的修饰符。 有这样的东西？有什么想法吗？

【参考方案1】：

到目前为止，jetpack compose 不提供开箱即用的文本渐变和内部阴影。 因此需要自己画：

@Composable
fun drawGradientText(name: String, modifier: Modifier = Modifier) 

    val paint = Paint().asFrameworkPaint()

    val gradientShader: Shader = LinearGradientShader(
        from = Offset(0f, 0f),
        to = Offset(0f, 400f),
        listOf(Color.Blue, Color.Cyan)
    )

    Canvas(modifier.fillMaxSize()) 
        paint.apply 
            isAntiAlias = true
            textSize = 400f
            typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
            style = android.graphics.Paint.Style.FILL
            color = android.graphics.Color.parseColor("#cdcdcd")
            xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OVER)
            maskFilter = BlurMaskFilter(30f, Blur.NORMAL)
        
        drawIntoCanvas  canvas ->
            canvas.save()
            canvas.nativeCanvas.translate(2f, 5f)
            canvas.nativeCanvas.drawText(name, 0f, 400f, paint)
            canvas.restore()
            paint.shader = gradientShader
            paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
            paint.maskFilter = null
            canvas.nativeCanvas.drawText(name, 0f, 400f, paint)
            canvas.nativeCanvas.translate(2f, 5f)
            paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OVER)
            paint.maskFilter = BlurMaskFilter(30f, Blur.NORMAL)
            canvas.nativeCanvas.drawText(name, 0f, 400f, paint)
        
        paint.reset()
    

您可以调整 PorterDuff 模式和偏移量以满足您的要求。

【讨论】：

你能帮忙解决这个问题吗？ ***.com/questions/68996525/…

【参考方案2】：

刚刚遇到了相同的用例，但只是为了在文本上进行简单的渐变。把它贴在这里以防它对某人有帮助。

对我有用的是绘制内容，然后通过Modifier.graphicsLayer 绘制渐变（从this Slack 上的答案推断）：

Text(
   text = "$ 20",
   /** size/font style, etc. **/
   modifier = Modifier.graphicsLayer(alpha = 0.99f)
     .drawWithCache 
        val brush = Brush.horizontalGradient(listOf(StartColor, EndColor))
        onDrawWithContent 
            drawContent()
            drawRect(brush, blendMode = BlendMode.SrcAtop)
        
     
)

我最终将其设为 Modifier 以供重复使用：

fun Modifier.textBrush(brush: Brush) = this
   .graphicsLayer(alpha = 0.99f)
   .drawWithCache 
      onDrawWithContent 
         drawContent()
         drawRect(brush, blendMode = BlendMode.SrcAtop)
      
   

示例结果：