three.js 源码注释（九十三）extras/core/Path.js

商域无疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

俺也是刚开始学,好多地儿肯定不对还请见谅.

以下代码是THREE.JS 源码文件中extras/core/Path.js文件的注释.

更多更新在 : https://github.com/omni360/three.js.sourcecode

/**
 * @author zz85 / http://www.lab4games.net/zz85/blog
 * Creates free form 2d path using series of points, lines or curves.
 * 使用系列点创建自由形式的二维路径，直线或曲线。
 *
 **/
/*
///Path类创建2d的路径,包括点,线,和立方体,类似于HTML5 2D画布的API,curvePath类的扩展.
*/
///<summary>Curve</summary>
///<param name ="points" type="Vector2Array">2维向量数组</param>
THREE.Path = function ( points ) {

	THREE.CurvePath.call(this);	//调用CurvePath对象的call方法,将原本属于CurvePath的方法交给当前对象Path来使用.

	this.actions = [];	//可用的动作数组.

	if ( points ) {		//如果有参数points

		this.fromPoints( points );	//调用fromPoints方法创建路径.

	}

};
/*************************************************
****下面是Path对象的方法属性定义,继承自CurvePath对象.
**************************************************/
THREE.Path.prototype = Object.create( THREE.CurvePath.prototype );

THREE.PathActions = {

	MOVE_TO: 'moveTo',		//把路径移动到画布中的指定点，不创建线条
	LINE_TO: 'lineTo',		//添加一个新点，然后在画布中创建从该点到最后指定点的线条
	QUADRATIC_CURVE_TO: 'quadraticCurveTo', // Bezier quadratic curve //创建二次贝塞尔曲线
	BEZIER_CURVE_TO: 'bezierCurveTo', 		// Bezier cubic curve 	  //创建三次贝塞尔曲线
	CSPLINE_THRU: 'splineThru',				// Catmull-rom spline  	  //样条曲线通过
	ARC: 'arc',								// Circle				  //创建弧/曲线（用于创建圆形或部分圆）
	ELLIPSE: 'ellipse'												  //创建椭圆.
};

// TODO Clean up PATH API
/*
///fromPoints方法通过连接二维向量数组(参数vectors)内所有的顶点,创建路径.
*/
///<summary>fromPoints</summary>
///<param name ="vectors" type="Vector2Array">包含顶点信息的二维向量数组</param>
// Create path using straight lines to connect all points
// 连接所有的点,创建路径.
// - vectors: array of Vector2
// - vectors:2位向量数组.
THREE.Path.prototype.fromPoints = function ( vectors ) {

	this.moveTo( vectors[ 0 ].x, vectors[ 0 ].y );	//将光标移到vectors数组中第一个顶点的位置.

	for ( var v = 1, vlen = vectors.length; v < vlen; v ++ ) {	//遍历二维数组

		this.lineTo( vectors[ v ].x, vectors[ v ].y );	//调用lineTo方法,连接所有的顶点.

	};

};

// startPath() endPath()?
/*
///moveTo方法把路径移动到画布中的指定点，不创建线条,把moveTo动作和坐标压入actions数组.
*/
///<summary>moveTo</summary>
///<param name ="x" type="float">x坐标</param>
///<param name ="y" type="float">y坐标</param>
THREE.Path.prototype.moveTo = function ( x, y ) {

	var args = Array.prototype.slice.call( arguments );
	this.actions.push( { action: THREE.PathActions.MOVE_TO, args: args } );		//把moveTo动作和坐标压入actions数组

};
/*
///lineTo方法添加一个新点，然后在画布中创建从该点到最后指定点的线条,把lineTo动作和坐标压入actions数组.
*/
///<summary>moveTo</summary>
///<param name ="x" type="float">结束点x坐标</param>
///<param name ="y" type="float">结束点y坐标</param>
THREE.Path.prototype.lineTo = function ( x, y ) {

	var args = Array.prototype.slice.call( arguments );

	var lastargs = this.actions[ this.actions.length - 1 ].args;

	var x0 = lastargs[ lastargs.length - 2 ];	//通过计算获得起始点x坐标
	var y0 = lastargs[ lastargs.length - 1 ];	//通过计算获得起始点y坐标

	var curve = new THREE.LineCurve( new THREE.Vector2( x0, y0 ), new THREE.Vector2( x, y ) );	//创建可用的2d线段对象
	this.curves.push( curve );	//将曲线压入曲线对象数组

	this.actions.push( { action: THREE.PathActions.LINE_TO, args: args } );	//把lineTo动作和坐标压入actions数组

};
/*
///quadraticCurveTo方法创建二次贝塞尔曲线,把quadraticCurveTo动作和坐标压入actions数组.
*/
///<summary>quadraticCurveTo</summary>
///<param name ="aCPx" type="float">中间点x坐标</param>
///<param name ="aCPy" type="float">中间点y坐标</param>
///<param name ="aX" type="float">结束点x坐标</param>
///<param name ="aY" type="float">结束点y坐标</param>
THREE.Path.prototype.quadraticCurveTo = function( aCPx, aCPy, aX, aY ) {

	var args = Array.prototype.slice.call( arguments );

	var lastargs = this.actions[ this.actions.length - 1 ].args;

	var x0 = lastargs[ lastargs.length - 2 ];	//通过计算获得起始点x坐标
	var y0 = lastargs[ lastargs.length - 1 ];	//通过计算获