看官们,我们在前面章回中介绍过如何绘制曲线,当时使用的是路径的效果,比如给路径设置圆角效果就能画出弧线。不过有些曲线无法通过路径效果画出来,这里就可以使用贝塞尔曲线了,它在计算机图形学中经常用来绘图各种曲线。本章回将介绍如何绘制贝塞尔曲线。
贝塞尔曲线表示两点之间的一条曲线,曲线的曲率通过位于两点之间的控制点进行控制。我只介绍这些基本的概念,详细的图形演示以及数学公式就不展开介绍了,大家自行查阅就可以。有了这些基本概念后就可以绘制贝塞尔曲线了。
绘制贝塞尔曲线通过Path类来实现,该类提供了两个方法,详细如下:
public void quadTo(float x1, float y1, float x2, float y2) {}public void rQuadTo(float dx1, float dy1, float dx2, float dy2) {}
quadTo
方法有四个参数,它表示两个点的坐标,前两个参数是贝塞尔曲线上控制点的坐标,后两个参数是贝塞尔曲线终点的坐标,这里还缺少一个起点坐标,可以使用Path类的moveTo
()方法控制贝塞尔曲线的起点。如果不指定起点,默认使用原点(0,0)当作起点。
rQuardTo
方法有四个参数,不过这些参数不代表具体点的坐标,而是表示坐标的偏移量,其中前两个参数表示控制点坐标的偏移量,后两个参数表示终点坐标的偏移量。
贝塞尔曲线经常用来绘制一些不规则的曲线,比如树叶,花瓣,水波等,接下来我们通过具体的代码来演示。
private void drawWave(Canvas canvas) {
// mPath.reset();//画树叶,或者当作眼睛也可以/*mPath.moveTo(100,200);mPath.quadTo(200,100,400,200);mPath.quadTo(300,300,100,200);mArcPaint.setStyle(Paint.Style.FILL);*///画心形/*mPath.moveTo(400,600);mPath.quadTo(200,400,400,470);mPath.quadTo(600,400,400,600);*///画水波形形状mPath.moveTo(100,300);mPath.quadTo(200,200,300,300);mPath.quadTo(400,400,500,300);mPath.rQuadTo(100,-100,200,0);canvas.drawPath(mPath,mArcPaint);}
上面的代码演示了三种贝塞尔曲线效果,分别是树叶,心形,水波纹。我在这里就不演示具体的效果了,大家可以自己动手去实践。
大家可能不理解代码中的坐标是如何得出的,我的经验是自己动手在纸上画个形状,然后依据形状来确定坐标,起点和终点的坐标与图形的形状有关,图形的弧度与控件点坐标有关。这些坐标中起点和终点相对好计算,控制点的坐标不好计算,这个需要不断地调试才能找到合适的坐标。
看官们,关于Android中"贝塞尔曲线"的例子咱们就介绍到这里,欲知后面还有什么例子,且听下回分解!