沿路径使用渐变

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 等图像编辑软件制作一个不透明度向外径向减小的软圆形画笔。另存为drawable，将其加载到位图中并沿路径均匀地绘制。用白色画笔制作位图。这样，您可以使用 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有一些免费的而不是仪表组件。