Android自定义色盘升级版，滑动获取RGB颜色

前一篇文章，只是简单了分享了如何自定义一个色盘。

Android自定义色盘

这个显得太low了。这里加入滑动获取颜色的功能，同时增加一个滑动的小球。
作为升级版，先上效果图：

色盘升级版.png

考虑到要动态判断圆心到小球的举例，就不能和上一篇那样处理。将色盘圆心作作为变量处理。先上初始化的代码：

private Paint mDiskPaint;//色盘画笔
private float mDiskPaintWidth;//色盘宽度
private float mDiskPoint;//色盘圆点
private Paint mPointPaint;//圆点画笔
private Shader shader; // 色环颜色的发散位置
private Paint bgPaint;//背景画笔
private float r_bgPaint;//背景圆半径
private float r_shaderPaint;//
private float centerX;// 圆心X
private float centerY;// 圆心Y
private int mColor;//当前选择颜色

//渐变色环颜色
private int[] mCircleColors = new int[] { 0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00, 0xFFFFFF00,
        0xFFFF0000 };

private float[] colorPotXY = new float[2]; // 白点坐标
private float markPointX;//当前滑动点x坐标
private float markPointY;//当前滑动点Y坐标

public ColorDiskView(Context context) {
    super(context);
    init();
}
public ColorDiskView(Context context, AttributeSet attrs) {
    //this(context, attrs,0);
    super(context,attrs);
    init();
}
public ColorDiskView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mDiskPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    mDiskPaint.setStyle(Paint.Style.STROKE);

    bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    LinearGradient gradient = new LinearGradient(0, 0, 700, 700, 0XFF222222, 0xFF909090, Shader.TileMode.CLAMP);
    bgPaint.setShader(gradient);

    mPointPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    mPointPaint.setColor(Color.WHITE);
}

初始化工作是比较简单的。这里依旧重新写onMeasure方法。和之前一样。

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int widthSpecMode=MeasureSpec.getMode(widthMeasureSpec);
    int widthSpecSize=MeasureSpec.getSize(widthMeasureSpec);
    int heightSpecMode=MeasureSpec.getMode(heightMeasureSpec);
    int heightSpecSize=MeasureSpec.getSize(heightMeasureSpec);
    if (widthSpecMode==MeasureSpec.AT_MOST&&heightSpecMode==MeasureSpec.AT_MOST){
        setMeasuredDimension(500,500);
    }else if(widthSpecMode==MeasureSpec.AT_MOST){
            setMeasuredDimension(500,heightSpecSize);
    }else if (heightSpecMode==MeasureSpec.AT_MOST){
            setMeasuredDimension(widthSpecSize,500);
    }
}

重点来了，就是onDraw的方法要注意，先上代码：

 protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    final int paddingLeft=getPaddingLeft();
    final int paddingRight=getPaddingRight();
    final int paddingTop=getPaddingTop();
    final int paddingBottom=getPaddingBottom();
    int width=getWidth()-paddingLeft-paddingRight;
    int height=getHeight()-paddingTop-paddingBottom;

    //平移，将画布的坐标原点向左右方向移动width / 2，向上下方向移动height / 2
    canvas.translate(width / 2, height / 2);
    centerX=Math.min(width,height)/2;
    centerY= height / 2;
    r_bgPaint=centerX;
    mDiskPaintWidth=r_bgPaint/12*5;
    mDiskPoint=mDiskPaintWidth/5;
    r_shaderPaint=r_bgPaint-mDiskPaintWidth/2;
    mDiskPaint.setStrokeWidth(mDiskPaintWidth);
    colorPotXY[0] =centerX -mDiskPaintWidth/2;
    colorPotXY[1] = 0;

    //圆心确定再填充
    shader=new SweepGradient(0,0,mCircleColors,null);
    mDiskPaint.setShader(shader);
    canvas.drawCircle(0,0,r_bgPaint,bgPaint); //外圆大小
    canvas.drawCircle(0,0, r_shaderPaint, mDiskPaint);//色盘大小

    if (markPointX==0&&markPointY==0){
        markPointX=colorPotXY[0];
        markPointY=colorPotXY[1];
    }
    canvas.drawCircle(markPointX, markPointY,mDiskPoint,mPointPaint);
}

注意：为什么要有： canvas.translate(width / 2, height / 2);
看canvas的几个方法：

