這篇文章給大家介紹怎么在Android應(yīng)用中實現(xiàn)一個貝塞爾曲線,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。

貝塞爾曲線有一階、二階、三階、N階
一階就是一條直線,有起點終點,沒有控制點,對應(yīng)方法就是
canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) ;
二階為曲線,有起點終點,一個控制點,對應(yīng)方法就是
path.quadTo(float x1, float y1, float x2, float y2);
其中x1、y1為控制點坐標(biāo), x2、y2為終點坐標(biāo),效果如下:

三階由倆個控制點控制,對應(yīng)方法就是
path.cubicTo(float x1, float y1, float x2, float y2, float x3, float y3);
其中x1、y1、x2、y2為兩個控制點坐標(biāo), x3、y3為終點坐標(biāo),效果如下:

做一個demo鞏固一下用法:

新建一個SecondBezierView繼承View,重寫構(gòu)造方法、初始化畫筆、固定起點和終點的坐標(biāo),重寫onTouchEvent()方法獲取當(dāng)前點擊的點為控制點:
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
mControlX = event.getX();
mControlY = event.getY();
invalidate();
break;
}
return true;
}在onDraw()方法中畫點、畫連接線、畫文本、畫二階貝塞爾曲線
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mStartX, mStartY, 8, mLinePaint);
canvas.drawText("起點", mStartX, mStartY, mLinePaint);
canvas.drawCircle(mEndX, mEndY, 8, mLinePaint);
canvas.drawText("終點", mEndX, mEndY, mLinePaint);
canvas.drawCircle(mControlX, mControlY, 8, mLinePaint);
canvas.drawText("控制點", mControlX, mControlY, mLinePaint);
canvas.drawLine(mStartX, mStartY, mControlX, mControlY, mLinePaint);
canvas.drawLine(mEndX, mEndY, mControlX, mControlY, mLinePaint);
mBezierPath.reset();//因為不斷重繪,path的路徑也要重置,不然頁面上會顯示很多條線
mBezierPath.moveTo(mStartX, mStartY);//移至起點
mBezierPath.quadTo(mControlX, mControlY, mEndX, mEndY);//二階貝塞爾曲線,傳入控制點和終點坐標(biāo)
canvas.drawPath(mBezierPath, mBezierPaint);
}最后添加一個回彈的動畫,用的是OvershootInterpolator插值器,在onTouchEvent的MotionEvent.ACTION_UP中:
case MotionEvent.ACTION_UP:
ValueAnimator animX = ValueAnimator.ofFloat(mControlX, getWidth() / 2);
animX.setDuration(500);
animX.setInterpolator(new OvershootInterpolator());
animX.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mControlX = (float) animation.getAnimatedValue();
invalidate();
}
});
animX.start();
ValueAnimator animY = ValueAnimator.ofFloat(mControlY, getHeight() / 2);
animY.setDuration(500);
animY.setInterpolator(new OvershootInterpolator());
animY.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mControlY = (float) animation.getAnimatedValue();
invalidate();
}
});
animY.start();
break;再來個三階的

主要就是用到了多點觸控:
private boolean mIsSecondPoint = false;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MASK) {//多點觸控
case MotionEvent.ACTION_POINTER_DOWN:
mIsSecondPoint = true;
break;
case MotionEvent.ACTION_POINTER_UP:
mIsSecondPoint = false;
break;
case MotionEvent.ACTION_MOVE:
mControlX1 = event.getX(0);//獲取控制點1的橫縱坐標(biāo)
mControlY1 = event.getY(0);
if (mIsSecondPoint) {
mControlX2 = event.getX(1);//獲取控制點2的橫縱坐標(biāo)
mControlY2 = event.getY(1);
}
invalidate();
break;
}
return true;
}然后再onDraw()中畫三階貝塞爾曲線
mBezierPath.reset(); mBezierPath.moveTo(mStartX, mStartY); mBezierPath.cubicTo(mControlX1, mControlY1, mControlX2, mControlY2, mEndX, mEndY); canvas.drawPath(mBezierPath, mBezierPaint);
關(guān)于怎么在Android應(yīng)用中實現(xiàn)一個貝塞爾曲線就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
分享文章:怎么在Android應(yīng)用中實現(xiàn)一個貝塞爾曲線-創(chuàng)新互聯(lián)
分享地址:http://chinadenli.net/article20/piico.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、App開發(fā)、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容