加载中...

8.3.8 Paint API之—— Xfermode与PorterDuff详解(五)

本节引言：

好的，上一节中，我们又写了一个关于Xfermode图片混排的例子——擦美女衣服的Demo，加上前面的 利用Xfermode来实现圆角或圆形ImageView，相信大家对Xfermode已经不再像以前那么陌生了，或者 说有点熟悉了，嗯，本节我们来写Xfermode的最后一个例子，通过Xfermode的ProterDuff.SRC_IN 模式来实现文字加载的效果！还是得贴下ProterDuff的模式图：

本节例子参考自：Android Paint之 setXfermode PorterDuffXfermode 讲解 嗯，话不多说，开始本节内容~

1.要实现的效果图以及实现流程分析：

要实现的效果图：

实现流程分析：

Step 1.首先，一个文字图片(透明背景)

Step 2.初始化画笔，背景图片(DST)，矩形Rect(SRC)

Step 3.先保存图层，接着先绘制背景图，设置混排模式，然后绘制Rect，清除混排模式 接着回复保存的图层，最后修改下Rect区域高度，调用invalidate()让View重绘！

如果流程分析有点不懂，直接看代码，超简单~

2.代码实现：

首先是屏幕工具类，ScreenUtil.java，这里就不贴了，之前的几节中有贴过！ 然后是我们的自定义View类：LoadTextView.java：

  1. /**
  2.  * Created by Jay on 2015/10/26 0026.
  3.  */
  4. public class LoadTextView extends View {
  5.  
  6.     private PorterDuffXfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
  7.     private Bitmap backBitmap;
  8.     private Paint mPaint;
  9.     private int mBitW, mBitH;
  10.     private int mCurW, mCurH, mCurTop;
  11.     private Rect mDynamicRect;
  12.  
  13.     public LoadTextView(Context context) {
  14.         this(context, null);
  15.     }
  16.     public LoadTextView(Context context, AttributeSet attrs) {
  17.         super(context, attrs);
  18.         mCurW = ScreenUtil.getScreenW(context);
  19.         mCurH = ScreenUtil.getScreenH(context);
  20.         init();
  21.     }
  22.     public LoadTextView(Context context, AttributeSet attrs, int defStyleAttr) {
  23.         super(context, attrs, defStyleAttr);
  24.     }
  25.  
  26.  
  27.     private void init() {
  28.         //画笔初始化：
  29.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  30.         mPaint.setFilterBitmap(true);
  31.         mPaint.setDither(true);
  32.         mPaint.setColor(Color.RED);
  33.         //背部图片的初始化
  34.         backBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_string);
  35.         mBitH = backBitmap.getHeight();
  36.         mBitW = backBitmap.getWidth();
  37.         //设置当前的高度
  38.         mCurTop = mBitH;
  39.         mDynamicRect = new Rect(0, mBitH, mBitW, mBitH);  //初始化原图
  40.     }
  41.  
  42.  
  43.     @Override
  44.     protected void onDraw(Canvas canvas) {
  45.         super.onDraw(canvas);
  46.         int saveLayerCount = canvas.saveLayer(0, 0, mCurW, mCurH, mPaint, Canvas.ALL_SAVE_FLAG);
  47.         canvas.drawBitmap(backBitmap, 0, 0, mPaint);// 绘制目标图
  48.         mPaint.setXfermode(mXfermode);    //设置混排模式
  49.         canvas.drawRect(mDynamicRect, mPaint);   //绘制源图
  50.         mPaint.setXfermode(null);         //清除混排模式
  51.         canvas.restoreToCount(saveLayerCount);    //恢复保存的图层
  52.         // 改变Rect区域，假如
  53.         mCurTop -= 2;
  54.         if (mCurTop <= 0) {
  55.             mCurTop = mBitH;
  56.         }
  57.         mDynamicRect.top = mCurTop;
  58.         invalidate();    //重绘
  59.     }
  60.  
  61. }

嗯，没有了，就上面这么点代码，就实现了如图所示的效果，是不是很简单咧~

要coder-pig字体的图片么，贴下~

3.本节代码示例下载：

本节小结：

好的，本节我们又用PorterDuff的SRC_IN模式来写一个文字加载的效果，加上前面的： DST_IN模式实现圆形和圆角ImageView，以及DST_OUT模式来实现擦掉美女衣服，相信 大家对Xfermode的使用已经有眉目了，当然这些例子都是没有太大意义的，实际开发根本不会 用到，不过很便于大家理解~就好像练功夫，师傅领进门，修行靠自身！基础教程只是一个引导 而已，要真正掌握并学以致用还需靠你们自己，多阅读别人的优秀的代码，以及多动手！ 好的，就说这么多，谢谢~

下载地址

立即下载
还没有评论.