在《Android PorterDuff.Mode图形混合处理 》这篇博客中，我们讲解了PorterDuff.Mode对图形混合的处理。这篇我们将通过图形混合的原理，来制作一个手动擦除蒙版显示底层图片

Android 自定义View——蒙版擦除效果实现

在《Android PorterDuff.Mode图形混合处理 》这篇博客中，我们讲解了PorterDuff.Mode对图形混合的处理。这篇我们将通过图形混合的原理，来制作一个手动擦除蒙版显示底层图片的控件。
　　
　　可能我这样描述这节的内容，大家还是不太理解到底要做什么。那我举几个例子，在QQ应用中，QQ聊天有一个功能就是发送手动绘制的图片，其实手动绘制图片这个功能就是通过一个自定义View来完成的；在很多图片的处理中，我们可以将图片隐私部分打上马赛克，或者用其他颜色遮盖，这个功能也是通过自定义本节的View来实现的。我们要讲解的手动擦除蒙版显示底层图片控件和这些功能大同小异，原理实现是相同的。只是做的功能不太相同。

控件功能介绍

首先介绍一下控件的功能：
1. 在View中有背景图片和蒙版，通过手指触碰屏幕和滑动，可以将背景上层的蒙版擦除进而显示出背景图片。
2. 可以在xml布局文件中设置背景图片，且背景只能是mipmap中的图片。
3. 可以设置蒙版的颜色。
4. 可以设置擦除画笔的宽度大小。

　　功能就这么多，接下来我们看代码的实现……

擦除功能实现

1. 创建一个MyBitmapViewAnother继承View。（这里命名不太规则，不要介意……）
2. 实现自定义View中的构造器。

<code class="language-java hljs  has-numbering">    <span class="hljs-keyword">public</span> <span class="hljs-title">MyBitmapViewAnother</span>(Context context) {        <span class="hljs-keyword">super</span>(context);    }    <span class="hljs-comment">/*    该构造器必须实现，因为AttributeSet代表了xml布局文件在引用布局文件时传入的参数集合。    当我们在布局文件中设置控件的相关参数：宽、高、颜色等时，我们要通过AttributeSet对象获得。    */</span>    <span class="hljs-keyword">public</span> <span class="hljs-title">MyBitmapViewAnother</span>(Context context, AttributeSet attrs) {        <span class="hljs-keyword">super</span>(context, attrs);    }</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>

3. 重写View的onMeasure(int widthMeasureSpec, int heightMeasureSpec)和onDraw(Canvas canvas)方法。onMeasure()方法实现是在自定义View构造器调用结束之后调用的，只有onMeasure()方法调用结束之后，我们才可以获得xml布局中设置的我们这个控件的宽和高。onDraw()方法是绘制我们的View界面，通过方法中传入的Canvas对象绘制我们的View。当我们使用自定义的控件时，UI主线程会调用onDraw()方法绘制控件的界面。

　　自定义View之前在《Android 自定义View——自定义View控件 》已经详细的讲过了，看不懂的可以先看一下那篇文章。然后接下来我们就开始在onDraw()方法中绘制了。

4. 定义一个Bitmap代表背景图片，将Bitmap添加到中View的Canvas上。
5. 然后在定义一个Bitmap，为这个Bitmap定义一个Canvas,我们将在这个Bitmap的Canvas上绘制蒙版，和我们手指的路径。然后通过PorterDuff.Mode将我们手指划过的路径与蒙版相交的部分去除掉。

代码：

