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


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);
    }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 Android 图片扫光效果,可以通过以下步骤: 1. 创建一个 ImageView 控件,在其中加载要显示的图片。 2. 创建一个线性渐变的 Shader 对象,用于实现扫光效果。可以使用 LinearGradient 类来创建该对象。 3. 创建一个 Paint 对象,设置其 Shader 为线性渐变的 Shader 对象,然后设置其 Xfermode 为 SRC_IN,这样可以让扫光只显示在图片的区域内。 4. 在 ImageView 控件的 onDraw() 方法中,使用 Canvas 对象绘制图片和扫光效果。首先绘制图片,然后再使用 Paint 对象绘制扫光效果。 下面是一个示例代码,实现了从左到右的扫光效果: ```java public class SweepImageView extends ImageView { private Paint mPaint; private LinearGradient mShader; private int mSweepWidth; public SweepImageView(Context context, AttributeSet attrs) { super(context, attrs); mSweepWidth = getWidth() / 5; int[] colors = {0x00000000, 0xff000000, 0xff000000, 0x00000000}; float[] positions = {0f, 0.3f, 0.7f, 1f}; mShader = new LinearGradient(0, 0, mSweepWidth, 0, colors, positions, Shader.TileMode.CLAMP); mPaint = new Paint(); mPaint.setShader(mShader); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); canvas.translate(-mSweepWidth, 0); canvas.drawRect(0, 0, mSweepWidth, getHeight(), mPaint); canvas.restore(); } } ``` 在该示例代码中,创建了一个 LinearGradient 对象,使用了四个颜色值,分别表示透明、黑色、黑色和透明。其中,0x00000000 表示透明,0xff000000 表示黑色。使用了一个 float 类型的数组 positions,来指定每个颜色值所占的位置。在 Paint 对象中,设置了 Shader 为线性渐变的 Shader 对象,设置了 Xfermode 为 SRC_IN,这样可以让扫光只显示在图片的区域内。在 onDraw() 方法中,使用 Canvas 对象绘制图片和扫光效果,首先绘制图片,然后再使用 Paint 对象绘制扫光效果。通过调用 canvas.save() 和 canvas.restore() 方法,可以保证绘制完扫光效果后,画布的状态不会影响到后续的绘制操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值