diff --git a/src/extras/geometries/Path.js b/src/extras/geometries/Path.js index cd498aab..e2091f60 100644 --- a/src/extras/geometries/Path.js +++ b/src/extras/geometries/Path.js @@ -78,13 +78,21 @@ THREE.Path.prototype.splineThru = function( pts /*Array of Vector*/ ) { } -// TODO ARC +// TODO ARC (x,y, x-radius, y-radius, startAngle, endAngle) +THREE.Path.prototype.arc = function() { + +}; +// TODO +// Create a new func eg. sin (theta) x +THREE.Path.prototype.addExprFunc = function(exprName, func) { +}; + /* Return an array of vectors based on contour of the path */ THREE.Path.prototype.getPoints = function( divisions ) { - divisions = divisions || 12; + divisions = divisions || 4; var points = []; @@ -300,6 +308,122 @@ THREE.Path.prototype.getMinAndMax = function() { }; +// createPathGeometry by SolarCoordinates +/* Returns Object3D with line segments stored as children */ +THREE.Path.prototype.createPathGeometry = function(divisions, lineMaterial) { + var pts = this.getPoints(divisions); + + var segment, pathGeometry = new THREE.Object3D; + if(!lineMaterial) lineMaterial = new THREE.LineBasicMaterial( { color:0x000000, opacity:0.7 } ); + + for(var i=1; i straight, bezier, splines, arc, funcexpr lines +// Read http://www.planetclegg.com/projects/WarpingTextToSplines.html +THREE.Path.prototype.transform = function(path) { + path = new THREE.Path(); + path.moveTo(0,0); + path.quadraticCurveTo(100,50, 400,0); + + + + + var thisBounds = this.getMinAndMax(); + var oldPts = this.getPoints(); + var i, il, p, oldX, oldY, xNorm; + for (i=0,il=oldPts.length; i< il;i++){ + p = oldPts[i]; + oldX = p.x; + oldY = p.y; + var xNorm = oldX/ thisBounds.maxX; + + var pathPt = path.getPoint(xNorm); + var normal = path.getNormalVector(xNorm).multiplyScalar(oldY);; + + p.x = pathPt.x + normal.x; + p.y = pathPt.y + normal.y; + + //p.x = a * oldX + b * oldY + c; + //p.y = d * oldY + e * oldX + f; + + } + + return oldPts; + +}; + +// Read http://www.tinaja.com/glib/nonlingr.pdf +//nonlinear transforms +THREE.Path.prototype.nltransform = function(a,b,c,d,e,f) { + + var oldPts = this.getPoints(); + var i, il, p, oldX, oldY; + for (i=0,il=oldPts.length; i< il;i++){ + p = oldPts[i]; + oldX = p.x; + oldY = p.y; + p.x = a * oldX + b * oldY + c; + p.y = d * oldY + e * oldX + f; + + } + return oldPts; + +}; + /* Draws this path onto a 2d canvas easily */ THREE.Path.prototype.debug = function( canvas ) { @@ -380,8 +504,23 @@ THREE.Path.prototype.debug = function( canvas ) { ctx.strokeStyle = "red"; - var p, points = this.getPoints(); - + //var p, points = this.getPoints(); + var theta = -90 /180 * Math.PI; + var p, points = this.transform(0.866, - 0.866,0, 0.500 , 0.50,-50); + + //0.866, - 0.866,0, 0.500 , 0.50,-50 + // Math.cos(theta),Math.sin(theta),100, + // Math.cos(theta),-Math.sin(theta),-50 +// translate, scale, rotation + // a - horiztonal size + // b - lean + // c - x offset + // d - vertical size + // e - climb + // f - y offset + // 1,0,0, + // -1,0,100 + for ( i = 0, il = points.length; i < il; i ++ ) { p = points[ i ]; diff --git a/src/extras/geometries/TextGeometry.js b/src/extras/geometries/TextGeometry.js index c4c4ceee..39e7ae25 100644 --- a/src/extras/geometries/TextGeometry.js +++ b/src/extras/geometries/TextGeometry.js @@ -666,15 +666,20 @@ THREE.FontUtils = { var fontPaths = []; + var path = new THREE.Path(); for ( i = 0; i < length; i++ ) { - - var ret = this.extractGlyphPoints( chars[ i ], face, scale, offset ); + + var ret = this.extractGlyphPoints( chars[ i ], face, scale, offset, path ); offset += ret.offset; characterPts.push( ret.points ); allPts = allPts.concat( ret.points ); - fontPaths.push( ret.path ); - + //fontPaths.push( ret.path ); + } + + path.debug(document.getElementById("boo")); + console.log(path); + // get the width @@ -849,10 +854,10 @@ THREE.FontUtils = { }, - extractGlyphPoints : function( c, face, scale, offset ) { + extractGlyphPoints : function( c, face, scale, offset, path ) { var pts = []; - var path = new THREE.Path(); + var i, i2, @@ -875,7 +880,7 @@ THREE.FontUtils = { for ( i = 0; i < length; ) { action = outline[ i++ ]; - + console.log(action); switch( action ) { case 'm': @@ -941,7 +946,7 @@ THREE.FontUtils = { cpx2 = outline[ i++ ] * scaleX + offset; cpy2 = outline[ i++ ] * -scaleY; - path.quadraticCurveTo( cpx, cpy, cpx1, cpy1, cpx2, cpy2 ); + path.bezierCurveTo( cpx, cpy, cpx1, cpy1, cpx2, cpy2 ); laste = pts[ pts.length - 1 ]; @@ -968,8 +973,7 @@ THREE.FontUtils = { } } - path.debug(document.getElementById("boo")); - console.log(path); + return { offset: glyph.ha*scale, points:pts, path:path}; }