颜色选择器学习

简介:

说是颜色选择器,其实我本来不是用弄这个,只是想搞搞渐变的,但是在网上收集资料的时候感觉好像是一起的所以我就说都一起看看吧

其实说到颜色选择器网上的资料一大把,基本上都是基于android apiDemo做的研究,我也不例外:

代码网上很多我就直接贴了:都有注释:

主要介绍下这个:

SweepGradient 颜色渐变方向非环形,而是以某点为圆心呈扇形扫过。

SweepGradient的构造函数:

public SweepGradient(float cx, float cy, int[] colors, float[] positions)
public SweepGradient(float cx, float cy, int color0, int color1)

其中cx,cy 指定圆心, color1,color0 或 colors 指定渐变的颜色 ,对于使用多于两种颜色时,还可以通过positions 指定每种颜色的相对位置,positions 设为NULL时表示颜色均匀分布。

LineerGradient, RadialGradient, SweepGradient 等类的基类为Shader (类似于GDI中的Brush类) ,Shader 定义了一个与之对应的Local Matrix ,可以最Shader 做坐标变换。


public class ColorView extends View{
    
    private Paint mPaint;
    private Paint mCenterPaint;
    private int[] mColors;
    private static final int CENTER_X = 300;  
    private static final int CENTER_Y = 300;  
    private static final int CENTER_RADIUS = 100;  
    private boolean mTrackingCenter;  
    private boolean mHighlightCenter;  
    private onColorChangeListener changeListener;
    private static final float PI = 3.1415926f;  
    public interface onColorChangeListener{
        void colorChanged(int color );
        
    };
    public ColorView(Context context,onColorChangeListener changeListener){
        super(context);
        this.changeListener =changeListener;
        mColors = new int[] {//渐变色数组  
                0xFF000000,0xFFFFFFFF,0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,  
                0xFFFFFF00, 0xFFFF0000  
            };  
        
        Shader shader  =new SweepGradient(0, 0,mColors, null);
        mPaint =new Paint(Paint.ANTI_ALIAS_FLAG);//Paint.FILTER_BITMAP_FLAG是使位图过滤的位掩码标志
                                                //Paint.ANTI_ALIAS_FLAG是使位图抗锯齿的标志
                                                //    Paint.DITHER_FLAG是使位图进行有利的抖动的位掩码标志
        mPaint.setShader(shader);
        mPaint.setStyle(Style.STROKE);
        mPaint.setStrokeWidth(100);
        
        mCenterPaint  =new Paint(Paint.ANTI_ALIAS_FLAG);
        mCenterPaint.setColor(Color.RED);
        mCenterPaint.setStrokeWidth(5);
    }
    public ColorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        
        
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        float r =CENTER_X-mPaint.getStrokeWidth()*0.5F;
        canvas.translate(CENTER_X, CENTER_X);
        canvas.drawOval(new RectF(-r, -r, r, r), mPaint);   //drawOval绘制椭圆,
        canvas.drawCircle(0, 0,CENTER_RADIUS, mCenterPaint);
        mCenterPaint.setTextSize(15);
        canvas.drawText("点击外圈远就可以改变中心圆的颜色", -CENTER_X/3, CENTER_Y/2, mCenterPaint);
        if (mTrackingCenter) {  
            int c = mCenterPaint.getColor();  
            mCenterPaint.setStyle(Paint.Style.STROKE);  
              
            if (mHighlightCenter) {  
                mCenterPaint.setAlpha(0xFF);  
            } else {  
                mCenterPaint.setAlpha(0x80);  
            }  
            canvas.drawCircle(0, 0,  
                              CENTER_RADIUS + mCenterPaint.getStrokeWidth(),  
                              mCenterPaint);  
              
            mCenterPaint.setStyle(Paint.Style.FILL);  
            mCenterPaint.setColor(c);  
        }  
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {   //设置View的宽高
    
        setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
    }

    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX() - CENTER_X;  
        float y = event.getY() - CENTER_Y;  
        boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;  
          
        switch (event.getAction()) {  
            case MotionEvent.ACTION_DOWN:  
                mTrackingCenter = inCenter;  
                if (inCenter) {//是否则中心园  
                    mHighlightCenter = true;  
                    invalidate();  
                    break;  
                }  
            case MotionEvent.ACTION_MOVE:  
                if (mTrackingCenter) {  
                    if (mHighlightCenter != inCenter) {  
                        mHighlightCenter = inCenter;  
                        invalidate();  
                    }  
                } else {  
                    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;  
                    }  
                    mCenterPaint.setColor(interpColor(mColors, unit));  
                    invalidate();  
                }  
                break;  
            case MotionEvent.ACTION_UP:  
                if (mTrackingCenter) {  
                    if (inCenter) {  
                        changeListener.colorChanged(mCenterPaint.getColor());  
                    }  
                    mTrackingCenter = false;    // so we draw w/o halo  
                    invalidate();  
                }  
                break;  
        }  
        return true;  
    
    }
    
      private int interpColor(int colors[], float unit) {  
          if (unit <= 0) {  
              return colors[0];  
          }  
          if (unit >= 1) {  
              return colors[colors.length - 1];  
          }  
            
          float p = unit * (colors.length - 1);  
          int i = (int)p;  
          p -= i;  

          // now p is just the fractional part [0...1) and i is the index  
          int c0 = colors[i];  
          int c1 = colors[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);  
            
          return Color.argb(a, r, g, b);  
      }  
      private int ave(int s, int d, float p) {  
          return s + java.lang.Math.round(p * (d - s));  
      }  
}

          

代码直接使用就可以,如果有问题可以下载demo:http://download.csdn.net/detail/u012808234/8596367
 


相关文章
|
10月前
|
C#
CSDN博客炫丽图标调整字体大小和颜色
CSDN博客炫丽图标调整字体大小和颜色
84 0
|
12月前
|
程序员 uml
Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】
Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】
|
存储 JSON 前端开发
【红隼书签】自定义光影、自定义背景、亮度和主题功能
【红隼书签】是一款简洁的在线书签导航网站。
86 1
|
前端开发 开发者
颜色 | 学习笔记
快速学习颜色
66 0
颜色 | 学习笔记
|
Web App开发 前端开发 iOS开发
背景颜色| 学习笔记
快速学习背景颜色。
75 0
背景颜色| 学习笔记
|
JSON 前端开发 JavaScript
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
739 0
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
|
大数据 开发者
R 图形的文本属性、尺寸、标题和自定义坐标轴| 学习笔记
快速学习 R 图形的文本属性、尺寸、标题和自定义坐标轴
277 0
Markdown设置字体大小、颜色...,CSDN博客编写设置字体大小、颜色、粗细。字体,文字背景设置。
Markdown设置字体大小、颜色...,CSDN博客编写设置字体大小、颜色、粗细。字体,文字背景设置。
587 0
Markdown设置字体大小、颜色...,CSDN博客编写设置字体大小、颜色、粗细。字体,文字背景设置。