Android PorterDuffXfermode 和 BitmapShader，实现溶图遮罩效果

最新推荐文章于 2021-06-22 16:31:41 发布

张雨zy

最新推荐文章于 2021-06-22 16:31:41 发布

阅读量836

点赞数

分类专栏： Android基础文章标签：溶图遮罩 PorterDuffXfermode BitmapShader

本文链接：https://blog.csdn.net/yu540135101/article/details/103278382

版权

Android基础专栏收录该内容

176 篇文章

订阅专栏

本文介绍如何使用PorterDuffXfermode和BitmapShader实现图形合成，包括将图片溶合成特定形状和利用文字作为遮罩进行图形处理的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Demo

https://gitee.com/olleh/MyShader.git

对照表中先绘制的是dst遮罩

在这里插入图片描述

PorterDuffXfermode实现溶图效果

将一个美女图片溶图成五角星的形状
在这里插入图片描述

 private Bitmap srcBitmap;
    private Bitmap dstBitmap;
    private Paint paint;


    private void init() {
        srcBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.women);
        dstBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.shape);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(dstBitmap, null, new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), null);
        canvas.drawBitmap(srcBitmap, null, new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), paint);
    }

PorterDuffXfermode实现文字遮罩

这里文字就相当于是形状
在这里插入图片描述

public class MyShapeTextView extends android.support.v7.widget.AppCompatTextView {
    public MyShapeTextView(Context context) {
        this(context, null);
    }

    public MyShapeTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private Bitmap dstBitmap;
    private Paint paint;


    private void init() {
        dstBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.gradient_a3_nr1014);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setTextSize(200);
        paint.setColor(Color.BLACK);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawTextWithCenterPoint(canvas, canvas.getWidth() / 2, canvas.getHeight() / 2, "你好啊", paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(dstBitmap, null, new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), paint);
        paint.setXfermode(null);
    }

    /**
     * 以中心点绘制文字
     *
     * @param canvas
     * @param centerX
     * @param centerY
     * @param text
     * @param paint
     */
    private void drawTextWithCenterPoint(Canvas canvas, int centerX, int centerY, String text, Paint paint) {
        //获取文本的宽度，但是是一个比较粗略的结果
        float textWidth = paint.measureText(text);
        //文字度量
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        //得到基线的位置
        float baselineY = centerY + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        //绘制
        canvas.drawText(text, centerX - textWidth / 2, baselineY, paint);
    }
}

使用BitmapShader实现文字遮罩

在这里插入图片描述

public class MyShapeTextView2 extends android.support.v7.widget.AppCompatTextView {
    public MyShapeTextView2(Context context) {
        this(context, null);
    }

    public MyShapeTextView2(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private Bitmap dstBitmap;
    private Paint paint;


    private void init() {
        dstBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.gradient_a3_nr1014);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setTextSize(200);
        paint.setColor(Color.BLACK);
        paint.setShader(new BitmapShader(dstBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawTextWithCenterPoint(canvas, canvas.getWidth() / 2, canvas.getHeight() / 2, "你好啊222", paint);
    }

    /**
     * 以中心点绘制文字
     *
     * @param canvas
     * @param centerX
     * @param centerY
     * @param text
     * @param paint
     */
    private void drawTextWithCenterPoint(Canvas canvas, int centerX, int centerY, String text, Paint paint) {
        //获取文本的宽度，但是是一个比较粗略的结果
        float textWidth = paint.measureText(text);
        //文字度量
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        //得到基线的位置
        float baselineY = centerY + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        //绘制
        canvas.drawText(text, centerX - textWidth / 2, baselineY, paint);
    }
}