【问题标题】:Sweep Gradient : What it is and its examples扫描梯度:它是什么以及它的例子
【发布时间】:2017-07-04 18:17:55
【问题描述】:

我遇到了Sweep Gradient on Android,我很想知道它是否可以让我更好地控制颜色间距和过渡。快速搜索了一下,几乎一无所获!!

我找到的仅有的几篇参考文献(它们符合甚至接近于正确或全面地解释它的标准)如下所列:

差不多就是这样。其他的则相似或简短。


到目前为止我得出的结论很少(而且可能是错误的):

  • 扫描渐变主要用于
  • 它们用于与 Angular sweep 类似的事务(不确定这个),它谈论的事务类似于时钟指针的扫掠。
  • 非常类似于线性渐变。对于它们之间的区别,我唯一能想到的就是用法(例如 Rings)。
  • Sweep 处理 Center(再次强烈参考时钟理论)

我知道人们可能认为这不是一个真正的技术问题。但对我来说,要使用 Sweep Gradients 或至少知道它们的含义,描述必须来自某个地方。并且请提供一些关于在 Rings 以外的情况下使用 Sweep 的示例的答案。

【问题讨论】:

  • better control over the Color spacing and transitions 是什么意思?你有什么具体的目标吗?
  • Android 开发者指定 SweepGradient API 为 SweepGradient (float cx, float cy, int[] colors, float[] positions) 其中 positions (float):colors 数组中每个对应颜色的相对位置,从 0 开始,以 1.0 结束。如果这些值不是单调的,则绘图可能会产生意想不到的结果。如果位置为 NULL,则颜色会自动均匀分布。这让我对过渡等产生了怀疑。
  • 至于任何特定的目标,没有。这更多是出于好奇和学习,因为我真的找不到扫描梯度的任何好的检查。谁知道呢,因为我真的不知道它实际上做了什么,所以当这是一个更好的选择时,我可能在不知不觉中使用了其他东西。

标签: android drawable gradient sweepgradient


【解决方案1】:

渐变一词在此上下文中(如在许多图形编辑器中,包括 Photoshop)指的是多种颜色之间的平滑过渡,而不是仅使用一种颜色填满一个区域。

Android API 提供 3 种不同的渐变:LinearGradientRadialGradientSweepGradient

这些都是Shader 的子类。您可以在Paint 对象上设置Shader,然后使用该Paint 绘制任何形状。根据渐变的类型,形状将填充颜色和它们之间的过渡。

例如:

可以使用以下代码生成此图像:

Bitmap test = Bitmap.createBitmap(640, 200, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(test);
{ // draw a dark gray background
    Paint backgroundPaint = new Paint();
    backgroundPaint.setARGB(255, 24, 24, 24);
    c.drawPaint(backgroundPaint);
}
Path heart = new Path();
{ // prepare a heart shape
    heart.moveTo(110, 175);
    heart.lineTo(10, 75);
    RectF leftCircle = new RectF(10, 25, 110, 125);
    heart.arcTo(leftCircle, 180, 180);
    RectF rightCircle = new RectF(110, 25, 210, 125);
    heart.arcTo(rightCircle, 180, 180);
    heart.close();
}
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextSize(18f);
int[] colors = {
        0xFFFFFF88, // yellow
        0xFF0088FF, // blue
        0xFF000000, // black
        0xFFFFFF88  // yellow
};
float[] positions = {0.0f, 0.33f, 0.66f, 1.0f};
{ // draw the left heart
    SweepGradient sweepGradient;
    { // initialize the sweep gradient
        sweepGradient = new SweepGradient(50, 50, colors, positions);
        paint.setShader(sweepGradient);
    }
    c.drawPath(heart, paint);
    c.drawText("SweepGradient", 50, 190, paint);
}
{ // draw the middle heart
    LinearGradient linearGradient;
    { // initialize a linear gradient
        linearGradient = new LinearGradient(250, 0, 350, 150, colors, positions, Shader.TileMode.CLAMP);
        paint.setShader(linearGradient);
    }
    heart.offset(210, 0); // move the heart shape to the middle
    c.drawPath(heart, paint);
    c.drawText("LinearGradient", 260, 190, paint);
}
{ // draw the right heart
    RadialGradient radialGradient;
    { // initialize a linear gradient
        radialGradient = new RadialGradient(550, 50, 100, colors, positions, Shader.TileMode.CLAMP);
        paint.setShader(radialGradient);
    }
    heart.offset(210, 0); // move the heart shape to the right
    c.drawPath(heart, paint);
    c.drawText("RadialGradient", 470, 190, paint);
}
{ // save the bitmap
    String filename = Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "test.png";
    FileOutputStream out = null;
    try {
        out = new FileOutputStream(filename);
        test.compress(Bitmap.CompressFormat.PNG, 90, out);
    } catch (Exception e) {
    } finally {
        try {
            out.close();
        } catch (Exception e) {
        }
    }
}
  • 所以 LinearGradient 在 Photoshop 中是 Linear GradientRadialGradientRadial GradientSweepGradientAngular Gradient,如您在第三个参考中所述。我建议首先在图像编辑器中尝试这些(所有流行的图像编辑器都有这些工具),您很快就会了解它们的工作原理。

  • 您也可以在 XML drawable 中使用这些渐变(就像在您的第 4 次参考中一样),但最多只能使用 3 种颜色。

  • SweepGradient 中,提供位置时,0.0 点在 3 点钟方向,顺时针方向(0.25 在 6 点钟方向,0.5 在 9 点钟方向,0.75 在 12 点钟方向)时钟,3 点钟返回 1.0)。

关于你的结论:

  • 如您所见,任何形状都可以用SweepGradient 绘制,而不仅仅是一个环。在上面的例子中,即使是标签也是用渐变绘制的。
  • 是的,时钟的指针类比恰到好处。
  • 在用法上,SweepGradientLinearGradient 非常相似,只是您不需要提供TileMode,因为您不能超出颜色列表的范围。
  • 是的,您需要提供中心点的坐标。

我希望这能解决问题。

【讨论】:

  • 谢谢哥们的例子解释。所以基本上,时钟类比完美地描述了扫描梯度吗?
  • @KaushikNP - 是的。
【解决方案2】:

对于xml drawable,可以用

指定
android:type="sweep"

android:type 可以有值(区分大小写)linearradialsweep

【讨论】:

  • 这如何回答 OP 的问题?
  • 这增加了已经写得很漂亮的公认答案。
猜你喜欢
  • 1970-01-01
  • 2018-12-21
  • 2020-08-06
  • 2022-08-13
  • 1970-01-01
  • 1970-01-01
  • 2023-03-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多