《Android群英传》图像处理之画笔特效处理--Shader篇

最新推荐文章于 2024-09-18 08:47:49 发布

许渺

最新推荐文章于 2024-09-18 08:47:49 发布

阅读量576

点赞数

分类专栏： Android群英传文章标签：图像处理位图 Android

本文链接：https://blog.csdn.net/xyj1576029838/article/details/51571228

版权

Android群英传专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Shader 又被称为着色器、渲染器，它用来实现一系列的渐变、渲染效果。Android中的Shader 包括以下几种：

BitmapShader – 位图 Shader
LinearGradient – 线性 Shader
RadialGradient – 光束 Shader
SweepGradient – 梯度 Shader
ComposeShader – 混合 Shader

除了第一个BitmapShader以外，其他的Shader都比较正常，实现了名副其实的渐变、渲染效果。而于其他的Shader所产生的渐变不同，BitmapShader产生的是一个图像，这有点想PhotoShop中的图像填充渐变。他的作用就是通过Paint对画布进行指定Bitmap的填充，填充时有以下几中模式可以选择。

CLAMP 拉伸 – 拉伸的是图片最后的哪一个像素，不断重复
REPEAT 重复 – 横向、纵向不断变化
MIRROR 镜像 – 横向不断翻转重复，纵向不断反转翻转重复

这几种模式的含义都非常好理解，与字面意思基本相同。这里最常使用的就是就是 CLAMP 拉伸模式，虽然它会拉伸最后一个像素，但是只要将图像设置为一定的大小，就可以避免这种拉伸。下面来看一个例子，将一个矩形图片变成一张图形的图片。当然，通过绘制不同的图形，你也可以绘制出不同形状的图形。

圆形图片

代码非常简单，就是使用 BitmapShader 来进行图形填充，代码如下所示：

package com.ajun.shader.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

import com.ajun.shader.R;

public class CircleImage extends View {
    private Paint mPaint;
    private Bitmap mBitmap;
    private BitmapShader mBitmapShader;
    private int imageWidth;
    private int imageHeight;

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

    public CircleImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test1);
        imageHeight = mBitmap.getHeight();
        imageWidth = mBitmap.getWidth();

        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //取图片的中心画圆
        canvas.drawCircle(imageWidth / 2, imageHeight / 2,
                imageWidth > imageHeight ? imageHeight / 2 - 50 : imageWidth / 2 - 50, mPaint);
    }
}

在以上代码中，用一张图片创建了一支具有图像填充功能的画笔，并使用这个画笔绘制了一个圆形。这样，我们就可以看见一个圆形的图片。

这里大家可能还不能很好地体会 BitmapShader，这是因为选择的Bitmap大小比较大，所以在设置 BitmapShader 的TileMode的时候，没有能够看出效果上的差别。下面把TileMode改为REPEAT，并将Bitmap改为比较小的ic_launcher 图标，大家就可以看出他们的区别在哪里了，代码如下所示：

package com.ajun.shader.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

import com.ajun.shader.R;

public class CircleRepeatImageView extends View {
    private BitmapShader mBitmapShader;
    private Paint mPaint;
    private Bitmap mBitmap;

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

    public CircleRepeatImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleRepeatImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);

        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

        mPaint = new Paint();
        //设置抗锯齿
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(500,600,200,mPaint);
    }
}

通过运行上面代码，显示效果如下图所示：

RepeatImageVIew

相信通过这样一幅图，大家应该可以理解使用CLAMP拉伸模式来创建圆形图像的原因了。在说完BitmapShader这个比较特殊的Shader后，再来说说其他比较类似的 Shader。先来看一个最简单的，也是最常用的 Shader – LinearGradient。直译过来就是线性渐变，没错，它就是一个简单的线性渐变，与PhotoShop里面的渐变效果类似，要使用LinearGradient也非常简单，只需要指定渐变起始的颜色就可以了，代码如下所示：

