SeniorUI0501_Xfermode倒影效果

高级UI汇总​​​​​​​
eniorUI05_Paint_Xfermode模式
##一 Effect Picture
这里写图片描述
##二 Demo
InvertedImageView_SRCIN
##三 RequireMent

  • 图片倒影效果
  • 倒影向下逐渐透明

##四 Theory

  • Matrix实现图片翻转
  • Xfermode的PorterDuff.Mode.SRC_IN将两者图片合成一张透明渐变效果

##五 Core Code

public class InvertedImageView_SRCIN  extends View {
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC,BmpRevert;
    public InvertedImageView_SRCIN(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mBitPaint = new Paint();
        BmpDST = BitmapFactory.decodeResource(getResources(),R.drawable.invert_shade,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(), R.drawable.xyjy6,null);

        Matrix matrix = new Matrix();
        matrix.setScale(1F, -1F);
        // 生成倒影图
        BmpRevert = Bitmap.createBitmap(BmpSRC, 0, 0, BmpSRC.getWidth(), BmpSRC.getHeight(), matrix, true);
    }

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

        //先画出原图
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);

        //再画出倒影
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        canvas.translate(0,BmpSRC.getHeight());

        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(BmpRevert,0,0,mBitPaint);

        mBitPaint.setXfermode(null);

        canvas.restoreToCount(layerId);
    }
}

##4 补充
此案例如果对调src图片和dst图片的内容,可以用PorterDuff.Mode.DST_IN实现,另外还可以用PorterDuff.Mode.SRC_ATOP实现,由此可见Xfermode实现一种效果的方式灵活多样,不必局限于一种Mode,达到你要的效果即可。
InvertedImageView_DSTIN
InvertedImageView_SRCATOP

猜你喜欢

转载自blog.csdn.net/baopengjian/article/details/80758704