如何从径向渐变计算颜色

Question

不久前，我从Piotr Adams那里找到了这个很棒的颜色选择器，我再也找不到了，但它仍然在这个页面上：https://www.programcreek.com/java-api-examples/index.php?source_dir=Random-Penis-master/app/src/main/java/com/osacky/penis/picker/ColorPicker.java

我在应用程序中使用此颜色选择器的主要原因是，我希望能够根据颜色在径向渐变上放置指针。该库计算某种颜色的位置，这意味着将选取器放置在正确的位置非常快速和容易。

问题是我不太明白它是如何工作的。我现在想生成一个具有不同颜色的径向渐变。但是当我生成具有不同颜色的径向渐变时，它使用的逻辑不起作用。

以下是生成径向渐变的代码：

private Bitmap createColorWheelBitmap(int width, int height) {
Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
int colorCount = 12;
int colorAngleStep = 360 / 12;
int colors[] = new int[colorCount + 1];
float hsv[] = new float[]{0f, 1f, 1f};
for (int i = 0; i < colors.length; i++) {
hsv[0] = (i * colorAngleStep + 180) % 360;
colors[i] = Color.HSVToColor(hsv);
}
colors[colorCount] = colors[0];
SweepGradient sweepGradient = new SweepGradient(width / 2, height / 2, colors, null);
RadialGradient radialGradient = new RadialGradient(width / 2, height / 2, colorWheelRadius, 0xFFFFFFFF, 0x00FFFFFF, TileMode.CLAMP);
ComposeShader composeShader = new ComposeShader(sweepGradient, radialGradient, PorterDuff.Mode.SRC_OVER);
colorWheelPaint.setShader(composeShader);
Canvas canvas = new Canvas(bitmap);
canvas.drawCircle(width / 2, height / 2, colorWheelRadius, colorWheelPaint);
return bitmap;
}

用于侦听选取器变化的代码，因此这会根据位置计算颜色：

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
int x = (int) event.getX();
int y = (int) event.getY();
int cx = x - getWidth() / 2;
int cy = y - getHeight() / 2;
double d = Math.sqrt(cx * cx + cy * cy);
if (d <= colorWheelRadius) {
colorHSV[0] = (float) (Math.toDegrees(Math.atan2(cy, cx)) + 180f);
colorHSV[1] = Math.max(0f, Math.min(1f, (float) (d / colorWheelRadius)));
selectedPointer.setColor(Color.HSVToColor(colorHSV));
notifyListeners();
invalidate();
}
return true;
case MotionEvent.ACTION_BUTTON_PRESS:
}
return super.onTouchEvent(event);
}

最后，根据颜色计算位置的代码：

// drawing color wheel pointer 
float hueAngle = (float) Math.toRadians(colorHSV[0]); 
int colorPointX = (int) (-Math.cos(hueAngle) * colorHSV[1] * colorWheelRadius) + centerX; 
int colorPointY = (int) (-Math.sin(hueAngle) * colorHSV[1] * colorWheelRadius) + centerY; 
float pointerRadius = 0.075f * colorWheelRadius; 
int pointerX = (int) (colorPointX - pointerRadius / 2); 
int pointerY = (int) (colorPointY - pointerRadius / 2); 
colorPointerCoords.set(pointerX, pointerY, pointerX + pointerRadius, pointerY + pointerRadius); 
canvas.drawOval(colorPointerCoords, colorPointerPaint); 

所以我的问题是，例如，如何将径向渐变更改为仅包含 2 种颜色，而不会破坏获取颜色的计算？即使是关于它如何工作的解释也会很棒！

Answer 1

这里有很棒的教程：http://tekeye.uk/android/examples/ui/android-color-picker-tutorial(不是我的(。我对它背后的理论也不太了解，但您可以使用此代码根据位置计算颜色。

// Calculate channel based on 2 surrounding colors and p angle.
private int ave(int s, int d, float p) {
return s + java.lang.Math.round(p * (d - s));
}
// Calculate color based on drawn colors and angle based on x and y position.
private int interpColor(int colors[], float unit) {
if (unit <= 0) {
return colors[0];
}
if (unit >= 1) {
return colors[colors.length - 1];
}
// Adjust the angle (unit) based on how many colors there are in the list.
float p = unit * (colors.length - 1);
// Get starting color position in the array.
int i = (int)p;
p -= i;
// Now p is just the fractional part [0...1) and i is the index.
// Get two composite colors for calculations.
int c0 = colors[i];
int c1 = colors[i+1];
// Calculate color channels.
int a = ave(Color.alpha(c0), Color.alpha(c1), p);
int r = ave(Color.red(c0), Color.red(c1), p);
int g = ave(Color.green(c0), Color.green(c1), p);
int b = ave(Color.blue(c0), Color.blue(c1), p);
// And finally create the color from the channels.
return Color.argb(a, r, g, b);
}

例如，您可以像这样调用解释函数。

@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX() - CENTER_X;
float y = event.getY() - CENTER_Y; 
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:   
// Calculate the angle based on x and y positions clicked.      
float angle = (float)java.lang.Math.atan2(y, x);
// need to turn angle [-PI ... PI] into unit [0....1]
float unit = angle/(2*PI);
if (unit < 0) {
unit += 1;
}
// mColors is your list with colors so int[].
int color = interpColor(mColors, unit);
break;
}
}

我已经在我的项目中尝试过它，它就像一个魅力。所以希望它也能帮助你。:)

编辑：

哦，所以我的颜色是这样设置的。

mColors = intArrayOf(-0x10000, -0xff01, -0xffff01, -0xff0001, -0xff0100, -0x100, -0x10000)

因此，您可以根据需要添加/删除任意数量的颜色，并且由于解释函数是根据此数组的大小计算的，因此它应该可以工作。