Update

GcsSloop · GcsSloop · commit 4ec645d9b2e1 · 2016-11-19T23:36:27.000+08:00
diff --git a/CustomView/Advance/[17]touch-matrix-region.md b/CustomView/Advance/[17]touch-matrix-region.md
@@ -1,26 +1,31 @@
 # 特殊控件的事件处理方案
 
+
 本文带大家了解 Android 特殊形状控件的事件处理方式，主要是利用了 Region 和 Matrix 的一些方法，超级实用的事件处理方案，相信看完本篇之后，任何奇葩控件的事件处理都会变得十分简单。
 
 不得不说，Android 对事件体系封装的非常棒，即便对事件体系不太了解的人，只要简单的调用方法就能使用，而且具有防呆设计，能够保证事件流的完整性和统一性，最大可能性的避免了事件处理的混乱，着实令人佩服。
 
 然而世界上并没有绝对完美的东西，**当【事件处理】遇上【自定义View】，一场好戏就开演了，玩的好叫坐镇军前，指挥千军万马而分毫不乱，玩的不好就是抓耳挠腮，眼见敌人前后包抄而无可奈何。**
 
+> #### 注意：
+>
+> 本文中所有的 自定义View 均继承自 CustomView ，这是一个自定义的超类，目的是简化 自定义View 部分常用操作，你可以在 [ViewSupport](https://github.com/GcsSloop/ViewSupport/wiki/CustomView) 中找到它以及关于它的简介。
+
 ## 特殊形状控件
 
 在通常的情况下，自定义 View 直接使用系统的事件体系处理就行，我们也不需要特殊处理，然而当一些特殊的控件出现的时候，麻烦就来了，举个栗子：
 
 ![](http://ww2.sinaimg.cn/large/005Xtdi2jw1f9t9u0tignj308c08cq3f.jpg)
 
-这是一个在遥控器上非常常见的按键布局，注意中间上下左右选择的部分，看起来十分简单，然而当你真正准备在手机上实现的时候麻烦就出现了。因为所有的View默认都是矩形的，所以事件接收区域也是矩形的，如果直接使用系统提供的 View 来组合出一摸一样的布局也很简单，但点击区域该如何处理？显然这样有部分点击区域是在控件外面的，并且控件之间会产生重叠区域，点击的时候容易判断错误，例如：
+这是一个在遥控器上非常常见的按键布局，注意中间上下左右选择的部分，看起来十分简单，然而当你真正准备在手机上实现的时候麻烦就出现了。因为所有的 View 默认都是矩形的，所以事件接收区域也是矩形的，如果直接使用系统提供的 View 来组合出一摸一样的布局也很简单，但点击区域该如何处理？显然有部分点击区域是在控件外面的，并且会产生重叠区域：
 
-> 红色方框表示用 View 组合的情况下，单个 View 的可点击区域。
+> 红色方框表示 View 的可点击区域。
 
 ![](http://ww3.sinaimg.cn/large/005Xtdi2jw1f9ta3eymeej308c08cwf1.jpg)
 
-当我们面对这样比较奇特的控件的时候，有很多处理办法，比较投机的一种就是背景贴一个静态图，按钮做成透明的，设置小一点，放在对应的位置，这样可以保证不会误触，当然了如果想要点击效果可以在按钮按下的时候更新一下背景图，这样虽然也可以，但可点击区域会变小，体验效果会变差。设计方案变得非常复杂，而且逻辑也不容易处理，可以说是一种非常糟糕的设计。
+当我们面对这样比较奇特的控件的时候，有很多处理办法，比较投机的一种就是背景贴一个静态图，按钮做成透明的，设置小一点，放在对应的位置，这样可以保证不会误触，当然了如果想要点击效果可以在按钮按下的时候更新一下背景图，这样虽然也可以，但是这样会导致可点击区域变小，体验效果变差，设计方案变得复杂，而且逻辑也不容易处理，是一种非常糟糕的设计。
 
-当然了，看了我这么多文章的小伙伴应该也猜到我接下来要说什么了，没错，就是自定义 View。当我们面对一些奇葩控件的时候，自定义 View 就变成了一种非常好用的处理方案。
+当然了，看了我这么多文章的小伙伴应该也猜到接下来要说什么了，没错，就是自定义 View。当我们面对一些奇葩控件的时候，自定义 View 就变成了一种非常好用的处理方案。
 
 相信小伙伴们看过 [前面的文章][CustomViewIndex] 之后，对各种图形的绘制已经不成问题了，所以我们直接处理重点问题。
 
@@ -34,44 +39,33 @@ Region 直接翻译的意思是 地域，区域。**在此处应该是区域的
 
  **本文中我们重点要使用到的是 Region 中的 `contains` 方法，这个方法可以判断一个点是否包含在该区域内。**
 
-下面是一个简单的示例程序:
+接下来是一个简单的示例，**判断手指是否是在圆形区域内按下**:
+
+![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f9xtlae5wzj308c0ea3yn.jpg)
+
+代码：
 
 ```java
-public class RegionClickView extends View {
-    Paint mPaint;
-    Region globalRegion;
-    Region circleRegion1;
-    Region circleRegion2;
-    Path circlePath1;
-    Path circlePath2;
+public class RegionClickView extends CustomView {
+    Region circleRegion;
+    Path circlePath;
 
     public RegionClickView(Context context) {
         super(context);
-
-        mPaint = new Paint();
-        mPaint.setStyle(Paint.Style.FILL);
-        mPaint.setColor(Color.GRAY);
-
-        // 用Path创建两个圆
-        circlePath1 = new Path();
-        circlePath2 = new Path();
-        circlePath1.addCircle(100, 100, 50, Path.Direction.CW);
-        circlePath2.addCircle(400, 400, 50, Path.Direction.CW);
-
-        // 创建 Region
-        circleRegion1 = new Region();
-        circleRegion2 = new Region();
+        mDeafultPaint.setColor(0xFF4E5268);
+        circlePath = new Path();
+        circleRegion = new Region();
     }
 
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         super.onSizeChanged(w, h, oldw, oldh);
-        // 将剪裁边界设置为视图大小
-        globalRegion = new Region(0, 0, w, h);
-
+      	// ▼在屏幕中间添加一个圆
+        circlePath.addCircle(w/2, h/2, 300, Path.Direction.CW);
+        // ▼将剪裁边界设置为视图大小
+        Region globalRegion = new Region(-w, -h, w, h);
         // ▼将 Path 添加到 Region 中
-        circleRegion1.setPath(circlePath1, globalRegion);
-        circleRegion2.setPath(circlePath2, globalRegion);
+        circleRegion.setPath(circlePath, globalRegion);
     }
 
     @Override
@@ -82,45 +76,39 @@ public class RegionClickView extends View {
                 int y = (int) event.getY();
 
                 // ▼点击区域判断
-                if (circleRegion1.contains(x,y)){
-                    Toast.makeText(this.getContext(),"圆1被点击",Toast.LENGTH_SHORT).show();
-                }
-                if (circleRegion2.contains(x,y)){
-                    Toast.makeText(this.getContext(),"圆2被点击",Toast.LENGTH_SHORT).show();
+                if (circleRegion.contains(x,y)){
+                    Toast.makeText(this.getContext(),"圆被点击",Toast.LENGTH_SHORT).show();
                 }
                 break;
         }
-        return super.onTouchEvent(event);
+        return true;
     }
 
     @Override
     protected void onDraw(Canvas canvas) {
-        // ▼注意此处将全局变量转化为局部变量，方便 GC 回收 Canvas
-        Path circle1 = circlePath1;
-        Path circle2 = circlePath2;
-
-        // 绘制两个圆
-        canvas.drawPath(circle1,mPaint);
-        canvas.drawPath(circle2,mPaint);
+        // 绘制圆
+        canvas.drawPath(circle1,mDeafultPaint);
     }
 }
 ```
 
 > 代码中比较重要的内容都用 ▼ 符号标记出来了。
 
-上述代码非常简单，就是创建了两个 Path，在 Path 中添加圆形，之后将 Path 设置到 Region 中，当手指在屏幕上按下的时候判断手指按下位置是否在 Region 区域内。
-
-代码整体逻辑非常简单，大家测试一下就行了。
+上述代码非常简单，就是创建了个 Path 并在其中添加圆形，之后将 Path 设置到 Region 中，当手指在屏幕上按下的时候判断手指位置是否在 Region 区域内。
 
 
 
 ## 画布变换后坐标转换问题
 
-还是上述的例子，绘制一个上下左右选择按键，这个控件是上下左右对称的，熟悉我代码风格的小伙伴都知道，如果遇上这种问题，我肯定是要将坐标系平移到这个控件中心的，这样数据比较好计算，然而进行画布变换操作会产生一个新问题：**手指触摸的坐标系和画布坐标系不统一，就可能引起手指触摸位置和绘制位置不统一。**
+还是本文一开始的例子，绘制一个上下左右选择按键，这个控件是上下左右对称的，熟悉我代码风格的小伙伴都知道，如果遇上这种问题，我肯定是要将坐标系平移到这个控件中心的，这样数据比较好计算，然而进行画布变换操作会产生一个新问题：**手指触摸的坐标系和画布坐标系不统一，就可能引起手指触摸位置和绘制位置不统一。**
 
 举个栗子：
 
-> 在手指按下位置绘制一个圆。
+> 画布移动后在手指按下位置绘制一个圆，可以看到，直接拿手指触摸位置的坐标来绘制会导致绘制位置不正确，**两者坐标是相同的，但是由于坐标系不同，导致实际显示位置不同。**
+
+![](http://ww4.sinaimg.cn/large/005Xtdi2jw1f9tdc3p84uj308c0d4mx9.jpg)
+
+代码：
 
 ```java
 public class CanvasVonvertTouchTest extends CustomView{
@@ -160,24 +148,20 @@ public class CanvasVonvertTouchTest extends CustomView{
         float x = down_x;
         float y = down_y;
 
-        // 绘制触摸坐标系，颜色为灰色，为了能够显示出坐标系，将坐标系位置稍微偏移了一点
-        drawTouchCoordinateSpace(canvas);
-
-        canvas.translate(mViewWidth/2, mViewHeight/2);  // 画布平移
-
-        // 绘制平移后的坐标系，颜色为红色
-        drawTranslateCoordinateSpace(canvas);
+        drawTouchCoordinateSpace(canvas);       // 绘制触摸坐标系 灰色
+		
+      	// ▼注意画布平移
+        canvas.translate(mViewWidth/2, mViewHeight/2);  
+        
+        drawTranslateCoordinateSpace(canvas);	 // 绘制平移后的坐标系，红色
 
-        // 如果没有就返回
-        if (x == -1 && y == -1)
-            return;
+        if (x == -1 && y == -1) return;          // 如果没有就返回
 
-        // 在触摸位置绘制一个小圆
-        canvas.drawCircle(x,y,20,mDeafultPaint);
+        canvas.drawCircle(x,y,20,mDeafultPaint); // 在触摸位置绘制一个小圆
     }
 
     /**
-     *  绘制触摸坐标系，颜色为灰色，为了能够显示出坐标系，将坐标系位置稍微偏移了一点
+     *  绘制触摸坐标系，灰色，为了能够显示出坐标系，将坐标系位置稍微偏移了一点
      */
     private void drawTouchCoordinateSpace(Canvas canvas) {
         canvas.save();
@@ -189,7 +173,7 @@ public class CanvasVonvertTouchTest extends CustomView{
     }
 
     /**
-     * 绘制平移后的坐标系，颜色为红色
+     * 绘制平移后的坐标系，红色
      */
     private void drawTranslateCoordinateSpace(Canvas canvas) {
         CanvasAidUtils.set2DAxisLength(500, 500, 700, 700);
@@ -200,12 +184,6 @@ public class CanvasVonvertTouchTest extends CustomView{
 }
 ```
 
-可以看到，直接拿手指触摸位置的坐标来绘制会导致绘制位置不正确，大概会像这样子：
-
-![](http://ww4.sinaimg.cn/large/005Xtdi2jw1f9tdc3p84uj308c0d4mx9.jpg)
-
-两者坐标是相同的，但是由于坐标系不同，导致实际显示位置不同。
-
 **那么问题来了，我们在之前的文章中讲过，映射不同坐标系的坐标用 什么来着？**  
 **是 Matrix。**
 
@@ -214,7 +192,11 @@ public class CanvasVonvertTouchTest extends CustomView{
 
 > **Matrix 是一个矩阵，主要功能是坐标映射，数值转换。**
 
-那么接下来我们就对上面的示例进行简单的改造一下，让触摸位置和实际绘制绘制重合。
+那么接下来我们就对上面的示例进行简单的改造一下，让触摸位置和实际绘制绘制重合。小白点和黑色的圆没有完全重合是因为系统显示触摸位置的绘制逻辑和我使用的绘制逻辑不太相同导致的。
+
+![](http://ww3.sinaimg.cn/large/005Xtdi2jw1f9te2mzxcvj308c0d40st.jpg)
+
+代码：
 
 **注意：比较重要的修改位置用▼标记出来了。**
 
@@ -256,17 +238,13 @@ public class CanvasVonvertTouchTest extends CustomView{
     protected void onDraw(Canvas canvas) {
         float[] pts = {down_x, down_y};
 
-        // 绘制触摸坐标系，颜色为灰色，为了能够显示出坐标系，将坐标系位置稍微偏移了一点
-        drawTouchCoordinateSpace(canvas);
-
-        canvas.translate(mViewWidth/2, mViewHeight/2);  // 画布平移
-
-        // 绘制平移后的坐标系，颜色为红色
-        drawTranslateCoordinateSpace(canvas);
-
-        // 如果没有就返回
-        if (pts[0] == -1 && pts[1] == -1)
-            return;
+        drawTouchCoordinateSpace(canvas);            // 绘制触摸坐标系，灰色
+        // ▼注意画布平移
+        canvas.translate(mViewWidth/2, mViewHeight/2);  
+        
+        drawTranslateCoordinateSpace(canvas);        // 绘制平移后的坐标系，红色
+        
+        if (pts[0] == -1 && pts[1] == -1) return;    // 如果没有就返回
 
         // ▼ 获得当前矩阵的逆矩阵
         Matrix invertMatrix = new Matrix();
@@ -301,15 +279,8 @@ public class CanvasVonvertTouchTest extends CustomView{
         CanvasAidUtils.draw2DCoordinateSpace(canvas);
     }
 }
-
 ```
 
-**绘制结果：**
-
-小白点和黑色的圆没有完全重合是因为系统显示触摸位置的绘制逻辑和我使用的绘制逻辑不太相同，两者的位置是一样的。
-
-![](http://ww3.sinaimg.cn/large/005Xtdi2jw1f9te2mzxcvj308c0d40st.jpg)
-
 其实核心部分就这两点：
 
 ```java
@@ -336,6 +307,10 @@ invertMatrix.mapPoints(pts);
 
 在解决了上述两大难题之后，相信不论形状如何奇葩的自定义控件，基本上都难不倒大家了，最后用一个简单的示例作为结尾，还是文章开头所举的例子，核心内容就是上面讲的两个东西。
 
+![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f9tinrk6ilj308c0eat92.jpg)
+
+代码：
+
 ```java
 public class RemoteControlMenu extends CustomView {
     Path up_p, down_p, left_p, right_p, center_p;
@@ -545,8 +520,6 @@ public class RemoteControlMenu extends CustomView {
 
 当手指在某一区域活动时，该区域会高亮显示，如果注册了监听器，点击某一区域会触发监听器回调。
 
-![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f9tinrk6ilj308c0eat92.jpg)
-
 
 
 ## 总结
