图像处理详解之颜色渐变效果

简介: Android平台下实现渐变效果。在android.graphics中我们可以找到有关Gradient字样的类,比如LinearGradient 线性渐变、RadialGradient径向渐变和 角度渐变SweepGradient 三种,他们的基类为android.graphics.Shader。

Android平台下实现渐变效果。在android.graphics中我们可以找到有关Gradient字样的类,比如LinearGradient 线性渐变、RadialGradient径向渐变和 角度渐变SweepGradient 三种,他们的基类为android.graphics.Shader。

下面以SweepGradient渐变(角度渐变)为例讲解:

public class SweepGameView extends View implements Runnable {
    Paint mPaint = null;
    // 梯度渲染
    Shader mSweepGradient = null;

    public SweepGameView(Context context) {
        super(context);
        // 创建SweepGradient对象
        // 第一个,第二个参数中心坐标
        // 后面的参数与线性渲染相同
        mSweepGradient = new SweepGradient(150, 150, new int[] { Color.GREEN,
                Color.RED, Color.BLUE, Color.WHITE }, null);
        mPaint = new Paint();
        new Thread(this).start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 绘制梯度渐变
        mPaint.setShader(mSweepGradient);
        // 这里可以话任意形状
        canvas.drawRect(0, 0, 300, 300, mPaint);
    }

    @Override
    public void run() {
        while(!Thread.currentThread().isInterrupted()) {
            try {
                Thread.sleep(100);
            }
            catch(Exception e) {
                Thread.currentThread().interrupt();
            }
            postInvalidate();
        }
    }
}


效果图如下:



一、LinearGradient线性渐变

在android平台中提供了两种重载方式来实例化该类分别为,他们的不同之处为参数中第一种方法可以用颜色数组,和位置来实现更细腻的过渡效果,比如颜色采样int[] colors数组中存放20种颜色,则渐变将会逐一处理。而第二种方法参数仅为起初颜色color0和最终颜色color1。

LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile) 

LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile) 
使用实例如下:
Paint p=new Paint();
LinearGradient lg=new LinearGradient(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);  //参数一为渐变起初点坐标x位置,参数二为y轴位置,参数三和四分辨对应渐变终点,最后参数为平铺方式,这里设置为镜像.

刚才Android开发网已经讲到Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码如下:
p.setShader(lg);
canvas.drawCicle(0,0,200,p); //参数3为画圆的半径,类型为float型。

二、 RadialGradient镜像渐变

有了上面的基础,我们一起来了解下径向渐变。和上面参数唯一不同的是,径向渐变第三个参数是半径,其他的和线性渐变相同。

RadialGradient(float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile) 
RadialGradient(float x, float y, float radius, int color0, int color1, Shader.TileMode tile)

三、 SweepGradient角度渐变

对于一些3D立体效果的渐变可以尝试用角度渐变来完成一个圆锥形,相对来说比上面更简单,前两个参数为中心点,然后通过载入的颜色来平均的渐变渲染。

SweepGradient(float cx, float cy, int[] colors, float[] positions)  //对于最后一个参数SDK上的描述为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.,所以Android123建议使用下面的重载方法,本方法一般为NULL即可。
SweepGradient(float cx, float cy, int color0, int color1)

或者直接创建一个drawable:

  GradientDrawable grad = new GradientDrawable(Orientation.TOP_BOTTOM,
    new int[] { Color.BLACK, Color.WHITE });
  this.getWindow().setBackgroundDrawable(grad);


目录
相关文章
|
7月前
|
C++ 计算机视觉 Python
C++ VS OpenGL绘制教室三维立体旋转图像
C++ VS OpenGL绘制教室三维立体旋转图像
76 0
C++ VS OpenGL绘制教室三维立体旋转图像
|
9月前
Photoshop极坐标滤镜巧绘三维游泳圈
Photoshop极坐标滤镜巧绘三维游泳圈
48 0
|
10月前
|
API
webgl图形变换、投影与摄像机
入坑webgl,从图形变换、投影与摄像机开始,基操学得好,以后才能怎么炫酷怎么来~快快快,点进来~~
webgl图形变换、投影与摄像机
|
前端开发
自定义View 绘制 ,范围裁切,几何变换
自定义View 绘制 ,范围裁切,几何变换
自定义View 绘制 ,范围裁切,几何变换
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(二)
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(二)
337 0
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(二)
|
机器学习/深度学习
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(一)
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(一)
1272 0
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(一)
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(三)
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(三)
270 0
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(三)
|
JavaScript 前端开发 计算机视觉