Android Shader 学习 与 探索

关于Shader 这篇文章 已经讲得非常好了，我现在做的只是基于前人的努力进行再探索。

首先 贴出这次探索的基本代码

public class ShaderView1 extends View
{
    Paint mPaint;
    Shader m着色器;

    public ShaderView1(Context context)
    {
        super(context);
        init();
    }

    private void init()
    {
        mPaint = new Paint();

        m着色器 = getBitmapShader();

        mPaint.setShader(m着色器);
    }

    public BitmapShader getBitmapShader()
    {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a);
        BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        return shader;
    }
}

BitmapShader

思路
1. 先绘制一个图形
2. 对画布进行操作
3. 在进行绘制

代码如下：

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();

        int w = canvas.getWidth();
        int h = canvas.getHeight();

        canvas.drawRect(0, 0, w, h, mPaint);

        canvas.translate(canvas.getWidth() / 2, canvas.getHeight() / 2);

        canvas.drawCircle(0, 0, Math.min(w, h) / 2, mPaint);
    }

运行出来的效果如下：

绘制的矩形和预想的是一样 ， 可为什么绘制的圆咋就变成这样了 ？红色区域是什么鬼？
其实稍微仔细都能发现，画笔中的 着色器(Shader) 随着画布一起进行了平移。 所以我的单独为 Shader 设置一个 Matrix 就可以了 ？

然后我将代码修改为

    public BitmapShader getBitmapShader()
    {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a);
        BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        shader.setLocalMatrix(new Matrix());
        return shader;
    }

然而并没有什么卵用

为什么呢 ？
因为坐标变了

所以我又将代码修改为这样

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();

        int w = canvas.getWidth();
        int h = canvas.getHeight();

        mPaint.setAlpha((int) (255 * 0.5f));
        canvas.drawRect(0, 0, w, h, mPaint);

        canvas.translate(canvas.getWidth() / 2, canvas.getHeight() / 2);

        Matrix matrix = new Matrix();
        matrix.setPolyToPoly(new float[]{0, 0}, 0, new float[]{-w / 2, -h / 2}, 0, 1);
        mPaint.getShader().setLocalMatrix(matrix);

        mPaint.setAlpha(255);
        canvas.drawCircle(0, 0, Math.min(w, h) / 2, mPaint);
    }

最终达到预期

稍做修改，代码就能够达到这样的效果

当然，圆头像有更好的实现方式，这里只是举个栗子

随后我们来看看不同的 TileMode 所带来的效果 是怎么样的。

Shader.TileMode.CLAMP, Shader.TileMode.CLAMP

先贴出代码

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), 图片);

        int w = canvas.getWidth();
        int h = canvas.getHeight();
        int bw = bitmap.getWidth();
        int bh = bitmap.getHeight();

        Matrix matrix = new Matrix();
        //将图片置中，方便观察效果
        matrix.setPolyToPoly(new float[]{0, 0}, 0, new float[]{(w - bw) / 2, (h - bh) / 2}, 0, 1);
        mPaint.getShader().setLocalMatrix(matrix);

        canvas.drawRect(0, 0, w, h, mPaint);
    }

运行效果如下

如果我们将图片替换成四个角都是透明形状的图片

效果又将变成这样

Shader.TileMode.CLAMP, Shader.TileMode.MIRROR

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.MIRROR);

Shader.TileMode.CLAMP, Shader.TileMode.REPEAT

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

Shader.TileMode.MIRROR, Shader.TileMode.CLAMP

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.CLAMP);

Shader.TileMode.MIRROR, Shader.TileMode.MIRROR

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);

Shader.TileMode.MIRROR, Shader.TileMode.REPEAT

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.REPEAT);

Shader.TileMode.REPEAT, Shader.TileMode.CLAMP

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);

Shader.TileMode.REPEAT, Shader.TileMode.MIRROR

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);

Shader.TileMode.REPEAT, Shader.TileMode.REPEAT

BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

//TODO