上一篇中我簡單的介(粘)紹(貼)了一下貝塞爾曲線(Bezier)曲線的原理和公式,但是作為數(shù)學界排的上名號的渣渣,我只能默默的溜過;
?? 不過還好,android幫我們實現(xiàn)好了這個貝塞爾曲線的使用;
Path
這個類中封裝了要使用貝塞爾曲線(Bezier)的簡單方法;使用起來也很簡單,總的來說也只有三步
- 初始化Path
mPath = new Path();
- path移動到起點
mPath.moveTo(startX, startY / 3);
- 確定直線的終點
mPath.lineTo(endX, endY / 3);
- 調用canvas繪制貝塞爾曲線
canvas.drawPath(mPath, mPaint);
好了,到這里一階的一條直線就完成了;
??但是這個完全沒任何卵用啊,就一條直線有木有!!
但是,我們可以一直畫下去,就像這樣:
path.moveTo(touchX + getWidth() / 20, touchY - getHeight() / 10);
path.lineTo(touchX + getWidth() / 20, touchY);
path.lineTo(touchX - getWidth() / 20, touchY);
path.lineTo(touchX - getWidth() / 20, touchY - getHeight() / 10);
path.lineTo(touchX, touchY - getHeight() / 7);
path.lineTo(touchX + getWidth() / 20, touchY - getHeight() / 10 + 2);
這段代碼繪制完成之后就是一個隨著手指一動的小火箭了
這里寫圖片描述
??丑爆了有木有,不過還好,如果是大神的話應該可以繪制成一個比較好一些的了吧,主要還是原理,相對于自己直接畫直線,已經(jīng)大大簡化了;
二階曲線##
二階曲線在安卓中的定義也是很簡單的,就是調用quadTo方法,
mPath.moveTo(startX, startY);
mPath.quadTo(touchX, touchY, endX, endY);
canvas.drawPath(mPath, mPaint);
這里寫圖片描述
不管是幾階的,都是要先moveTo到起點;
三階曲線
這里寫圖片描述
mPath.moveTo(pointFStart.x, pointFStart.y);
mPath.cubicTo(pointFFirst.x, pointFFirst.y, pointFSecond.x, pointFSecond.y, pointFEnd.x, pointFEnd.y);
canvas.drawPath(mPath, mPaint);
途中從下倒上,四個點依次是pointFStart,pointFFirst,pointFSecond,pointFSecond;根本沒什么難度,非常簡單,可以直接使用,上篇提到的"心"的移動就是按照這個軌跡進行移動,所以看起來十分順滑,效果也不錯;
貝塞爾曲線的繪制本身并沒有什么難度,這些都是很基礎的一些東西,但是卻能實現(xiàn)一些很炫酷的效果,比如qq上的粘性控件的效果等,這些都可以實現(xiàn);
好了,簡單的使用就介紹到這里了
,[史上最全的貝塞爾曲線(Bezier)全解(三):貝塞爾曲線實現(xiàn)滿屏愛心]我會利用貝塞爾曲線實現(xiàn)一些炫酷的效果
