沿路径使用渐变

我正在尝试使用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,但是它们给出了统一的模糊效果,而不是从不透明到透明的过渡。 有谁知道这是可能的吗?


如何使用软刷位图进行绘制? 使用像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);}

使用的画笔是(它在那里): 最终的结果是: 最后结果


结果发现有一个愚蠢的明显的做法。 只需重新使用相同的路径,并调整每个绘图遍的笔触宽度和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);行来实验一下int alpha = (int) (i / numberOfPasses * 125f); (注意改为125f而不是255f)会有所帮助。

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


  • 如果我理解正确的话,你想要做的是让渐变有效地形成中风的“刷子”。

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

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

    当时我个人试图做的是创建一些半圆,其中路径是一种霓虹辉光,而不是平坦的颜色。 就Android API和SVG标准而言,似乎唯一的方法就是创建一个在圆上完美居中的径向渐变,并在恰当的位置放置一系列色块。 做起来相当棘手,我当然不知道你会如何做到像广场那样的形状。

    对不起,这是一个'我不能做',而不是一个有用的答案! 随着我渴望了解一种“软笔刷”效果的解决方案,我会对此感兴趣。

    链接地址: http://www.djcxy.com/p/71071.html

    上一篇: Using a gradient along a path

    下一篇: Internet Explorer CSS gradient handling