1.translate(x,y):平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）。
2.scale（x,y）：扩大。x为水平方向的放大倍数，y为竖直方向的放大倍数。
3.rotate(angel):旋转.angle指旋转的角度，顺时针旋转。
4.transform():切变。所谓切变，其实就是把图像的顶部或底部推到一边。

因为我上面自定义的坐标起点都是0,0，,所以要移到中间去。

重点看这几行代码：

    if (markPointX==0&&markPointY==0){
    markPointX=colorPotXY[0];
    markPointY=colorPotXY[1];
}
canvas.drawCircle(markPointX, markPointY,mDiskPoint,mPointPaint);

}

这里就牵扯到滑动的处理了，滑动在变，markPointX, markPointY在变。

     @Override
public boolean onTouchEvent(MotionEvent event) {
    float x=event.getX();
    float y=event.getY();
    
  //限制小圆球的滑动范围
    if (Math.pow(x-centerX,2)+Math.pow(y-centerY,2)>Math.pow(centerX-mDiskPoint*2/3,2)||
            Math.pow(x-centerX,2)+Math.pow(y-centerY,2)<Math.pow(centerX-mDiskPaintWidth+mDiskPoint*2/3,2)){
        return true;
    }
    
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:
            moved(x, y);
            break;

        case MotionEvent.ACTION_MOVE:
            moved(x, y);
            break;

        case MotionEvent.ACTION_UP:
            moved(x, y);
            //获取角度
            float angle=calculateAngle(x,y);
            //获取选中的颜色
            mColor=calculateColor(angle);

            break;
    }

    return true;
}

最后还剩几个方法：全贴出来。都不难：

   private float calculateAngle(float x, float y) {
    return (float) Math.atan2(y - centerY, x - centerX);
}

    private int calculateColor(float angle) {
    float unit = (float) (angle / (2 * Math.PI));
    if (unit < 0) {
        unit += 1;
    }

    if (unit <= 0) {
        mColor = mCircleColors[0];
        return mCircleColors[0];
    }
    if (unit >= 1) {
        mColor = mCircleColors[mCircleColors.length - 1];
        return mCircleColors[mCircleColors.length - 1];
    }

    float p = unit * (mCircleColors.length - 1);
    int i = (int) p;
    p -= i;

    int c0 = mCircleColors[i];
    int c1 = mCircleColors[i + 1];
    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);
    Log.e("rgb","rgb"+r+":"+g+":"+b);

    mColor = Color.argb(a, r, g, b);
    return Color.argb(a, r, g, b);
}

       private int ave(int s, int d, float p) {
        return s + Math.round(p * (d - s));
       }


private void moved(float x, float y) {
    //根据三角函数整切定理计算得到X.Y的坐标
    markPointX =x-this.getWidth()/2 ;/*(float) ((r_bgPaint-mDiskPaintWidth/2)
            * Math.cos(Math.atan2(x - centerX, centerY - y) - (Math.PI / 2)));*/
    markPointY =y-this.getHeight()/2 ;/*(float) ((r_bgPaint-mDiskPaintWidth/2)
            * Math.sin(Math.atan2(x - centerX, centerY - y) - (Math.PI / 2)));*/
    invalidate();
}

记得，moved方法中要invalidate()。
当然了，这些都是在自定义里面写的，你的Activity界面，或者fragment界面，肯定需要获取颜色来作进一步处理，你可以选择写接口或者公共方法就好。我这里直接给了一个方法。

 public int getColor(){
    return mColor;
}

好了，今天就是这么多了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,738评论 25赞 709
  • 0125
    1.看了一天的鬼吹灯（小说）。一看就停不下来了~其实细节处都不大敢认真看，有时候心里有些怕，却又上瘾很想知道他们的...
    铃铛风聆阅读 2,118评论 0赞 0
  • “看脸”社会——美的向左，丑的向右
    -1- “看脸”社会 一个人长相的美丑对于人生的际遇会有怎样的差别呢？ 日本一家美容机构（bellissima b...
    MISS康塔塔阅读 12,201评论 52赞 91
  • 童诗 | 月亮妈妈
    文/ 路人锋 我想去私奔，私奔到月亮上，去看星星。月亮没有太阳刺眼，温柔地就像邻居家，刚搬来的小姐姐。她有两个麻花...
    路人锋阅读 4,151评论 15赞 19
  • 我们需要仪式感并不是矫情
    生活中不少人都认为那种追求仪式感的人，是矫情的。在这些人眼中，追求仪式感的人们的行为大多是多余的，是浪费时间的，大...
    Lavictoria阅读 4,572评论 0赞 0