<code class="language-java hljs  has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyBitmapViewAnother</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> {</span>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> width;<span class="hljs-comment">//设置高</span>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> height;<span class="hljs-comment">//设置高</span>    <span class="hljs-keyword">private</span> Paint mPaint;    <span class="hljs-comment">//设置一个Bitmap</span>    <span class="hljs-keyword">private</span> Bitmap bitmap;    <span class="hljs-comment">//创建该Bitmap的画布</span>    <span class="hljs-keyword">private</span> Canvas bitmapCanvas;    <span class="hljs-keyword">private</span> Paint mPaintCover;    <span class="hljs-keyword">private</span> Paint mPaintRect;    <span class="hljs-comment">//定义一样个背景的Bitmap</span>    <span class="hljs-keyword">private</span> Bitmap mBitmapBackground;    <span class="hljs-keyword">private</span> Matrix matrix;    <span class="hljs-keyword">private</span> Path mPath;    <span class="hljs-keyword">public</span> <span class="hljs-title">MyBitmapViewAnother</span>(Context context) {        <span class="hljs-keyword">super</span>(context);    }    <span class="hljs-keyword">public</span> <span class="hljs-title">MyBitmapViewAnother</span>(Context context, AttributeSet attrs) {        <span class="hljs-keyword">super</span>(context, attrs);        mPaint = <span class="hljs-keyword">new</span> Paint();<span class="hljs-comment">//Bitmap的画笔</span>        <span class="hljs-comment">//设置背景</span>        mBitmapBackground = BitmapFactory.decodeResource(getResources(), R.mipmap.bb);        mPaintCover = <span class="hljs-keyword">new</span> Paint();        mPaintCover.setAntiAlias(<span class="hljs-keyword">true</span>);        mPaintCover.setColor(Color.GRAY);        mPaintCover.setStrokeWidth(<span class="hljs-number">50</span>);        <span class="hljs-comment">//设置图形混合方式，这里使用PorterDuff.Mode.XOR模式，与底层重叠部分设为透明</span>        PorterDuffXfermode mode = <span class="hljs-keyword">new</span> PorterDuffXfermode(PorterDuff.Mode.XOR);        mPaintCover.setXfermode(mode);        mPaintCover.setStyle(Paint.Style.STROKE);        <span class="hljs-comment">//设置笔刷的样式，默认为BUTT，如果设置为ROUND(圆形),SQUARE(方形)，需要将填充类型Style设置为STROKE或者FILL_AND_STROKE</span>        mPaintCover.setStrokeCap(Paint.Cap.ROUND);        <span class="hljs-comment">//设置画笔的结合方式</span>        mPaintCover.setStrokeJoin(Paint.Join.ROUND);        <span class="hljs-comment">//绘制蒙版的画笔</span>        mPaintRect = <span class="hljs-keyword">new</span> Paint();        mPaintRect.setAntiAlias(<span class="hljs-keyword">true</span>);        mPaintRect.setColor(Color.LTGRAY);        <span class="hljs-comment">//路径记录滑动屏幕的路径。</span>        mPath = <span class="hljs-keyword">new</span> Path();    }    <span class="hljs-annotation">@Override</span>    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMeasure</span>(<span class="hljs-keyword">int</span> widthMeasureSpec, <span class="hljs-keyword">int</span> heightMeasureSpec) {        <span class="hljs-keyword">super</span>.onMeasure(widthMeasureSpec, heightMeasureSpec);        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);        setMeasuredDimension(width, height);<span class="hljs-comment">//设置宽和高</span>        <span class="hljs-comment">//创建一个Bitmap，用于绘图。</span>        bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);        bitmapCanvas = <span class="hljs-keyword">new</span> Canvas(bitmap);<span class="hljs-comment">//该画布为bitmap。</span>        <span class="hljs-comment">//绘制背景BitmapBackground大小的矩阵</span>        matrix = <span class="hljs-keyword">new</span> Matrix();<span class="hljs-comment">//如果在构造器中初始化，需要使用reset()方法</span>        matrix.postScale((<span class="hljs-keyword">float</span>)width/mBitmapBackground.getWidth(), (<span class="hljs-keyword">float</span>)height/mBitmapBackground.getHeight());    }    <span class="hljs-annotation">@Override</span>    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDraw</span>(Canvas canvas) {        <span class="hljs-keyword">super</span>.onDraw(canvas);        <span class="hljs-comment">//将bitmapBackground设置该View画布的背景</span>        canvas.drawBitmap(mBitmapBackground,matrix,<span class="hljs-keyword">null</span>);        <span class="hljs-comment">//然后画布添加背景的基础上添加bitmap。</span>        canvas.drawBitmap(bitmap, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, mPaint);        bitmapCanvas.drawRect(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, width, height, mPaintRect);<span class="hljs-comment">//bitmap上绘制一个蒙版</span>        bitmapCanvas.drawPath(mPath, mPaintCover);<span class="hljs-comment">//bitmap上绘制手 划过的路径</span>    }    <span class="hljs-comment">//这里设置初始值是为了不点击屏幕时 ，不显示路径</span>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> down_x=-<span class="hljs-number">100</span>;    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> down_y=-<span class="hljs-number">100</span>;    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> move_x=-<span class="hljs-number">100</span>;    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> move_y=-<span class="hljs-number">100</span>;    <span class="hljs-annotation">@Override</span>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">onTouchEvent</span>(MotionEvent event) {        <span class="hljs-keyword">switch</span> (event.getAction()) {            <span class="hljs-keyword">case</span> MotionEvent.ACTION_DOWN:                <span class="hljs-comment">//获得点击屏幕时的坐标</span>                down_x= event.getX();                down_y=event.getY();                <span class="hljs-comment">//将Path移动到点击点</span>                mPath.moveTo(down_x, down_y);                invalidate();<span class="hljs-comment">//更新画面</span>                <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;            <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE:                <span class="hljs-comment">//获得在屏幕上移动的坐标</span>                move_x= event.getX();                move_y=event.getY();                <span class="hljs-comment">//将移动的轨迹画成直线</span>                mPath.lineTo(move_x, move_y);                <span class="hljs-comment">//然后移动到下一个点。</span>                mPath.moveTo(move_x, move_y);                invalidate();<span class="hljs-comment">//更新画面</span>                <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;        }        <span class="hljs-keyword">return</span> <span class="hljs-keyword">super</span>.onTouchEvent(event);    }}</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li></ul>

　　我们的第一个功能就实现了，通过擦除蒙版，背景图片就出现了（背景是女神范爷哦，哈哈哈哈……）
　　

　　接下来就是我们要通过在xml布局文件中为我们的控件自定义设置背景图片，蒙版颜色，以及擦除画笔宽度的属性，这里就用到了自定义View中，自定义View属性的实现了。
　　

自定义属性实现

这里就直接上实现的步骤了：

1. 在res资源文件中的values文件夹中创建一个mybitmapviewanother_attrs的xml文件。在这个xml文件中定义一个<declare-styleable name="MyBitmapViewAnother"></declare-styleable>的标签，并定义标签的”name”。在标签内添加<attr></attr>添加属性，“name”为属性名，“format”为属性值的类型。
　　注意：这里的属性名“name”不要定义“background”之类的，因为Android中已经使用的这写名字，我们在去使用的时候就会出错。

<code class="language-xml hljs  has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag"><<span class="hljs-title">resources</span>></span>    <span class="hljs-tag"><<span class="hljs-title">declare-styleable</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"MyBitmapViewAnother"</span>></span>        <span class="hljs-comment"><!--背景图片属性，其属性值可以是res中的资源文件--></span>        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"mybitmapviewanother_background"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"reference"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>        <span class="hljs-comment"><!--擦除画笔宽度属性，其属性值可以是具体的值"10dp",也可以是res中的资源文件--></span>        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"mybitmapviewanother_paintwidth"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension|reference"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>    <span class="hljs-tag"></<span class="hljs-title">declare-styleable</span>></span><span class="hljs-tag"></<span class="hljs-title">resources</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

2. 在使用自定义View的布局文件中添加标签：

<code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>    <!<span class="hljs-attribute">--</span>首先声明这里添加注释是错误的，使用时请删除。下面这一句就是对控件属性的声明。格式：<span class="hljs-attribute">xmlns:</span>自定义的名字（就像上面的<span class="hljs-attribute">android</span>）=<span class="hljs-value">"http://schemas.android.com/apk/res-auto"</span><span class="hljs-value">--</span>></span>    xmlns:mybitmapviewanother="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.administrator.mywidgetdemo.activity.PathActivity">    <span class="hljs-tag"><<span class="hljs-title">com.example.administrator.mywidgetdemo.bitmap.MyBitmapViewAnother</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/mypicture"</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>        <span class="hljs-attribute">mybitmapviewanother:mybitmapviewanother_background</span>=<span class="hljs-value">"@mipmap/aa"</span>/></span>        <span class="hljs-comment"><!--使用时，通过如上方式使用。注意：冒号签名的名字和声明时的名字是相同的。--></span><span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>

　　这样我们通过布局文件更改画笔宽度，背景图片：
　　

版权声明：本文为博主原创文章，欢迎转载，转载请在文章显眼处说明文章出处并给出连接。