added fix for lineTo and moveTo [processing-js#137] [processing-js#149…

…] [processing-js#151] [processing-js#150]
annasob · Jul 16, 2010 · 5f277e1 · 5f277e1
1 parent ebf0da5
commit 5f277e1
Show file tree

Hide file tree

Showing 7 changed files with 543 additions and 14 deletions.
diff --git a/examples/seneca/loadShape/girlDriving.jpg b/examples/seneca/loadShape/girlDriving.jpg
diff --git a/examples/seneca/loadShape/girlDriving.svg b/examples/seneca/loadShape/girlDriving.svg
diff --git a/examples/seneca/loadShape/loadShape3.html b/examples/seneca/loadShape/loadShape3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
-	<title>Processing.js SVG LoadImage() Greetings.svg</title>
+	<title>Processing.js SVG LoadImage() ocean_liner.svg</title>
 	<script type="text/javascript" src="../../../processing.js"></script> 
 	<script type="text/javascript" src="../../init.js"></script> 
 

diff --git a/examples/seneca/loadShape/loadShape4.html b/examples/seneca/loadShape/loadShape4.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
-	<title>Processing.js SVG LoadImage() Greetings.svg</title>
+	<title>Processing.js SVG LoadImage() fabia.svg</title>
 	<script type="text/javascript" src="../../../processing.js"></script> 
 	<script type="text/javascript" src="../../init.js"></script> 
 

diff --git a/examples/seneca/loadShape/loadShape5.html b/examples/seneca/loadShape/loadShape5.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
-	<title>Processing.js SVG LoadImage() Greetings.svg</title>
+	<title>Processing.js SVG LoadImage() bee.svg</title>
 	<script type="text/javascript" src="../../../processing.js"></script> 
 	<script type="text/javascript" src="../../init.js"></script> 
 

diff --git a/examples/seneca/loadShape/loadShape6.html b/examples/seneca/loadShape/loadShape6.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head runat="server">
+	<title>Processing.js SVG LoadImage() girlDriving.svg</title>
+	<script type="text/javascript" src="../../../processing.js"></script> 
+	<script type="text/javascript" src="../../init.js"></script> 
+
+</head>
+<body>
+
+
+	<script id="script" type="application/processing">
+  PShape s;
+
+  void setup() {
+    size(800,500);
+    s = loadShape("girlDriving.svg");
+    smooth();
+    noLoop();
+  }
+
+  void draw() {
+    shape(s);
+  }
+	</script><canvas id="display" ></canvas>
+  <div> The actual shape: <img src="girlDriving.jpg"></div>
+</div>
+</body>
+</html>
+
diff --git a/processing.js b/processing.js
@@ -972,11 +972,16 @@
               switch ( this.vertexCodes[j] ) {
 
               case p.VERTEX:
-                if(( !isBezier && !isCurve ) || (p.breakShape === true)) { 
+                //if(( !isBezier && !isCurve ) || (p.breakShape === true)) { 
                   //you cannot call vertex in between curveVertex and bezierVertex calls, unless there is a break
                   p.vertex( this.vertices[index][0], this.vertices[index][1] );
+                  if ( this.vertices[index]["moveTo"] === true) {
+                    vertArray[vertArray.length-1]["moveTo"] = true;
+                  } else if ( this.vertices[index]["moveTo"] === false ){
+                    vertArray[vertArray.length-1]["moveTo"] = false;
+                  }
                   p.breakShape = false;
-                }
+                //}
                 index++;
                 break;
 
@@ -1003,11 +1008,14 @@
               switch ( this.vertexCodes[j] ) {
 
               case p.VERTEX:
-                if(( !isBezier && !isCurve ) || ( p.breakShape === true ) ) { 
-                  //you cannot call vertex in between curveVertex and bezierVertex calls, unless there is a break
-                  p.vertex( this.vertices[index][0], this.vertices[index][1], this.vertices[index][2] );
-                  p.breakShape = false;
+                //you cannot call vertex in between curveVertex and bezierVertex calls, unless there is a break
+                p.vertex( this.vertices[index][0], this.vertices[index][1], this.vertices[index][2] );
+                if ( this.vertices[index]["moveTo"] === true) {
+                  vertArray[vertArray.length-1]["moveTo"] = true;
+                } else if ( this.vertices[index]["moveTo"] === false ){
+                  vertArray[vertArray.length-1]["moveTo"] = false;
                 }
+                p.breakShape = false;
                 break;
 
               case p.BEZIER_VERTEX:
@@ -1795,13 +1803,17 @@
       parsePathLineto: function( px, py ) {
         this.parsePathCode( p.VERTEX );
         this.parsePathVertex( px, py );
+        // add property to distinguish between curContext.moveTo or curContext.lineTo
+        this.vertices[this.vertices.length-1]["moveTo"] = false;
       },
       parsePathMoveto: function( px, py ) {
         if ( this.vertices.length > 0 ) {
           this.parsePathCode( p.BREAK );
         }
         this.parsePathCode( p.VERTEX );
         this.parsePathVertex( px, py );
+        // add property to distinguish between curContext.moveTo or curContext.lineTo
+        this.vertices[this.vertices.length-1]["moveTo"] = true;
       },
       parsePathVertex: function( x,  y ) {
         var verts = [];
@@ -1814,8 +1826,8 @@
       },
       parsePoly: function( val ){
         this.family    = p.PATH;
-        this.close     = close;
-        var pointsAttr = this.element.getStringAttribute( "points" ).replace(/\s+/g,' ').trim();
+        this.close     = val;
+        var pointsAttr = this.element.getStringAttribute( "points" );//.replace(/\s+/g,' ').trim();
         if ( pointsAttr !== null ) {
           var pointsBuffer = pointsAttr.split(" ");
           for (var i = 0; i < pointsBuffer.length; i++) {
@@ -7174,11 +7186,15 @@
         }
         else{
           curContext.beginPath();
-          //curContext.moveTo(vertArray[0][0], vertArray[0][1]);
           for(i = 0; i < vertArray.length; i++){
             if( vertArray[i]["isVert"] === true ){ //if it is a vertex move to the position
-               //curContext.lineTo(vertArray[i][0], vertArray[i][1]);
-               curContext.moveTo(vertArray[i][0], vertArray[i][1]);
+              if ( vertArray[i]["moveTo"] === true) {
+                curContext.moveTo(vertArray[i][0], vertArray[i][1]);
+              } else if (vertArray[i]["moveTo"] === false){
+                curContext.lineTo(vertArray[i][0], vertArray[i][1]);
+              } else {
+                curContext.moveTo(vertArray[i][0], vertArray[i][1]);
+              } 
             } else { //otherwise continue drawing bezier
               curContext.bezierCurveTo(vertArray[i][0], vertArray[i][1], vertArray[i][2], vertArray[i][3], vertArray[i][4], vertArray[i][5]);
             }