package com.ajun.shader.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

public class ColorGradientView extends View{

    private Paint mPaint;

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

    public ColorGradientView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ColorGradientView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(new LinearGradient(0,0,600,600, Color.BLUE,Color.YELLOW, Shader.TileMode.REPEAT));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0,0,600,600,mPaint);
    }
}

通过以上代码，画出一个 LinearGradient，效果图如下，它是一个从（0，0）到（600，600）的一个有蓝色到黄色的渐变效果。

LinearGradient

LinearGradient 方法参数中的TileMode与在BitmapShader 中的含义基本相同，这里将绘制矩形的大小设置为与渐变图像大小相同，所以没有看见 REPEAT 的效果。如果将图形扩大，REPEAT的效果就出来了，我们将矩形的大小改成比渐变图像大一点：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawRect(0,0,700,700,mPaint);
}

RepeatLinearGradient

REPEAT的效果是不是就出来了，后面又开始重复填充蓝色。

其他几中渐变模式与 LinearGradient 基本相同，只是渐变的显示效果不同而已，这里就不做过多介绍了。
其实这些渐变效果通常不会直接使用在程序里。通常情况下，把这种渐变效果作为一个遮罩层来使用，同时结合前面的 PorterDuffXfermode。这样处理后，遮罩层就不再是一个生硬的图形，而是一个具有渐变效果的图层。这样处理的效果会更加柔和、更加自然。下面这个实例通过使用 LinearGradient和 PorterDuffXfermode来创建一个具有倒影效果的图片，效果如下图所示：

ReflectImage

要实现这个效果，首先需要把原图复制一份并进行翻转，代码如下所示：

mSrcBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test1);

    Matrix matrix = new Matrix();
    matrix.setScale(1f,-1f);//垂直翻转

    mRefBitmap = Bitmap.createBitmap(mSrcBitmap,0,0,mSrcBitmap.getWidth(),
            mSrcBitmap.getHeight(),matrix,true);

需要注意的是，使用matrix.setScale(1f,-1f) 方法来实现图片的垂直翻转，这是一个非常有用的技巧，避免了使用旋转变换的复杂计算，同理 matrix.setScale(-1f,1f) 还可以实现水平翻转。

在onDrow() 方法中，首先绘制两张图片即原图和倒影图，只是这个时候还未绘制渐变层，因此倒影图与原图的透明度相同。接下来，在倒影图上面绘制一个同样大小的渐变矩形，并通过 Mode.DST_IN 模式绘制到倒影图上，从而形成一个具有倒影效果的渐变层，完整代码如下所示：

package com.ajun.shader.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

import com.ajun.shader.R;

public class ReflectView extends View {
    private Bitmap mSrcBitmap,mRefBitmap;
    private Paint mPaint;
    private PorterDuffXfermode mXfermode;

    public ReflectView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mSrcBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test1);

        Matrix matrix = new Matrix();
        matrix.setScale(1f,-1f);//垂直翻转

        mRefBitmap = Bitmap.createBitmap(mSrcBitmap,0,0,mSrcBitmap.getWidth(),
                mSrcBitmap.getHeight(),matrix,true);

        mPaint = new Paint();
        mPaint.setShader(new LinearGradient(0, mSrcBitmap.getHeight(),
                0, mSrcBitmap.getHeight()*2, 0xDD000000, 0x10000000, Shader.TileMode.REPEAT));

        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLACK);
        //原图
        canvas.drawBitmap(mSrcBitmap,0,0,null);
        //倒影图
        canvas.drawBitmap(mRefBitmap,0,mSrcBitmap.getHeight(),null);

        mPaint.setXfermode(mXfermode);
        //绘制渐变效果层
        canvas.drawRect(0, mRefBitmap.getHeight(), mRefBitmap.getWidth(), mSrcBitmap.getHeight() * 2, mPaint);
        mPaint.setXfermode(null);
    }
}