图像处理------颜色梯度变化 (Color Gradient)

有过UI设计经验的一定对2D图形渲染中的Color Gradient 或多或少有些接触，很多编程

语言也提供了Gradient的接口，但是想知道它是怎么实现的嘛？

本文介绍三种简单的颜色梯度变化算法，就可以很容易实现常见的梯度变化算法

三种都要求提供两个参数即起始颜色RGB值, 最终颜色RGB的值。

垂直梯度颜色变化，效果如下：

水平梯度颜色变化，效果如下：

水平与垂直两个方向叠加梯度变化效果如下：

算法代码及其解释

 

计算起始颜色和终点颜色RGB之间差值代码如下：

float rr = startColor[0] - endColor[0];

float gg = startColor[1] - endColor[1];

float bb = startColor[2] - endColor[2];

实现垂直梯度变化的代码如下：

r = endColor[0] + (int)(rr * ((float)row/255.0f) +0.5f);

g = endColor[1] + (int)(gg * ((float)row/255.0f) +0.5f);

b = endColor[2] + (int)(bb * ((float)row/255.0f) +0.5f);

实现水平梯度变化代码如下：

// set gradient color valuefor each pixel

r = endColor[0] + (int)(rr * ((float)col/255.0f) +0.5f);

g = endColor[1] + (int)(gg * ((float)col/255.0f) + 0.5f);

b = endColor[2] + (int)(bb * ((float)col/255.0f) +0.5f);

实现水平和垂直两个方向上Gradient叠加代码如下：

r = endColor[0] + (int)(rr * (((float)col * (float)row)/size) +0.5f);

g = endColor[1] + (int)(gg * (((float)col * (float)row)/size) +0.5f);

b = endColor[2] + (int)(bb * (((float)col * (float)row)/size) +0.5f);

程序对上面三种Gradient方法分别放在三个不同的方法中，根据参数调用。

程序的完全Java源代码如下：

[java] view plaincopy

1. import java.awt.BorderLayout;
2. import java.awt.Dimension;
3. import java.awt.Graphics;
4. import java.awt.Graphics2D;
5. import java.awt.RenderingHints;
6. import java.awt.image.BufferedImage;
7. import javax.swing.JComponent;
8. import javax.swing.JFrame;
9. public class ColorGradientDemo extends JComponent {
10. /**
11. *
12. */
13. private static final long serialVersionUID = -4134440495899912869L;
14. private BufferedImage image = null;
15. protected void paintComponent(Graphics g) {
16. Graphics2D g2 = (Graphics2D)g;
17. g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
18. g2.drawImage(getImage(4), 5, 5, image.getWidth(), image.getHeight(), null);
19. }
20. public BufferedImage getImage(int type) {
21. if(image == null) {
22. image = new BufferedImage(256, 256, BufferedImage.TYPE_INT_ARGB);
23. int[] rgbData = new int[256*256];
24. if(type == 1) {
25. generateVGradientImage(rgbData);
26. } else if(type == 2) {
27. generateHGradientImage(rgbData);
28. } else {
29. generateHVGradientImage(rgbData);
30. }
31. setRGB(image, 0, 0, 256, 256, rgbData);
32. }
33. return image;
34. }
35. private void generateVGradientImage(int[] rgbData) {
36. int[] startColor = getStartColor();
37. int[] endColor = getEndColor();
38. float rr = startColor[0] - endColor[0];
39. float gg = startColor[1] - endColor[1];
40. float bb = startColor[2] - endColor[2];
41. int a=255;
42. int r=0, g=0, b=0;
43. int index = 0;
44. for(int row=0; row<256; row++) {
45. for(int col=0; col<256; col++) {
46. // set random color value for each pixel
47. // set gradient color value for each pixel
48. r = endColor[0] + (int)(rr * ((float)row/255.0f) + 0.5f);
49. g = endColor[1] + (int)(gg * ((float)row/255.0f) + 0.5f);
50. b = endColor[2] + (int)(bb * ((float)row/255.0f) + 0.5f);
51. rgbData[index] = ((a & 0xff) << 24) |
52. ((r & 0xff) << 16)  |
53. ((g & 0xff) << 8)   |
54. ((b & 0xff));
55. index++;
56. }
57. }
58. }
59. private void generateHGradientImage(int[] rgbData) {
60. int[] startColor = getStartColor();
61. int[] endColor = getEndColor();
62. float rr = startColor[0] - endColor[0];
63. float gg = startColor[1] - endColor[1];
64. float bb = startColor[2] - endColor[2];
65. int a=255;
66. int r=0, g=0, b=0;
67. int index = 0;
68. for(int row=0; row<256; row++) {
69. for(int col=0; col<256; col++) {
70. // set gradient color value for each pixel
71. r = endColor[0] + (int)(rr * ((float)col/255.0f) + 0.5f);
72. g = endColor[1] + (int)(gg * ((float)col/255.0f) + 0.5f);
73. b = endColor[2] + (int)(bb * ((float)col/255.0f) + 0.5f);
74. rgbData[index] = ((a & 0xff) << 24) |
75. ((r & 0xff) << 16)  |
76. ((g & 0xff) << 8)   |
77. ((b & 0xff));
78. index++;
79. }
80. }
81. }
82. private void generateHVGradientImage(int[] rgbData) {
83. int[] startColor = getStartColor();
84. int[] endColor = getEndColor();
85. float rr = startColor[0] - endColor[0];
86. float gg = startColor[1] - endColor[1];
87. float bb = startColor[2] - endColor[2];
88. int a=255;
89. int r=0, g=0, b=0;
90. int index = 0;
91. float size = (float)Math.pow(255.0d, 2.0);
92. for(int row=0; row<256; row++) {
93. for(int col=0; col<256; col++) {
94. // set random color value for each pixel
95. r = endColor[0] + (int)(rr * (((float)col * (float)row)/size) + 0.5f);
96. g = endColor[1] + (int)(gg * (((float)col * (float)row)/size) + 0.5f);
97. b = endColor[2] + (int)(bb * (((float)col * (float)row)/size) + 0.5f);
98. rgbData[index] = ((a & 0xff) << 24) |
99. ((r & 0xff) << 16)  |
100. ((g & 0xff) << 8)   |
101. ((b & 0xff));
102. index++;
103. }
104. }
105. }
106. public int[] getStartColor() {
107. return new int[]{246,53,138};
108. }
109. public int[] getEndColor() {
110. return new int[]{0,255,255};
111. }
112. public void setRGB( BufferedImage image, int x, int y, int width, int height, int[] pixels ) {
113. int type = image.getType();
114. if ( type == BufferedImage.TYPE_INT_ARGB || type == BufferedImage.TYPE_INT_RGB )
115. image.getRaster().setDataElements( x, y, width, height, pixels );
116. else
117. image.setRGB( x, y, width, height, pixels, 0, width );
118. }
119. public static void main(String[] args) {
120. JFrame frame = new JFrame("Gradient Color Panel");
121. frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
122. frame.getContentPane().setLayout(new BorderLayout());
123. // Display the window.
124. frame.getContentPane().add(new ColorGradientDemo(), BorderLayout.CENTER);
125. frame.setPreferredSize(new Dimension(280,305));
126. frame.pack();
127. frame.setVisible(true);
128. }
129. }