Path 路径

—> CurvePath —> Curve

提供各种接口来绘制2D图形的路径, 类似于 H5 canvas 标签的API.

function Path( ) { } var path = new THREE.Path(); path.moveTo(-4, 4); path.lineTo(4, 4); path.quadraticCurveTo( 2, -2, -4, -4 ); path.bezierCurveTo(-2, -5, 2, -4, -4, 4); path.absarc(-6, 0, 2); path.closePath(); path.moveTo(4, 4); path.splineThru([new THREE.Vector2(4,4), new THREE.Vector2(5,2), new THREE.Vector2(4,1), new THREE.Vector2(5,0), new THREE.Vector2(4,-1), new THREE.Vector2(5,-2), new THREE.Vector2(4,-4)]); var points = path.getPoints(); var geometry = new THREE.BufferGeometry().setFromPoints( points ); material = new THREE.LineBasicMaterial({color: '#339900'}), lines = new THREE.Line(geometry, material); scene.add(lines);

Attributes

type : String

Default value : 'Path'
Description : 类型

currentPoint : Vector2()

Default value : new Vector2()
Description : 当前点. 新绘制的曲线都从这里开始.

Methods

setFromPoints( points ) : null
points Array Vector的点数组

把数组中的点连接起来.

moveTo( x, y ) : null
x Float x坐标
y Float y坐标

把起点 this.currentPoint 设置成( x, y )

lineTo( x, y ) : null
x Float x坐标
y Float y坐标

从 this.currentPoint 到点( x, y )进行连线, 用 LineCurve 来完成.

quadraticCurveTo( aCPx, aCPy, aX, aY ) : null
aCPx Float 控制点x坐标
aCPy Float 控制点y坐标
aX Float 终点x坐标
aY Float 终点y坐标

绘制一条二次贝塞尔曲线. 以下代码绘制圆角矩形. function roundedRect(x, y, width, height, arcR){ var shape = new THREE.Shape(); shape.moveTo(x, y+arcR); shape.lineTo(x+width, y+arcR); shape.quadraticCurveTo(x+width+arcR, y+arcR, x+width+arcR, y); shape.lineTo(x+width+arcR, y-height); shape.quadraticCurveTo(x+width+arcR, y-height-arcR, x+width, y-height-arcR); shape.lineTo(x, y-height-arcR); shape.quadraticCurveTo(x-arcR, y-height-arcR, x-arcR, y-height); shape.lineTo(x-arcR, y); shape.quadraticCurveTo(x-arcR, y+arcR, x, y+arcR); return shape; }

bezierCurveTo( aCP1x, aCP1y, aCP2x, aCP2y, aX, aY ) : null
aCP1x Float 第一个控制点x坐标
aCP1y Float 第一个控制点y坐标
aCP2x Float 第二个控制点x坐标
aCP2y Float 第二个控制点y坐标
aX Float 终点x坐标
aY Float 终点y坐标

绘制一条三次贝塞尔曲线.

splineThru( points ) : null
points Array 点数组

绘制一条样条曲线 SplineCurve.

arc( aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise ) : null
aX Float 圆心x坐标
aY Float 圆心y坐标
aRadius Float 圆弧半径
aStartAngle Float 开始角度
aEndAngle Float 结束角度
aClockwise Boolean 是否顺时针

绘制一个以(aX + this.currentPoint.x, aY + this.currentPoint.y)为圆心, 以 aRadius 为半径, 圆心角为 (aEndAngle - aStartAngle) 的圆弧.

absarc( aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise ) : null
aX Float 圆心x坐标
aY Float 圆心y坐标
aRadius Float 圆弧半径
aStartAngle Float 开始角度
aEndAngle Float 结束角度
aClockwise Boolean 是否顺时针

绘制一个以(aX, aY)为圆心, 以 aRadius 为半径, 圆心角为 (aEndAngle - aStartAngle) 的圆弧.

ellipse( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation ) : null
aX Float 中心点x坐标
aY Float 中心点y坐标
xRadius Float x轴半径
yRadius Float y轴半径
aStartAngle Float 开始角度
aEndAngle Float 结束角度
aClockwise Boolean 是否顺时针

绘制一个以(aX + this.currentPoint.x, aY + this.currentPoint.y)为中心, 以 xRadius 为x轴半径, 以 yRadius 为y轴半径, 椭心角为 (aEndAngle - aStartAngle) 的椭圆.

absellipse( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation ) : null
aX Float 中心点x坐标
aY Float 中心点y坐标
xRadius Float x轴半径
yRadius Float y轴半径
aStartAngle Float 开始角度
aEndAngle Float 结束角度
aClockwise Boolean 是否顺时针

绘制一个以(aX, aY )为中心, 以 xRadius 为x轴半径, 以 yRadius 为y轴半径, 椭心角为 (aEndAngle - aStartAngle) 的椭圆.