智能灯的客户需求，然后有了一个HSB的色盘。
HSB的色盘取色会很准，关于HSB的算法后面会给出。之前我哦就用的是像素点取色，会有问题。就采用了HSB取色
效果图如下：
彩色圆盘.png
我在源码注释写的比较明白这种自定义控件比较简单 就不多说了 直接看源码吧；
源码如下：
/**
* Created by zxd on 2016/09/28.
*/
public class ColorPickView extends View {
private Context context;
private int bigCircle; // 外圈半径
private int rudeRadius; // 可移动小球的半径
private int centerColor; // 可移动小球的颜色
private int rudeStrokeWidth = 5;
private Bitmap bitmapBack; // 背景图片
private Paint mPaint; // 背景画笔
private Paint mCenterPaint; // 可移动小球画笔
private Point centerPoint;// 中心位置
private Point mRockPosition;// 小球当前位置
private OnColorChangedListener listener; // 小球移动的监听
private int length; // 小球到中心位置的距离
private double angel = 0.0 /* 0 - 360.0 */,
linePercent = 1.0 /* 0 - 1.0 */,
radio = 1.0 /* 0 - 1.0 */;
private float[] mHSB = new float[ 3 ];
public ColorPickView(Context context) {
super(context);
}
public ColorPickView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
init(attrs);
}
public ColorPickView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
init(attrs);
}
public void setOnColorChangedListener(OnColorChangedListener listener) {
this.listener = listener;
}
/**
* @param attrs
*/
private void init(AttributeSet attrs) {
// 获取自定义组件的属性
TypedArray types = context.obtainStyledAttributes(attrs,
R.styleable.color_picker);
try {
bigCircle = types.getDimensionPixelOffset(
R.styleable.color_picker_circle_radius, 100);
rudeRadius = types.getDimensionPixelOffset(
R.styleable.color_picker_center_radius, 10);
centerColor = types.getColor(R.styleable.color_picker_center_color,
Color.WHITE);
} finally {
types.recycle(); // TypeArray用完需要recycle
}
// 将背景图片大小设置为属性设置的直径
bitmapBack = BitmapFactory.decodeResource(getResources(),
R.drawable.hsb_circle_hard);
bitmapBack = Bitmap.createScaledBitmap(bitmapBack, bigCircle * 2,
bigCircle * 2, false);
// 中心位置坐标
centerPoint = new Point(bigCircle, bigCircle);
mRockPosition = new Point(centerPoint);
// 初始化背景画笔和可移动小球的画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);
mCenterPaint = new Paint();
mCenterPaint.setColor(centerColor);
mCenterPaint.setStrokeWidth(rudeStrokeWidth);
mCenterPaint.setStyle(Paint.Style.STROKE);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 画背景图片
canvas.drawBitmap(bitmapBack, 0, 0, mPaint);
// 画中心小球
canvas.drawCircle(mRockPosition.x, mRockPosition.y, rudeRadius,
mCenterPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
final ValueWrappers.Bool reqUpdate = new ValueWrappers.Bool(false);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 按下
// length = getLength(event.getX(), event.getY(), centerPoint.x,
// centerPoint.y);
// if (length > bigCircle - rudeRadius) {
// return true;
// }
// break;
case MotionEvent.ACTION_UP:// 抬起
reqUpdate.value = true;
case MotionEvent.ACTION_MOVE: // 移动
length = getLength(event.getX(), event.getY(), centerPoint.x,
centerPoint.y);
if (length <= bigCircle - rudeRadius) {
mRockPosition.set((int) event.getX(), (int) event.getY());
} else {
mRockPosition = getBorderPoint(centerPoint, new Point(
(int) event.getX(), (int) event.getY()), (bigCircle - rudeRadius - 5));
}
double cX = centerPoint.x,
cY = centerPoint.y,
pX = event.getX(),
pY = event.getY();
angel = MathUtil.Angel(pX - cX, pY - cY) + 90; // [-180, 180] => [0, 360]
if (angel < 0)
angel += 360.0;
double deltaX = Math.abs(cX - pX), deltaY = (cY - pY);
radio = Math.pow(deltaX * deltaX + deltaY * deltaY, 0.5) / bigCircle * 2.0;
if (radio <= 0) radio = 0;
if (radio >= 1.0) radio = 1.0;
break;
default:
break;
}
final double hue = angel / 360.0,
sat = radio,
brt = linePercent;
// Util.UIColor c = new Util.UIColor(hue, sat, brt);
mHSB[ 0 ] = (float) hue;
mHSB[ 1 ] = (float) sat;
mHSB[ 2 ] = (float) brt;
listener.onColorChange(mHSB, reqUpdate.value);
invalidate(); // 更新画布
return true;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 视图大小设置为直径
setMeasuredDimension(bigCircle * 2, bigCircle * 2);
}
/**
* @param x1
* @param y1
* @param x2
* @param y2
* @return
*/
public static int getLength(float x1, float y1, float x2, float y2) {
return (int) Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}
/**
* @param a
* @param b
* @param cutRadius
* @return
*/
public static Point getBorderPoint(Point a, Point b, int cutRadius) {
float radian = getRadian(a, b);
return new Point(a.x + (int) (cutRadius * Math.cos(radian)), a.x
+ (int) (cutRadius * Math.sin(radian)));
}
/**
* @param a
* @param b
* @return
*/
public static float getRadian(Point a, Point b) {
float lenA = b.x - a.x;
float lenB = b.y - a.y;
float lenC = (float) Math.sqrt(lenA * lenA + lenB * lenB);
float ang = (float) Math.acos(lenA / lenC);
ang = ang * (b.y < a.y ? -1 : 1);
return ang;
}
public void setPoint(float[] hsb) {
Log.i("color", "h == " + hsb[ 0 ] + ",,s==" + hsb[ 1 ] + ",,b==" + hsb[ 2 ]);
float angle = hsb[ 0 ];
float currLength = hsb[ 1 ] * bigCircle;
float y = 0;
float x = 0;
if (0 <= angle && angle <= 90) {
y = (float) (centerPoint.y - Math.cos(angle * Math.PI / 180) * currLength);
x = (float) (Math.sin(angle * Math.PI / 180) * currLength + centerPoint.x);
} else if (angle > 90 && angle <= 180) {
x = (float) (Math.cos((angle - 90) * Math.PI / 180) * currLength + centerPoint.x);
y = (float) (Math.sin((angle - 90) * Math.PI / 180) * currLength + centerPoint.y);
} else if (angle > 180 && angle <= 270) {
x = (float) (-Math.sin((angle - 180) * Math.PI / 180) * currLength + centerPoint.x);
y = (float) (Math.cos((angle - 180) * Math.PI / 180) * currLength + centerPoint.y);
} else {
y = (float) (-Math.sin((angle - 270) * Math.PI / 180) * currLength + centerPoint.y);
x = (float) (-Math.cos((angle - 270) * Math.PI / 180) * currLength + centerPoint.x);
}
length = getLength(x, y, centerPoint.x,
centerPoint.y);
if (length <= bigCircle - rudeRadius) {
mRockPosition.set((int) x, (int) y);
} else {
mRockPosition = getBorderPoint(centerPoint, new Point(
(int) x, (int) y), bigCircle - rudeRadius - 5);
}
angel = MathUtil.Angel(x - centerPoint.x, y - centerPoint.y) + 90; // [-180, 180] => [0, 360]
if (angel < 0)
angel += 360.0;
double deltaX = Math.abs(centerPoint.x - x), deltaY = (centerPoint.y - y);
radio = Math.pow(deltaX * deltaX + deltaY * deltaY, 0.5) / bigCircle * 2.0;
if (radio <= 0) radio = 0;
if (radio >= 1.0) radio = 1.0;
final double hue = angel / 360.0,
sat = radio,
brt = linePercent;
// Util.UIColor c = new Util.UIColor(hue, sat, brt);
mHSB[ 0 ] = (float) hue;
mHSB[ 1 ] = (float) sat;
mHSB[ 2 ] = (float) brt;
// listener.onColorChange(mHSB, true);
invalidate();
}
// 颜色发生变化的回调接口
public interface OnColorChangedListener {
void onColorChange(float[] hsb, boolean reqUpdate);
}
}
关于HSB和RGB的算法的转化
public static float[] rgb2hsb(int rgbR, int rgbG, int rgbB) {
assert 0 <= rgbR && rgbR <= 255;
assert 0 <= rgbG && rgbG <= 255;
assert 0 <= rgbB && rgbB <= 255;
int[] rgb = new int[]{ rgbR, rgbG, rgbB };
Arrays.sort(rgb);
int max = rgb[ 2 ];
int min = rgb[ 0 ];
float hsbB = max / 255.0f;
float hsbS = max == 0 ? 0 : (max - min) / (float) max;
float hsbH = 0;
if (max == rgbR && rgbG >= rgbB) {
hsbH = (rgbG - rgbB) * 60f / (max - min) + 0;
} else if (max == rgbR && rgbG < rgbB) {
hsbH = (rgbG - rgbB) * 60f / (max - min) + 360;
} else if (max == rgbG) {
hsbH = (rgbB - rgbR) * 60f / (max - min) + 120;
} else if (max == rgbB) {
hsbH = (rgbR - rgbG) * 60f / (max - min) + 240;
}
return new float[]{ hsbH, hsbS, hsbB };
}
关于RGB转化为HSB转化
public void fromHSB(double h, double s, double b) {
hsba[ H ] = h;
hsba[ S ] = s;
hsba[ B ] = b;
for (int idx = 0 ; idx < hsba.length ; idx++)
if (hsba[ idx ] > 1.0f)
hsba[ idx ] = 1.0f;
else if (hsba[ idx ] < 0.0f)
hsba[ idx ] = 0.0f;
//第一个参数是透明度，这个值需要自己写。看需求把
rgba = Color.HSVToColor(0,
new float[]{ (float) (h * 360.0), (float) s, (float) b });
}
