Android绘图之SweepGradient(10)

Android 绘图学习

SweepGradient扫描渐变

SweepGradient可以实现扫描渐变渲染,类似雷达扫描图,渐变圆弧,渐变进度条等,构造函数有两个:

/**
 * A Shader that draws a sweep gradient around a center point.
 *
 * @param cx       The x-coordinate of the center
 * @param cy       The y-coordinate of the center
 * @param colors   The colors to be distributed between around the center.
 *                 There must be at least 2 colors in the array.
 * @param positions May be NULL. The relative position of
 *                 each corresponding color in the colors array, beginning
 *                 with 0 and ending with 1.0. If the values are not
 *                 monotonic, the drawing may produce unexpected results.
 *                 If positions is NULL, then the colors are automatically
 *                 spaced evenly.
 */
public SweepGradient(float cx, float cy,
        @NonNull @ColorInt int colors[], @Nullable float positions[]);
/**
 * A Shader that draws a sweep gradient around a center point.
 *
 * @param cx       The x-coordinate of the center
 * @param cy       The y-coordinate of the center
 * @param color0   The color to use at the start of the sweep
 * @param color1   The color to use at the end of the sweep
 */
public SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1) ;

参数说明:
cx,cy 渐变中心坐标。
color0,color1:渐变开始结束颜色。
colors,positions:类似LinearGradient,用于多颜色渐变,positions为null时,根据颜色线性渐变。

两种颜色渐变

构造函数:
SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1)

sweepGradient = new SweepGradient(450,450,Color.RED, Color.GREEN);
mPaint.setShader(sweepGradient);
canvas.drawCircle(450,450,450,mPaint);

多颜色扫描渐变

构造函数:
SweepGradient(float cx, float cy,@NonNull @ColorInt int colors[], @Nullable float positions[])

int [] colors = {Color.BLACK,Color.RED, Color.BLUE,Color.GREEN};
sweepGradient = new SweepGradient(450,450,colors,null);
mPaint.setShader(sweepGradient);
canvas.drawCircle(450,450,450,mPaint);

设置position:

position数组设置主要作用是特定位置对应颜色数组,位置取值【0-1】,0表示开始位置,1表示结束位置,数组和颜色数组一一对应。

int [] colors = {Color.BLACK,Color.RED, Color.BLUE,Color.GREEN};
float[] postions = {0f,0.1f,0.7f,1.0f};
sweepGradient = new SweepGradient(450,450,colors,postions);
mPaint.setShader(sweepGradient);
canvas.drawCircle(450,450,450,mPaint);

可以明显看到BLUE蓝色变多。

旋转扫描实例:

此处只是示例代码,如果要真实现可以利用属性动画或者handler更新,

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    startAngle = startAngle +1;

    if (startAngle == 360){
        startAngle = 0;
    }
    
    int [] colors = {Color.parseColor("#2300FF00"),Color.parseColor("#7F00FF00")};
    float[] position = new float[2];
    position[0] = (startAngle * 1f)/360f;
    position[1] = ((startAngle + 60)* 1.0f)/360f;
    sweepGradient = new SweepGradient(450,450,colors,position);
    mPaint.setShader(sweepGradient);
    canvas.drawCircle(450,450,450,mPaint2);
    canvas.drawCircle(450,450,350,mPaint2);
    canvas.drawCircle(450,450,200,mPaint2);
    canvas.drawCircle(450,450,100,mPaint2);
    float[] lines = {0, 450, 450, 450, 450,450,900, 450, 450, 0, 450, 450,450,450, 450, 900};
    canvas.drawLines(lines,mPaint2);

    canvas.drawArc(0,0,900,900,startAngle,endAngle,true,mPaint);

    invalidate();
}

绘制渐变圆弧

此处只是示例代码,如果要真实现可以利用属性动画或者handler更新,

endAngle = endAngle +1;

if (endAngle >= 360){
    endAngle = 0;
}

int [] colors = {Color.parseColor("#FFFFFF00"),Color.parseColor("#FFFF0000")};
float[] position = new float[2];
position[0] = 0f;
position[1] = ((endAngle)* 1.0f)/360f;
sweepGradient = new SweepGradient(470,470,colors,position);
mPaint.setShader(sweepGradient);
canvas.drawCircle(470,470,450,mPaint2);

canvas.drawArc(20,20,920,920,startAngle,endAngle,false,mPaint);

invalidate();

可以看到,由于设置了positions数组,绘制多少圆弧,颜色是从圆弧开始绘制的地方渐变到圆弧结束弧度。
positions数组的设置也有讲究,需要开始绘制的颜色对应positions数组值为0f,结束位置为((endAngle)* 1.0f)/360f;

如果不设置positions数组参数,结果如下:

 endAngle = endAngle +1;

        if (endAngle >= 360){
            endAngle = 0;
        }

        int [] colors = {Color.parseColor("#FFFFFF00"),Color.parseColor("#FFFF0000")};
        float[] position = new float[2];
        position[0] = 0f;
        position[1] = ((endAngle)* 1.0f)/360f;
        sweepGradient = new SweepGradient(470,470,colors,null);
        mPaint.setShader(sweepGradient);
        canvas.drawCircle(470,470,450,mPaint2);

        canvas.drawArc(20,20,920,920,startAngle,endAngle,false,mPaint);

        invalidate();

可以看到圆弧的渐变颜色一直是从开始到整个圆结束,所以和不设置positions数组有较大区别。


android绘图之Paint(1)
android绘图之Canvas基础(2)
Android绘图之Path(3)
Android绘图之drawText绘制文本相关(4)
Android绘图之Canvas概念理解(5)
Android绘图之Canvas变换(6)
Android绘图之Canvas状态保存和恢复(7)
Android绘图之PathEffect (8)
Android绘图之LinearGradient线性渐变(9)
Android绘图之SweepGradient(10)
Android绘图之RadialGradient 放射渐变(11)
Android绘制之BitmapShader(12)
Android绘图之ComposeShader,PorterDuff.mode及Xfermode(13)
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)
Android绘图之贝塞尔曲线简介(15)
Android绘图之PathMeasure(16)
Android 动态修改渐变 GradientDrawable

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355

推荐阅读更多精彩内容