我正在创建一些自定义 Swing 组件，我希望这些组件从一种颜色渐变到另一种颜色。目前我正在从 RGB 转换为 HSB，然后通过 Hue 值递增并在绘画之前转换回 RGB，工作正常。
然而，这会循环通过所有颜色（即尝试从蓝色渐变到绿色循环通过黄色、橙色、红色等）。是否有一种体面的算法/方法可以直接从一种颜色淡入另一种颜色？
编辑：我已经通过 Swing Timer 对其进行了更新（我尽量避免使用像瘟疫这样的线程接触组件）。今天晚上我会去看看你的建议，谢谢大家！
问问题
7062 次
5 回答
5
基于这个例子，Queue<Color>下面的循环从Color.green到Color.blue到Color.green再到N = 32一步。请注意，Color.green它的数值小于Color.blueHSB 模型中的数值。另请参阅使用 HSB 的相关示例。
public Flash(JComponent component) {
this.component = component;
float gHue = Color.RGBtoHSB(0, 1, 0, null)[0];
float bHue = Color.RGBtoHSB(0, 0, 1, null)[0];
for (int i = 0; i < N; i++) {
clut.add(Color.getHSBColor(gHue + (i * (bHue - gHue) / N), 1, 1));
}
for (int i = 0; i < N; i++) {
clut.add(Color.getHSBColor(bHue - (i * (bHue - gHue) / N), 1, 1));
}
}
于 2012-11-05T00:40:52.047 回答
3
我使用多种方法来实现相同的结果。
Baiscally 我使用一个类似的 API 接口作为LinearGradientPaint，我提供一个分数数组和一个颜色数组，然后基于float百分比，我计算得到的混合颜色。
这使我能够通过相同的算法产生许多有效的结果。
虽然此示例旨在演示一系列颜色的混合，但您可以简单地提供两种颜色和两种颜色的一小{0f, 1f}部分
这也让我能够有效地制作彩色动画。
public class ColorFade {
public static void main(String[] args) {
new ColorFade();
}
public ColorFade() {
EventQueue.invokeLater(new Runnable() {
@Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException ex) {
} catch (InstantiationException ex) {
} catch (IllegalAccessException ex) {
} catch (UnsupportedLookAndFeelException ex) {
}
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new BorderLayout());
// frame.add(new FadePane());
frame.add(new ColorFadePane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class FadePane extends JPanel {
private float[] fractions = new float[]{0f, 0.25f, 0.5f, 1f};
private Color[] colors = new Color[]{Color.GREEN, Color.BLUE, Color.YELLOW, Color.RED};
private float direction = 0.05f;
private float progress = 0f;
public FadePane() {
Timer timer = new Timer(125, new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
if (progress + direction > 1f) {
direction = -0.05f;
} else if (progress + direction < 0f) {
direction = 0.05f;
}
progress += direction;
repaint();
}
});
timer.setCoalesce(true);
timer.setRepeats(true);
timer.start();
}
@Override
public Dimension getPreferredSize() {
return new Dimension(100, 100);
}
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
int width = getWidth();
int height = getHeight();
Color startColor = blendColors(fractions, colors, progress);
g2d.setColor(startColor);
g2d.fillRect(0, 0, width, height);
g2d.dispose();
}
}
public class ColorFadePane extends JPanel {
private float[] fractions = new float[]{0f, 0.25f, 0.5f, 1f};
private Color[] colors = new Color[]{Color.GREEN, Color.BLUE, Color.YELLOW, Color.RED};
public ColorFadePane() {
}
@Override
public Dimension getPreferredSize() {
return new Dimension(200, 100);
}
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
int width = getWidth();
int height = getHeight();
int bandWidth = width / 100;
for (int index = 0; index < 100; index++) {
float progress = (float)index / (float)100;
Color color = blendColors(fractions, colors, progress);
int x = bandWidth * index;
int y = 0;
g2d.setColor(color);
g2d.fillRect(x, y, bandWidth, height);
}
g2d.dispose();
}
}
public static Color blendColors(float[] fractions, Color[] colors, float progress) {
Color color = null;
if (fractions != null) {
if (colors != null) {
if (fractions.length == colors.length) {
int[] indicies = getFractionIndicies(fractions, progress);
float[] range = new float[]{fractions[indicies[0]], fractions[indicies[1]]};
Color[] colorRange = new Color[]{colors[indicies[0]], colors[indicies[1]]};
float max = range[1] - range[0];
float value = progress - range[0];
float weight = value / max;
color = blend(colorRange[0], colorRange[1], 1f - weight);
} else {
throw new IllegalArgumentException("Fractions and colours must have equal number of elements");
}
} else {
throw new IllegalArgumentException("Colours can't be null");
}
} else {
throw new IllegalArgumentException("Fractions can't be null");
}
return color;
}
public static int[] getFractionIndicies(float[] fractions, float progress) {
int[] range = new int[2];
int startPoint = 0;
while (startPoint < fractions.length && fractions[startPoint] <= progress) {
startPoint++;
}
if (startPoint >= fractions.length) {
startPoint = fractions.length - 1;
}
range[0] = startPoint - 1;
range[1] = startPoint;
return range;
}
public static Color blend(Color color1, Color color2, double ratio) {
float r = (float) ratio;
float ir = (float) 1.0 - r;
float rgb1[] = new float[3];
float rgb2[] = new float[3];
color1.getColorComponents(rgb1);
color2.getColorComponents(rgb2);
float red = rgb1[0] * r + rgb2[0] * ir;
float green = rgb1[1] * r + rgb2[1] * ir;
float blue = rgb1[2] * r + rgb2[2] * ir;
if (red < 0) {
red = 0;
} else if (red > 255) {
red = 255;
}
if (green < 0) {
green = 0;
} else if (green > 255) {
green = 255;
}
if (blue < 0) {
blue = 0;
} else if (blue > 255) {
blue = 255;
}
Color color = null;
try {
color = new Color(red, green, blue);
} catch (IllegalArgumentException exp) {
NumberFormat nf = NumberFormat.getNumberInstance();
System.out.println(nf.format(red) + "; " + nf.format(green) + "; " + nf.format(blue));
exp.printStackTrace();
}
return color;
}
}
于 2012-11-04T22:53:28.710 回答
1
提示
- 使用Swing Timer获得慢动作效果
- 将 RGB 的值递减一个数字，比如说
x
Tadaaaa .. :-)
更新：如果你愿意，你可以在x.
在执行期间使用Math.Random()函数生成伪随机值x
HovercraftFullOfEels &mKorbel，感谢您的投入
于 2012-11-04T21:30:35.447 回答
1
最简单的方法是在每个 RGB 值之间进行插值。这对所有语言都是一样的——python代码看起来像：
steps = 10
rgb1 = [ 'AA', '08', 'C3' ]
rgb2 = [ '03', '88', '1C' ]
h1 = map( lambda s: int( '0x'+s, 0 ), rgb1 )
h2 = map( lambda s: int( '0x'+s, 0 ), rgb2 )
inc = [0, 0, 0]
for i in range(0,3):
inc[i] = ( h2[i] - h1[i] ) / ( steps - 1 )
for i in range(0,steps-1):
print '<span style="background: #%02x%02x%02x"> %i </span>' % (
h1[0] + i * inc[0],
h1[1] + i * inc[1],
h1[2] + i * inc[2],
i+1 )
print '<span style="background: #%02x%02x%02x"> %i </span>' % (
h2[0], h2[1], h2[2], steps )
于 2012-11-04T22:03:19.490 回答
0
您可以线性插值从起始 rgb 颜色到您最终想要的颜色的过渡。
这意味着，例如，如果您有rgb(255,255,0)作为起始颜色和rgb(50,50,50)作为目标的颜色，并且您希望在 5 个步骤中达到最终颜色，那么您将(-41 = (255-50)/5, -41, 10)在每一步中适应导致以下颜色：
rgb(255,255, 0)
rgb(214,214, 10)
rgb(173,173, 20)
rgb(132,132, 30)
rgb( 91, 91, 40)
rgb( 50, 50, 50)
这被称为线性渐变，并且很容易实现，但当然还有各种其他技术可以在颜色之间进行良好的过渡。
于 2012-11-04T21:32:49.930 回答