Android Paint API Shader图像渲染用法详解

1.构造方法详解

1)BitmapShader(图像渲染)

BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

使用一张位图作为纹理，对指定区域进行填充渲染。参数依次为：

• bitmap：用于填充的位图资源；
• tileX：位图在 X 轴方向上的平铺或衔接方式；
• tileY：位图在 Y 轴方向上的平铺或衔接方式；

其中，Shader.TileMode 主要有以下三种模式：

• CLAMP：当渲染区域超出原始位图边界时，会复制边缘颜色来填充超出的部分
• REPEAT：以平铺的形式重复渲染位图内容
• MIRROR：在横向与纵向上以镜像翻转的方式重复绘制位图。

2)ComposeShader(混合渲染)

ComposeShader(Shader shaderA, Shader shaderB, PorterDuff.Mode mode)

用于将两种 Shader 渲染效果进行组合叠加。看到 PorterDuff，大家应该就能联想到图像混合模式了，比如 BitmapShader 与 LinearGradient 的组合渲染效果。参数依次为：

• shaderA：第一种渲染效果
• shaderB：第二种渲染效果
• mode：两种渲染效果的混合模式

3)LinearGradient(线性渲染)

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

用于实现指定区域内的线性渐变颜色效果，参数依次如下：

• x0：渐变起点的 x 坐标
• y0：渐变起点的 y 坐标
• x1：渐变终点的 x 坐标
• y1：渐变终点的 y 坐标
• colors：渐变颜色数组
• positions：颜色数组中各颜色对应的相对位置
• tile：平铺方式

4)RadialGradient(环形渲染)

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

用于实现某一区域内的径向渐变，也就是环形渐变效果。参数依次为：

• x：环形渐变圆心的 x 坐标
• y：环形渐变圆心的 y 坐标
• radius：环形渐变的半径
• colors：环形渐变的颜色数组
• positions：指定颜色数组的相对位置
• tile：平铺方式

5)SweepGradient(梯度渲染)

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

扫描渐变渲染，即围绕某个中心点旋转一周后形成的渐变效果。参数依次为：

• cx：扫描中心点的 x 坐标
• cy：扫描中心点的 y 坐标
• colors：梯度渐变颜色数组
• positions：指定颜色数组的相对位置

从文字说明中，我们已经可以大致了解这些 Android Shader 的作用与区别。不过仅看概念还不够，下面还是通过一段实际代码示例来验证它们的具体效果，毕竟有码有图才更直观。

2.使用代码示例：

运行效果图：

实现代码：

BitmapShaderView.ja va：

/**
 * Created by Jay on 2015/11/4 0030.
 */
public class BitmapShaderView extends View {
private Bitmap mBitmap = null;
    private ShapeDrawable sDrawable = null;
    private Paint mPaint = null;
    private int bitW = 0, bitH = 0;     //Bitmap宽高
private Shader mBitmapShader = null;   //Bitmap渲染
    private Shader mLinearGradient = null; //线性渐变渲染
    private Shader mComposeShader = null; //混合渲染
    private Shader mRadialGradient = null; //环形渐变渲染
    private Shader mSweepGradient = null; //梯度渲染
public BitmapShaderView(Context context) {
        this(context, null);
    }
public BitmapShaderView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
public BitmapShaderView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
private void init() {
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_cat);
        bitW = mBitmap.getWidth();
        bitH = mBitmap.getHeight();
        mPaint = new Paint();
//创建BitmapShader
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
//创建LinearGradient并设置渐变的颜色数组
        mLinearGradient = new LinearGradient(0, 0, 100, 100,
                new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.WHITE},
                null, Shader.TileMode.REPEAT);
//混合渲染，这里使用了BitmapShader和LinearGradient进行混合，可以试试其他~
        mComposeShader = new ComposeShader(mBitmapShader, mLinearGradient, PorterDuff.Mode.DARKEN);
//环形渐变渲染
        mRadialGradient = new RadialGradient(50, 200, 50,
                new int[]{Color.GREEN, Color.RED, Color.BLUE, Color.WHITE},
                null, Shader.TileMode.REPEAT);
//梯度渲染
        mSweepGradient = new SweepGradient(30, 30, new int[]{Color.GREEN, Color.RED,
                Color.BLUE, Color.WHITE}, null);
}
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//将图片裁剪为椭圆形
        sDrawable = new ShapeDrawable(new OvalShape());
        sDrawable.getPaint().setShader(mBitmapShader);
        sDrawable.setBounds(0, 0, bitW, bitH);
        sDrawable.draw(canvas);
//绘制线性渐变的矩形
        mPaint.setShader(mLinearGradient);
        canvas.drawRect(bitW, 0, bitW * 2, bitH, mPaint);
//绘制混合渲染效果
        mPaint.setShader(mComposeShader);
        canvas.drawRect(0, bitH, bitW , bitH * 2, mPaint);
//绘制环形渐变
        mPaint.setShader(mRadialGradient);
        canvas.drawCircle(bitW * 2.8f, bitH / 2, bitH / 2, mPaint);
//绘制梯度渐变
        mPaint.setShader(mSweepGradient);
        canvas.drawRect(bitW, bitH, bitW * 2, bitH * 2, mPaint);
}
}

整段代码大约只有一百多行，整体并不复杂，基本通过不同 Shader 的创建与设置，就能直观看到各种图像渲染和渐变效果。如果你对某些参数或绘制结果还有疑问，建议亲自运行代码并修改参数试试看，理解会更深入。

3.本节代码下载：

BitmapShaderDemo.zip

本节小结：

本节主要为大家介绍了 Paint 中另一个非常实用的 API：Shader（图像渲染）。通过它，我们可以轻松实现位图填充、线性渐变、环形渐变、扫描渐变以及混合渲染等效果，让自定义绘图拥有更多表现形式。如果你对示例代码还有不理解的地方，不妨直接复制代码并尝试修改参数，多练几次自然就明白了。好了，本节内容就到这里，谢谢阅读~