安卓杂记（四）利用自定义的PolyBezier()函数将一系列散点绘制成光滑曲线（二）

上一节讲到如何利用canvas画出两点之间的贝塞尔曲线，那么如何连接多点于一条光滑曲线呢？

所谓众里寻他千百度，那人却在灯火阑珊处，大浪淘沙般，谜底终呼之欲出——PolyBezier()函数。

三.PolyBezier()函数详解

  由图形学知识知道一段Bezier曲线由4个控制点p0,p1,p2,p3决定，该曲线经过p0和p3点，即该曲线起于p0点，终于p3点。一条经过鼠标点击点的曲线就可以由多段的Bezier曲线连续而成。

 

以绘制图1中曲线为例，该曲线由两段构成，p0~p3段和p4~p7段，不难看出

p3=p4,即前段曲线的终点是后段曲线的起点。

    在lpPoints结构中会顺序存储p0,p1,p2,p3(p4),p5,p6,p7七个点。

其中p0,p3(p4),p7是已知的，也就是在鼠标绘图过程中p0,p3(p4),p7都是鼠标经过点，已知需要根据这3点反求控制点p1,p2,p5,p6.

   这里可用两端Bezier曲线连续的条件，即p1p0连线即为曲线在p0处切线，p2p3连线为p3处切线，p4p5为p4处切线，p6p7为p7处切线，两段曲线连续(这里用的是一阶连续条件)必然要求p2p3与p4p5在一条线上。端点处可令其倒数为0，即可算得控制点。

根据条件可算得

     p1.x=p0.x;

     p1.y=p0.y;

     p2.x=(p0.x+4*p3.x-p7.x)/4;

     p2.y=(p0.y+4*p3.y-p7.y)/4;

     p5.x=(4*p3.x+p7.x-p0.x)/4;

     p5.y=(4*p3.y+p7.y-p0.y)/4;

     p6.x=p7.x;

     p6.y=p7.y;//一阶倒在端点处为0

所得公式即为PolyBezier的精髓。

然而，在Android中并不提供此函数，需要我们自己定义，好在我们获得了上述公式。

可以每次获取三个点，即p0, p3, p7，因p1与p0的横纵坐标相同，权且不与理会。故只需算出p2即可。利用算得的p2坐标，画出p0与p3之间的贝塞尔曲线。更新p0, p3, p7,即获取一点p11, 令p0 = p3, p3 = p7, p7 = p11,重新绘制p0与p3之间的贝塞尔曲线。直到p7为最后一个点，因p3与p7之间的贝塞尔曲线未画，故可以反过来，令交换p0与p7的值，就可以重复上述步骤。

代码示例如下：

private void polyBezier(Point numList[], int count, Canvas can, Paint mPaint){
    	float startX, startY, conX, conY;
    	
    	Path tempPath = new Path();
    	Paint tmpPaint = new Paint(mPaint); 
        tmpPaint.setStrokeWidth(1); 
    	
    	float medX = numList[0].x;

    	float medY = numList[0].y;
   
    	
    	float endX = numList[1].x;
    	float endY = numList[1].y;
    

        for(int i = 2; i < count ; i++){
        	startX = medX;
        	startY = medY;
        	
        	medX = endX;
        	medY = endY;
        	
        	endX = numList[i].x;;
        	endY = numList[i].y;        	
        	conX = (startX + 4 * medX - endX) / 4.0f;
        	conY = (startY + 4 * medY - endY) / 4.0f;
        	
        	tempPath.moveTo(startX, startY);
        	tempPath.quadTo(conX, conY, medX, medY);
        	can.drawPath(tempPath, tmpPaint);
        	
        	if (i == count - 1){
                conX = (4 * medX + endX - startX) / 4.0f;
                conY = (4 * medY + endY - startY) / 4.0f;
                tempPath.moveTo(medX, medY);
            	tempPath.quadTo(conX, conY, endX, endY);
            	can.drawPath(tempPath, tmpPaint);
            	
        	}
        }
     
    }

那具体如何运用呢，下一节将会用一个实例示之。