首页 > 解决方案 > 如何绘制尾部淡入透明的路径

问题描述

我正在创建一个简单的 Android 应用程序,其中有在屏幕上移动的粒子。

这些粒子当前是使用应用了 LinearGradient 着色器的油漆绘制的。这允许粒子沿着路径很好地淡化为透明,如下图所示。

https://i.imgur.com/2n0aMPG.jpg

着色器如下

trailPaint.shader = LinearGradient(
                trail[size - 1].x,
                trail[size - 1].y,
                trail[0].x,
                trail[0].y,
                trailPaint.color,
                Color.TRANSPARENT,
                Shader.TileMode.MIRROR
            )

canvas.drawPath(trailPath, trailPaint)

这里的问题是着色器的边界基于路径中最前面和最后面的点的位置,因此当粒子返回自身时,着色器不再覆盖路径的中间。可以在此处看到发生这种情况的示例:https ://i.imgur.com/obEShJ6.mp4

我也尝试用越来越透明的圆圈来绘制路径上的每个点,但这些并没有给出一条连续的路径,这同样令人不快

https://i.imgur.com/zNOMR11.jpg

trailPaint.shader = LinearGradient(
                        point.x,
                        point.y,
                        trail[index + 1].x,
                        trail[index + 1].y,
                        ColorUtils.blendARGB(colour, Color.TRANSPARENT, (1 - (index.toFloat() / size))),
                        ColorUtils.blendARGB(colour, Color.TRANSPARENT, (1 - ((index.toFloat() + 1) / size))),
                        Shader.TileMode.CLAMP
                    )

                    canvas.drawCircle(point.x, point.y, trailPaint.strokeWidth / 2, trailPaint)

我还有哪些其他选项可以提供与第一张图片类似的结果,而不会出现弹跳问题?

标签: androidkotlinandroid-canvasandroid-paint

解决方案


如果有人像我一样对解决这个问题感到震惊,我会提供一个解决方案。谢谢亚历克斯照亮了道路。我拿了你发布的内容并将路径视为一系列直线,并根据其长度和总长度中的位置计算出每条直线。这很有效,因为 LinearGradient 是线性的,所以它适用于直线。


推荐阅读