沿路径使用渐变

Question

我正在尝试使用 Android Path 类创建“发光”效果。然而，渐变并没有被扭曲以适应路径。相反，它只是显示在它的“上方”并剪切到路径的笔画。使用方形路径，下图显示了我的意思：

相反，它应该看起来更像这样：

换句话说，渐变遵循路径，特别是根据半径设置围绕拐角在 CornerPathEffect 中。

这是代码的相关部分：

paint = new Paint();
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(20);
paint.setAntiAlias(true);
LinearGradient gradient = new LinearGradient(30, 0, 50, 0,
    new int[] {0x00000000, 0xFF0000FF, 0x00000000}, null, Shader.TileMode.MIRROR);
paint.setShader(gradient);
PathEffect cornerEffect = new CornerPathEffect(10);
paint.setPathEffect(cornerEffect);
canvas.drawPath(boxPath, paint);

有什么想法吗？

---

另一种选择是在定义笔划宽度时获得“软边画笔”效果。我尝试过 BlurMaskFilters，但它们提供了均匀的模糊，而不是从不透明到透明的过渡。有谁知道这是否可能？

Answer 1

用软笔刷位图绘制怎么样？使用 Photoshop 等图像编辑软件制作不透明度径向向外减小的柔软圆形画笔。保存为可绘制对象，将其加载到位图中，然后沿路径均匀地绘制它。用白色画笔制作位图。这样您就可以使用 PorterDuffColorFilter 将给定颜色（此处为蓝色）简单地乘以位图。

brush1=BitmapFactory.decodeResource(getResources(), R.drawable.brush_custom_one);
//This contains radially decreasing opacity brush
porter_paint.setColorFilter(new PorterDuffColorFilter(paint.getColor(), Mode.MULTIPLY));
for (int i=1;i<matrix.size();i++) {
//matrix contains evenly spaced points along path 
Point point = matrix.get(matrix.get(i));
canvas.drawBitmap(brush1, point.x,point.y, porter_paint);}

使用的画笔是（就在那里）：
最终结果为：

Answer 2

事实证明，有一种愚蠢而明显的方法可以做到这一点。只需重复使用相同的路径，并在每个绘图通道上调整描边宽度和 Alpha。示例代码：

float numberOfPasses = 20;
float maxWidth = 15;
for (float i = 0; i <= numberOfPasses; i++){
    int alpha = (int) (i / numberOfPasses * 255f);
    float width = maxWidth * (1 - i / numberOfPasses);

    paint.setARGB(alpha, 0, 0, 255);
    paint.setStrokeWidth(width);
    canvas.drawPath(path, paint);
}

请参阅下面的结果示例。左侧路径是使用此方法绘制的，为了进行比较，右侧路径是使用 maxWidth 和 255 alpha 在单笔划中绘制的。

这主要有效。有两个问题：

• 渐变并不像应有的那样平滑。这是因为每一次绘制都会覆盖前一次，导致 alpha 建立得太快，在最后一次绘制之前就达到 255。尝试一下 int alpha = (int) (i / numberOfPasses * 125f); 行（注意更改为 125f 而不是 255f）会有所帮助。

• 路径看起来像是在拐角内侧被“切割”的。可能是应用了 CornerPathEffect 的一些结果。

Answer 3

如果我理解正确的话，你想要做的就是让渐变有效地形成笔划的“画笔”。

这正是我最近想要实现的目标，但据我所知，API 没有提供任何直接的方法来实现这一目标。我最近创建了一个 SVG 到 Android Canvas 转换器类，因此我最近也在 Inkscape 中进行了大量工作。所以，当我研究它时，我想知道是否可以在 Inkscape 中做到这一点。然而，即使在 Inkscape 中，这也是一件非常重要的事情。经过一番搜索，我最终发现了这张沿路径应用渐变的图像，以及下面教程的下载链接：

http://www.flickr.com/photos/35772571@N03/3312087295/

当时我个人想做的是创建一些半圆，其中路径是一种霓虹灯的光芒，而不是单一的颜色。就 Android API 和 SVG 标准而言，似乎唯一的方法就是创建一个完全以圆为中心的径向渐变，并将一系列颜色停止点放置在正确的位置。做起来相当棘手，我当然不知道如何制作像正方形这样的形状。

抱歉，这有点像“我也做不到”，而不是一个有用的答案！我将饶有兴趣地关注这一点，因为我也渴望知道一种“软刷”效果的解决方案。

Answer 4

绘制渐变比沿着路径绘制要复杂得多。
所以我建议你使用一些已经完成的库而不是为你制作它。
其中之一可以是 Sc-Gauges。

有一些有用的课程可以用来实现你的目标。

首先包含库：

dependencies {
    ...
    compile 'com.github.paroca72:sc-gauges:3.0.7'
}

在创建图像或您想要的画布后绘制：

<ImageView
      android:id="@+id/image"
      android:layout_width="match_parent"
      android:layout_height="match_parent" 
/>

现在是代码：

    // Dimensions
    int padding = 24;
    Rect drawArea = new Rect(padding, padding, 700 - padding, 500 - padding);

    // Get the main layout
    ImageView imageContainer = (ImageView) this.findViewById(R.id.image);
    assert imageContainer != null;

    // Create a bitmap and link a canvas
    Bitmap bitmap = Bitmap.createBitmap(
            drawArea.width() + padding * 2, drawArea.height() + padding * 2,
            Bitmap.Config.ARGB_8888
    );
    Canvas canvas = new Canvas(bitmap);
    canvas.drawColor(Color.parseColor("#f5f5f5"));

    // Create the path building a bezier curve from the left-top to the right-bottom angles of
    // the drawing area.
    Path path = new Path();
    path.moveTo(drawArea.left, drawArea.top);
    path.quadTo(drawArea.centerX(), drawArea.top, drawArea.centerX(), drawArea.centerY());
    path.quadTo(drawArea.centerX(), drawArea.bottom, drawArea.right, drawArea.bottom);

    // Feature
    ScCopier copier = new ScCopier();
    copier.setPath(path);
    copier.setColors(Color.RED, Color.GREEN, Color.BLUE);
    copier.setWidths(20);
    copier.draw(canvas);

    // Add the bitmap to the container
    imageContainer.setImageBitmap(bitmap);

结果是：

代码的第一部分仅用于创建绘制的位图。
您感兴趣的是使用 ScCopier 的第二部分。
只需给出路径、颜色和符号即可。

请注意，您在视图内时可以使用 onDraw 直接在视图画布上绘制。

该库可用于创建各种类型的仪表。
如果您想看看这个网站 ScComponents 有一些免费的非仪表组件。