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