一、关于贝塞尔曲线
在工业设计方面贝塞尔曲线有很多用途，同样，在Android中，贝塞尔曲线结合Path类可以实现更复杂的图形，这里我们给一个案例，来实现一种旋转的花朵。对于贝赛尔曲线的理解，建议参考《》，写的非常详细。
二、自定义View的误区
今天我们自定义的View效果如下：
对于花朵而言，首先要构建花瓣，花瓣这里使用了三阶贝赛尔曲线，因为二阶贝赛尔曲线画出来的是树叶。
private void buildLeaf(Canvas canvas){ mPaint.setColor(0xff40835e); int width = getWidth(); int height = getHeight(); if(width==0 || height==0){ return; } int centerX = width/2; int centerY = height/2; int Radius = Math.max(width,height)/2; Path path = new Path(); path.moveTo(0,0); // float leftctrY = - (Radius*4)/5.0f; float leftctrY = - (Radius*7)/10.0f; float leftctrX = -(float) (Math.abs(leftctrY) * Math.tan(Math.toRadians(30))); // path.lineTo(leftctrX,leftctrY); int lastX = 0; int lastY = -Radius; float rightctrY = - (Radius*7)/10.0f; float rightctrX = (float) (Math.abs(rightctrY) * Math.tan(Math.toRadians(30))); path.quadTo(leftctrX,leftctrY,lastX,lastY); path.quadTo(rightctrX,rightctrY,0,0); path.close(); path.setFillType(Path.FillType.WINDING); int restoreId = canvas.save(); Paint.Style style = mPaint.getStyle(); // mPaint.setStyle(Paint.Style.STROKE); canvas.translate(centerX,centerY); canvas.drawPath(path,mPaint); mPaint.setStyle(style); canvas.restoreToCount(restoreId); } 
而我们需要的带有弧度的花瓣，因此二阶显然不行，花瓣的画法难度主要集中于三角函数的计算，此外还有第二个控制点的确定，第二个控制点与原点的举例实际上和离原点最远的边平行，此外过最远的点作垂线相交，否则可能产生如下效果。
private void buildHeart(Canvas canvas){ mPaint.setColor(0xffa7324a); int width = getWidth(); int height = getHeight(); if(width==0 || height==0){ return; } int centerX = width/2; int centerY = height/2; int Radius = Math.max(width,height)/2; Path path = new Path(); path.moveTo(0,0); // float leftctrY = - (Radius*4)/5.0f; float leftctrY = - (Radius*5)/10.0f; float leftctrX = -(float) (Math.abs(leftctrY) * Math.tan(Math.toRadians(60))); // path.lineTo(leftctrX,leftctrY); int lastX = 0; float lastY = -Radius * 8f/10; float rightctrY = - (Radius*5)/10.0f; float rightctrX = (float) (Math.abs(rightctrY) * Math.tan(Math.toRadians(60))); path.cubicTo(leftctrX,leftctrY,leftctrX,-Radius,lastX,lastY); path.cubicTo(rightctrX,-Radius,rightctrX,rightctrY,0,0); path.close(); path.setFillType(Path.FillType.WINDING); int restoreId = canvas.save(); Paint.Style style = mPaint.getStyle(); canvas.translate(centerX,centerY); canvas.drawPath(path,mPaint); mPaint.setStyle(style); canvas.restoreToCount(restoreId); } 
三、实现自定义View-旋转的花朵
public class FlowerView extends View { private TextPaint mPaint; private int strokeWidth = 1; private int textSize = 12; private int minContentSize = 0; private Path mPath; private int mPetalNumbers = 7; private float degree; private int defaultPetalColor = 0xFFFF1493; private int[] colorSet = new int[]{0xffFF1493,0xffFFD700,0xffFFFF00,0xff87CEFA,0xff00FA9A,0xffBA55D3,0xffE0FFFF}; private boolean isPlaying = false; public FlowerView(Context context) { this(context,null); } public FlowerView(Context context, @Nullable AttributeSet attrs) { this(context, attrs,0); } public FlowerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); setClickable(true); initPaint(); minContentSize = ViewConfiguration.get(context).getScaledTouchSlop() * 2; mPath = new Path(); } public boolean isPlaying() { return isPlaying; } private void initPaint() { // 实例化画笔并打开抗锯齿 mPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG ); mPaint.setAntiAlias(true); mPaint.setPathEffect(new CornerPathEffect(10)); //设置线条类型 mPaint.setStrokeWidth(dip2px(strokeWidth)); mPaint.setTextSize(dip2px((textSize))); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); if(widthMode!=MeasureSpec.EXACTLY){ width = (int) dip2px(210); } if(heightMode!=MeasureSpec.EXACTLY){ height = (int) dip2px(210); } setMeasuredDimension(width,height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); final int width = getWidth(); final int height = getHeight(); if(width () { @Override public Float evaluate(float fraction, Float startValue, Float endValue) { return new Float(fraction * 360); } }); animator.setRepeatCount(ValueAnimator.INFINITE); animator.setInterpolator(new LinearInterpolator()); animator.setDuration(3000) .setRepeatMode(ValueAnimator.RESTART); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { setDegree((Float) animation.getAnimatedValue()); } }); } animator.start(); } public void stopRotate(){ isPlaying = false; if(animator!=null){ animator.cancel(); animator = null; } } private void drawFlower(Canvas canvas, int contentSize) { int N = this.mPetalNumbers; for (int i=0;i< N;i++){ drawFlowerPath(canvas,contentSize,N,i); } }//花瓣算法 private void drawFlowerPath(Canvas canvas, int contentSize,int N,int pos) { float perDegree = 360f/N; final float R = contentSize/2f; final float degree = perDegree*pos + this.degree; float endY = (float) (R * Math.sin(Math.toRadians(degree))); float endX = (float) (R * Math.cos(Math.toRadians(degree)));; float firstCtlLength = (float) ((R / 2f) / Math.cos(Math.PI / N)); float leftY = (float) ((firstCtlLength) * Math.sin(degree* Math.PI/180 - Math.PI/N)); float leftX = (float) ((firstCtlLength) * Math.cos(degree* Math.PI/180 - Math.PI/N)); float rightY = (float) ((firstCtlLength) * Math.sin(degree* Math.PI/180 + Math.PI/N)); float rightX = (float) ((firstCtlLength) * Math.cos(degree* Math.PI/180 + Math.PI/N)); float topLeftY = leftY + (float) ( R/2f * Math.sin(degree* Math.PI/180)); //左侧第二控制点 float topLeftX = leftX + (float)( R/2f * Math.cos(degree* Math.PI/180)) ; float topRightY = rightY + (float) ( R/2f * Math.sin(degree* Math.PI/180)); //右侧第二控制点 float topRightX = rightX + (float)( R/2f * Math.cos(degree* Math.PI/180)) ; mPath.reset(); mPath.moveTo(0,0); mPath.cubicTo(leftX,leftY,topLeftX,topLeftY,endX,endY); mPath.cubicTo(topRightX,topRightY,rightX,rightY,0,0); mPath.close(); if(colorSet==null || colorSet.length==0) { mPaint.setColor(0x9aFB2222); }else{ mPaint.setColor(colorSet[pos%N]); } mPath.setFillType(Path.FillType.WINDING); mPaint.setStyle(Paint.Style.FILL); canvas.drawPath(mPath,mPaint); mPaint.setColor(Color.RED); mPaint.setStyle(Paint.Style.STROKE); canvas.drawPath(mPath,mPaint); } private synchronized void clearCanvas(Canvas canvas) { final Xfermode xfermode = mPaint.getXfermode(); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); canvas.drawPaint(mPaint); mPaint.setXfermode(xfermode); } public float dip2px(int dp){ return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dp,getResources().getDisplayMetrics()); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); } @Override protected void onDetachedFromWindow() { super.onDetachedFromWindow(); } public void setDegree(float degree) { this.degree = degree; invalidate(); }} 以上就是整个View的实现，使用方法如下
myFlower = (FlowerView) findViewById(R.id.id_myflower); myFlower.setPetalNumber(7,null); myFlower.setOnClickListener(this); //省略其他不需要给你们看的代码 @Override public void onClick(View v) { if(v.getId()==R.id.id_myflower){ myFlower.startRotate(); } } 