Android自定義view進階-- 神奇的貝塞爾曲線

轉載請注明出處：http://blog.csdn.NET/wingichoy/article/details/50492828

今天給大家介紹一個非常神奇的曲線，貝塞爾曲線。相信大家之前都有耳聞。

很久之前就久聞該線大名，但是一直不是很了解，在經過一番谷歌之後，有了初步的概念：三點确定一條曲線：起點，終點，輔助點。

三個點的基本關系如下：

當初看這圖我也看了老半天，隻知道是非常平滑，不知道三個點的具體關系，于是變寫了一段程式來測試輔助點與始終點的關系。

Android 的Path類提供了繪制二階貝塞爾曲線的方法，使用方法如下：

[java] view plain copy

1. //設定起點  
2. path.moveTo(200,200);  
3. //設定輔助點坐标 300，200       終點坐标400，200  
4. path.quadTo(300, 200, 400, 200);  

這裡我将貝塞爾曲線的輔助點y軸和起始點設定相同，draw以後效果如下：

看到是一條直線，這是因為他y軸沒有拉伸，隻是x軸進行了拉伸。把輔助點y+100嘗試

看到已經拉伸。。其實這樣還是不能很好的展現 貝塞爾曲線的規律。 是以要持續改變，研究他的規律，這裡重寫onTouchEvent，讓觸摸點的位置作為輔助點。觀察變化。

[java] view plain copy

1. @Override  
2.     protected void onDraw(Canvas canvas) {  
3.         Paint p = new Paint();  
4.         p.setStyle(Paint.Style.STROKE);  
5.         p.setStrokeWidth(10);  
6.         Path path = new Path();  
7.         path.moveTo(200, 200);  
8.         path.quadTo(mSupX, mSupY, 400, 200);  
9.         canvas.drawPath(path,p);  
10.         super.onDraw(canvas);  
11.     }  
12.     @Override  
13.     public boolean onTouchEvent(MotionEvent event) {  
14.         switch (event.getAction()){  
15.             case MotionEvent.ACTION_MOVE:  
16.                 mSupX = event.getX();  
17.                 mSupY = event.getY();  
18.                 invalidate();  
19.         }  
20.         return true;  
21.     }  

可以看到 是根據滑鼠位置變化的曲線，可是現在還是不能很好的表現曲線的突出點和輔助點關系，接下來把輔助點也畫出來，友善觀察。

[java] view plain copy

1. canvas.drawPoint(mSupX,mSupY,p);  

這下，輔助點和曲線的關系就很明顯了。

許多炫酷的效果都離不開貝塞爾曲線，貝塞爾曲線的應用：仿360記憶體清理效果。