貝塞爾曲線---(沙漏)
摘要：
貝塞爾曲線
貝塞爾曲線的幾個步驟
1、起始點
2、控制點
3、控制點
4、結束點
為了大家更好地理解這幾個概念，附上下圖
貝塞爾曲線示意圖
嗯，我們開始實現沙漏曲線
1、我們看一下，實現的最終的效果圖
...
貝塞爾曲線
貝塞爾曲線的幾個步驟
1、起始點
2、控制點
3、控制點
4、結束點
為了大家更好地理解這幾個概念，附上下圖
貝塞爾曲線示意圖
嗯，我們開始實現沙漏曲線
1、我們看一下，實現的最終的效果圖
最終實現效果圖
2、我們分析一下：起始點、控制點、結束點的位置
貝塞爾曲線--關鍵點位
3、程式碼實現
我們把 沙漏 的整體部分，分為四部分：
1、上、左部分
2、上、右部分
3、下、左部分
4、下、右部分
各部分的實現原理都相同，實現了其中一個，其餘部分也輕而易舉的實現出來。
▲上、左部分的實現：
核心程式碼：
//Top left Path glassArcPathTopLeft = new Path(); glassArcPathTopLeft.moveTo(hourglassArcStartedPointLeftBound, hourglassArcStartedPointTopBound); glassArcPathTopLeft.cubicTo(hourglassArcOneControlPoint.x, hourglassArcOneControlPoint.y, hourglassArcTwoControlPoint.x, hourglassArcTwoControlPoint.y, hourglassCenterX, hourglassCenterY); canvas.drawPath(glassArcPathTopLeft , mHourglassArcPaint);
1、Path.moveTo(startPointX, startPointY);
【startPointX, 起始點的X座標，startPointY，起始點的Y座標】
2、Path.cubicTo(controlOnePointX, controlOnePointY, controlTwoPointX, controlTwoPointY, endPointX, endPointY);
【控制點1的X座標，控制點1的Y座標，控制點2的X座標，控制點2的Y座標，結束點的X座標，結束點的Y座標】
3、Canvas.drawPath(Path, Paint);
【繪製】
左、上部分的實現效果
3.2、全部程式碼
在開發中我們還要考慮到，padding，wrap_content等諸多情況
下面是全部的繪製核心程式碼
private void drawGlass(Canvas canvas) {
/*
Canvas rectangle.
*/
int drawableLeftBound = getLeft() + getPaddingLeft();
int drawableTopBound = getTop() + getPaddingTop();
int drawableRightBound = getRight() - getPaddingRight();
int drawableBottomBound = getBottom() - getPaddingBottom();
/*
Save drawable rectangle layer.
*/
RectF rectF = new RectF();
rectF.left = drawableLeftBound;
rectF.top = drawableTopBound;
rectF.right = drawableRightBound;
rectF.bottom = drawableBottomBound;
canvas.saveLayerAlpha(rectF, 200);
float drawableDiameterY = (rectF.bottom - rectF.top);
float drawableRadiusY = drawableDiameterY / 2f;
float drawableDiameterX = (rectF.right - rectF.left);
float drawableRadiusX = drawableDiameterX / 2f;
/*
中心位置
*/
float hourglassCenterX = rectF.left + drawableRadiusX;
float hourglassCenterY = rectF.top + drawableRadiusY;
/*
Bounds
*/
float hourglassLeftBound = rectF.left + mHourglassPaintWidth;
float hourglassTopBound = rectF.top + mHourglassPaintWidth;
float hourglassRightBound = rectF.right + mHourglassPaintWidth;
float hourglassBottomBound = rectF.bottom + mHourglassPaintWidth;
//Arc started bounds.
float hourglassArcStartedPointLeftBound = rectF.left + drawableDiameterY / 8f;
float hourglassArcStartedPointTopBound = rectF.top;
float hourglassArcStartedPointRightBound = rectF.right - drawableDiameterY / 8f;
float hourglassArcStartedPointBottomBound = rectF.bottom;
/*
Eight control point
*/
PointF hourglassArcOneControlPoint = new PointF();
hourglassArcOneControlPoint.x = hourglassLeftBound;
hourglassArcOneControlPoint.y = drawableTopBound + drawableRadiusY / 4F;
PointF hourglassArcTwoControlPoint = new PointF();
hourglassArcTwoControlPoint.x = hourglassLeftBound;
hourglassArcTwoControlPoint.y = drawableTopBound + drawableRadiusY / 2F;
PointF hourglassArcThreeControlPoint = new PointF();
hourglassArcThreeControlPoint.x = hourglassRightBound;
hourglassArcThreeControlPoint.y = drawableTopBound + drawableRadiusY / 4F;
PointF hourglassArcFourControlPoint = new PointF();
hourglassArcFourControlPoint.x = hourglassRightBound;
hourglassArcFourControlPoint.y = drawableTopBound + drawableRadiusY / 2F;
PointF hourglassArcFiveControlPoint = new PointF();
hourglassArcFiveControlPoint.x = hourglassLeftBound;
hourglassArcFiveControlPoint.y = drawableBottomBound - drawableRadiusY / 4F;
PointF hourglassArcSixControlPoint = new PointF();
hourglassArcSixControlPoint.x = hourglassLeftBound;
hourglassArcSixControlPoint.y = drawableBottomBound - drawableRadiusY / 2F;
PointF hourglassArcSevenControlPoint = new PointF();
hourglassArcSevenControlPoint.x = hourglassRightBound;
hourglassArcSevenControlPoint.y = drawableBottomBound - drawableRadiusY / 4F;
PointF hourglassArcEightControlPoint = new PointF();
hourglassArcEightControlPoint.x = hourglassRightBound;
hourglassArcEightControlPoint.y = drawableBottomBound - drawableRadiusY / 2F;
Paint paint = new Paint();
paint.setStrokeWidth(15);
paint.setColor(Color.GREEN);
canvas.drawPoint(hourglassArcOneControlPoint.x, hourglassArcOneControlPoint.y, paint);
canvas.drawPoint(hourglassArcTwoControlPoint.x, hourglassArcTwoControlPoint.y, paint);
canvas.drawPoint(hourglassArcThreeControlPoint.x, hourglassArcThreeControlPoint.y, paint);
canvas.drawPoint(hourglassArcFourControlPoint.x, hourglassArcFourControlPoint.y, paint);
canvas.drawPoint(hourglassArcFiveControlPoint.x, hourglassArcFiveControlPoint.y, paint);
canvas.drawPoint(hourglassArcSixControlPoint.x, hourglassArcSixControlPoint.y, paint);
canvas.drawPoint(hourglassArcSevenControlPoint.x, hourglassArcSevenControlPoint.y, paint);
canvas.drawPoint(hourglassArcEightControlPoint.x, hourglassArcEightControlPoint.y, paint);
/*
Glass top.
*/
//Top left
Path glassArcPathTopLeft = new Path();
glassArcPathTopLeft.moveTo(hourglassArcStartedPointLeftBound, hourglassArcStartedPointTopBound);
glassArcPathTopLeft.cubicTo(hourglassArcOneControlPoint.x, hourglassArcOneControlPoint.y, hourglassArcTwoControlPoint.x, hourglassArcTwoControlPoint.y, hourglassCenterX, hourglassCenterY);
Path glassArcPathTopCenter = new Path();
glassArcPathTopCenter.moveTo(getRight() / 8f, getTop());
glassArcPathTopCenter.lineTo(hourglassRightBound - getRight() / 8f, getTop());
glassArcPathTopCenter.lineTo(hourglassCenterX, hourglassCenterY);
//Top right.
Path glassArcPathTopRight = new Path();
glassArcPathTopRight.moveTo(hourglassArcStartedPointRightBound, hourglassArcStartedPointTopBound);
glassArcPathTopRight.cubicTo(hourglassArcThreeControlPoint.x, hourglassArcThreeControlPoint.y, hourglassArcFourControlPoint.x, hourglassArcFourControlPoint.y, hourglassCenterX, hourglassCenterY);
/*
Glass bottom.
*/
//Bottom left.
Path glassArcPathBottomLeft = new Path();
glassArcPathBottomLeft.moveTo(hourglassArcStartedPointLeftBound, hourglassArcStartedPointBottomBound);
glassArcPathBottomLeft.cubicTo(hourglassArcFiveControlPoint.x, hourglassArcFiveControlPoint.y, hourglassArcSixControlPoint.x, hourglassArcSixControlPoint.y, hourglassCenterX, hourglassCenterY);
//Bottom right.
Path glassArcPathBottomRight = new Path();
glassArcPathBottomRight.moveTo(hourglassArcStartedPointRightBound, hourglassArcStartedPointBottomBound);
glassArcPathBottomRight.cubicTo(hourglassArcSevenControlPoint.x, hourglassArcSevenControlPoint.y, hourglassArcEightControlPoint.x, hourglassArcEightControlPoint.y, hourglassCenterX, hourglassCenterY);
/*
The whole glass.
*/
Path glassPath = new Path();
glassPath.addPath(glassArcPathTopLeft);
glassPath.addPath(glassArcPathTopRight);
glassPath.addPath(glassArcPathBottomLeft);
glassPath.addPath(glassArcPathBottomRight);
canvas.drawPath(glassPath, mHourglassArcPaint);
//Close top bottom bounds.
Path glassPathTopClosed = new Path();
glassPathTopClosed.moveTo(hourglassArcStartedPointLeftBound, hourglassArcStartedPointTopBound);
glassPathTopClosed.lineTo(hourglassArcStartedPointRightBound, hourglassArcStartedPointTopBound);
Path glassPathBottomClosed = new Path();
glassPathBottomClosed.moveTo(hourglassArcStartedPointLeftBound, hourglassArcStartedPointBottomBound);
glassPathBottomClosed.lineTo(hourglassArcStartedPointRightBound, hourglassArcStartedPointBottomBound);
Path glassDecorPath = new Path();
glassDecorPath.addPath(glassPathTopClosed);
glassDecorPath.addPath(glassPathBottomClosed);
canvas.drawPath(glassDecorPath, mHourglassDecorPaint);
}
俗話說：欲速則不達，關於貝塞爾曲線的簡單小案例就講到這裡了，如果你還意猶未盡，那麼不要悲傷，請檢視作者的其他文章，更多幹貨等著你.....
切記，不要吃得太飽哦，多消化消化。