ShapePath 图形路径

把形状 Shape 转化为路径 Path, 比如 SVG 形状. 构造函数内不会传进点作参数.

function ShapePath( ) { } var info = "M-4.3,-0.24 L-3,0 L-2,3.6 L-1,0.48 L0,0 L1.56,1 L2,0 L3,2.87 L4,-2.1 Z", startX, startY, x, y, action, arr = info.split(' '); var path = new THREE.ShapePath(); for(var i = 0; i < arr.length; i++){ var element = arr[i], index = element.indexOf(','); action = element.charAt(0); x = parseFloat(element.substring(1, index)); y = parseFloat(element.substring(index+1)); switch ( action ) { case 'M': path.moveTo(x, y); startX = x; startY = y; break; case 'L': path.lineTo(x, y); break; case 'Z': if (x !== startX || y !== startY) path.lineTo(startX, startY); break; } } var shape = path.toShapes(); var geometry = new THREE.ShapeGeometry(shape), material = new THREE.MeshBasicMaterial({color: '#eecc99', side: THREE.DoubleSide}), mesh = new THREE.Mesh(geometry, material); scene.add(mesh);

Attributes

type : String

Default value : 'ShapePath'
Description : 类型

color : Color()

Default value : new Color()
Description : 颜色

subPaths : Array

Default value : []
Description : 子路径数组.

currentPath : Array

Default value : null
Description : 当前路径.

Methods

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

创建一条路径 Path 并调用 Path.moveTo( x, y ).

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

调用 Path.lineTo( x, y ) 来画一条直线.

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

调用 Path.quadraticCurveTo( aCPx, aCPy, aX, aY ) 来绘制一条二次贝塞尔曲线.

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坐标

调用 Path.bezierCurveTo( aCP1x, aCP1y, aCP2x, aCP2y, aX, aY ) 来绘制一条三次贝塞尔曲线.

splineThru( points ) : null
points Array 点数组

调用 Path.splineThru( points ) 来绘制一条样条曲线.

toShapes( isCCW, noHoles ) : Array
isCCW Boolean 是否为逆时针方向
noHoles Boolean 是否有洞

把 this.subPaths 转为图形数组. 默认图形是顺时针方向, 而洞是逆时针方向的. 如果 isCCW 为 true, 那么图形就会翻转.