Question

我希望使用Android的Canvas：

绘制这样的渐变

在水平方向上有两种颜色（红色和蓝色）的渐变。然后在垂直方向上有一个透明度梯度（允许红色和蓝色显示）为空（没有所有颜色？）。

我在SO here上找到了这个与我想要的接近的链接。但我无法弄清楚如何使底部透明。

如何在Android中实现这一目标？

Answer 1

那种＆＃34;定制＆＃34;渐变有时候会很烦人。为了使它尽可能无痛，你可以使用专门准备的可绘制资源。

使用drawable可以通过两种主要方式实现这一目标：

使用两个线性渐变
使用两个径向渐变

第一种方法可以像这样实施：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="315"
                android:centerColor="#4DFC0A00"
                android:endColor="#00FC0A00"
                android:startColor="#FC0A00" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="225"
                android:centerColor="#4D5E17FD"
                android:endColor="#005E17FD"
                android:startColor="#5E17FD" />
        </shape>
    </item>
</layer-list>

它看起来像这样（在白色背景上呈现）：

您仍然可以为这些渐变抽取centerX和centerY值（默认值为0.5）

第二种方法可以像这样实施：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:centerX="0"
                android:centerY="0"
                android:gradientRadius="@dimen/gradient_width"
                android:endColor="#00FC0A00"
                android:centerColor="#80FC0A00"
                android:startColor="#FC0A00"
                android:type="radial" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:centerX="1"
                android:centerY="0"
                android:gradientRadius="@dimen/gradient_width"
                android:endColor="#005E17FD"
                android:centerColor="#805E17FD"
                android:startColor="#5E17FD"
                android:type="radial" />
        </shape>
    </item>
</layer-list>

它看起来像这样（在白色背景上呈现）：

第二种方法的一个缺点是你需要知道你的渐变宽度来设置gradientRadius。

您也不能将gradientRadius设置为全宽，而是将其设置为75％。它会给它一个很好的重叠，但不会太多。

Answer 2

Here's如何使用C ++在Skia中绘制它。 Android上的Java中的等效项应该非常相似。

SkColor colors[] = { SK_ColorRED, SK_ColorBLUE };
SkPoint horz[] = { { 0, 0 }, { 256, 0 } };
SkPaint paint;
paint.setShader(SkGradientShader::MakeLinear(horz, colors, nullptr, 2,
        SkShader::kClamp_TileMode));
canvas->drawPaint(paint);
paint.setBlendMode(SkBlendMode::kDstIn);
SkColor alphas[] = { SK_ColorBLACK, SK_ColorTRANSPARENT };
SkPoint vert[] = { { 0, 0 }, { 0, 256 } };
paint.setShader(SkGradientShader::MakeLinear(vert, alphas, nullptr, 2,
        SkShader::kClamp_TileMode));
canvas->drawPaint(paint);

gradient with fade

Android：如何绘制二维渐变

2 个答案: