HSV色盤詳解

HSV色盤詳解

原創

iOnesmile

2020-02-20 20:32

由於公司目前是做智能音樂燈的，由於控燈需要繪製了各種各樣的取色器，現在可以已一個老司機的身份來分析一下HSV的取色盤。

HSV模型瞭解

它是一個倒錐子模型，這個模型就是按色彩、深淺、明暗來描述的。

H是色彩，範圍0° ~ 360°，紅（0°）、綠（120°）、藍（240°）；
S是深淺， S = 0時，只有灰度，越往圓心的位置越偏白；
V是明暗，表示色彩的明亮程度，越往錐子的頂點越偏黑（v = max(r, g, b)）。

由RGB到HSV的轉換：

圖像渲染（Shader）

在Android中，提供了Shader類專門用來渲染圖像以及一些幾何圖形。

Shader類包括了5個直接子類，分別爲：BitmapShader、ComposeShader、LinearGradient、RadialGradient以及SweepGradient。其中，BitmapShader用於圖像渲染；ComposeShader用於混合渲染；LinearGradient用於線性渲染；RadialGradient用於環形渲染；而SweepGradient則用於梯度渲染。顯示效果如下圖：

色盤源碼：

public class ColorPicker extends View {

	private static final float RADIUS_WIDTH_RATIO = 0.42f;
	private Paint mPaint;

	private Paint colorWheelPaint;	// 繪製色盤
	private Bitmap colorWheelBitmap;	// 彩燈位圖
	private int centerX, centerY;
	private int colorWheelRadius;
	private Rect mColorWheelRect;

	public ColorPicker(Context context, AttributeSet attrs) {
		super(context, attrs);
		
		mPaint = new Paint();
		mPaint.setAlpha(100);
		
		colorWheelPaint = new Paint();
		colorWheelPaint.setAntiAlias(true);//消除鋸齒
		colorWheelPaint.setDither(true);//防抖動
	}

	@Override
	protected void onDraw(Canvas canvas) {
		canvas.drawBitmap(colorWheelBitmap, mColorWheelRect.left, mColorWheelRect.top, null);
	}

	@Override
	protected void onSizeChanged(int width, int height, int oldw, int oldh) {
		centerX = width / 2;
		centerY = height / 2;
		colorWheelRadius = (int) (width * RADIUS_WIDTH_RATIO);
		
		mColorWheelRect = new Rect(centerX - colorWheelRadius, centerY - colorWheelRadius, centerX + colorWheelRadius, centerY + colorWheelRadius);
		
		colorWheelBitmap = createColorWheelBitmap(colorWheelRadius * 2, colorWheelRadius * 2);
	}

	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] = 360 - (i * colorAngleStep) % 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;
	}
	
}

效果圖：