Android-贝塞尔曲线应用

1.何为贝塞尔曲线？

        贝塞尔曲线(Bézier curve)，又称 贝兹 曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。

2.Android中可以使用贝塞尔曲线的地方

一些应用中UI绘制是可以使用贝塞尔曲线来完成的，现有的应用中比如360流量监控页面波浪球，RealReader的翻页效果实现等等，涉及到特殊曲线绘制的地方，所以贝塞尔曲线的用处还是很广泛的

3.具体用法

核心的API

void  android . graphics . Path .quadTo(float x1, float y1, float x2, float y2)

这是path的方法，path大家应该有所了解，android path用来绘制路径的

x1                控制(操作点)横坐标

y1                控制(操作点)纵坐标

x2                终止点横坐标

y2                终止点纵坐标

画一个弧线要只需要告诉系统起始点，控制点及终止点的坐标，系统会有自己的算法将三个点连成弧线，控制点理解可以是画一段弧的波峰(波谷)的那个点。

下面我以一个例子来说下贝塞尔曲线最简单的用法

自定义view

package com.zl.drawq;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * 贝塞尔曲线
 * @author zhanglong
 *
 */
public class DrawQView extends View{
	
	/**绘制贝塞尔曲线的画笔*/
	private Paint mPaint;
	
	/** 贝赛尔曲线成员变量(起始点，控制（操作点），终止点，3点坐标)*/
	private int startX, startY, controlX, controlY, endX, endY;
	
	/**绘制Path*/
	private Path mPath;
	

	public DrawQView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	/**
	 * 初始化
	 */
	private void init() {
		//画笔初始化
		mPaint = new Paint();
		mPaint.setColor(Color.BLACK);
		mPaint.setAntiAlias(true);
		mPaint.setStyle(Style.STROKE);
		mPaint.setStrokeWidth(5);
		
		mPath = new Path();
		//初始化变量值
		startX = 0;
		startY = 400;
		endX = 400;
		endY = 400;
		controlX = 200;
		controlY = 200;
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		drawPath(canvas);
	}
	
	/**
	 * 具体绘制
	 */
	private void drawPath(Canvas canvas){
		// 重置mPath
		mPath.reset();
		// 贝赛尔曲线的起始点
		mPath.moveTo(startX, startY);
		// 设置贝赛尔曲线的操作点以及终止点
		mPath.quadTo(controlX, controlY, endX, endY);
		// 绘制贝赛尔曲线（Path）
		canvas.drawPath(mPath, mPaint);
	}

}

xml中很简单

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <com.zl.drawq.DrawQView 
        android:id="@+id/drawq_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

项目源码地址：

https://github.com/zl1990lz/DrawPath

这里是最基础贝塞尔曲线介绍，下一篇准备写利用贝塞尔曲线稍复杂点的应用，利用贝塞尔曲线实现360流量监控页面动态的波浪球。