#801 PShapeSVG(new XMLElement(svg string))

annasob · Sep 15, 2010 · 3e0acb2 · 3e0acb2
2 parents b898ab2 + 5e40e83
commit 3e0acb2
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 7 deletions.
diff --git a/examples/seneca/loadShape/ShapeSVG.html b/examples/seneca/loadShape/ShapeSVG.html
@@ -0,0 +1,27 @@
+<!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() bot.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">
+    void setup() {
+    PShapeSVG s = new PShapeSVG(new XMLElement("<svg width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect width='300' height='100' style='fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)'/></svg>"));
+    println(s.isVisible());
+  }
+	</script><canvas id="display" ></canvas>
+  <pre>
+  void setup() {
+    PShapeSVG s = new PShapeSVG(new XMLElement("<svg width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect width='300' height='100' style='fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)'/></svg>"));
+    println(s.isVisible()); //prints true
+  }
+
+  </pre>
+</body>
+</html>
+
diff --git a/examples/seneca/loadShape/blue.svg b/examples/seneca/loadShape/blue.svg
diff --git a/examples/seneca/loadShape/loadShape14.html b/examples/seneca/loadShape/loadShape14.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() rotate.svg with Transformations</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() {
+    background(125);
+    size(400,400);
+    s = loadShape("blue.svg");
+    smooth();
+    noLoop();
+  }
+
+  void draw() {
+    shape(s);
+  }
+	</script><canvas id="display" ></canvas>
+  <div> 
+</body>
+</html>
+
diff --git a/processing.js b/processing.js
@@ -2197,10 +2197,10 @@
 
     };
 
-    var PShapeSVG = function() {
+    var PShapeSVG = p.PShapeSVG = function() {
       p.PShape.call( this ); // PShape is the base class.
-      if (arguments.length === 1) {
-        this.element  = new p.XMLElement(null, arguments[0]);
+      if (arguments.length === 1) { //xml element coming in
+        this.element  = arguments[0] ;//new p.XMLElement(null, arguments[0]);
         // set values to their defaults according to the SVG spec
         this.vertexCodes         = [];
         this.vertices            = [];
@@ -2951,7 +2951,11 @@
           this.fill = false;
         } else if (fillText.indexOf("#") === 0) {
           this.fill      = true;
-          this.fillColor = opacityMask | (parseInt(fillText.substring(1), 16 )) & 0xFFFFFF;
+          if (fillText.length === 4) {
+            // convert #00F to #0000FF
+            fillText = fillText.replace(/#(.)(.)(.)/,"#$1$1$2$2$3$3");
+          }
+          this.fillColor = opacityMask | (parseInt(fillText.substring(1), 16)) & 0xFFFFFF;
         } else if (fillText.indexOf("rgb") === 0) {
           this.fill      = true;
           this.fillColor = opacityMask | this.parseRGB(fillText);
@@ -2982,8 +2986,12 @@
           this.stroke = false;
         } else if (strokeText.charAt( 0 ) === "#") {
           this.stroke      = true;
-          this.strokeColor = opacityMask | (parseInt( strokeText.substring( 1 ), 16 )) & 0xFFFFFF;
-        } else if (strokeText.indexOf( "rgb" ) === 0 ) {
+          if (strokeText.length === 4) {
+            // convert #00F to #0000FF
+            strokeText = strokeText.replace(/#(.)(.)(.)/,"#$1$1$2$2$3$3");
+          }
+          this.strokeColor = opacityMask | (parseInt( strokeText.substring(1), 16)) & 0xFFFFFF;
+         } else if (strokeText.indexOf( "rgb" ) === 0 ) {
           this.stroke = true;
           this.strokeColor = opacityMask | this.parseRGB(strokeText);
         } else if (strokeText.indexOf( "url(#" ) === 0) {
@@ -11462,7 +11470,7 @@
       "noSmooth", "noStroke", "noTint", "ortho", "peg", "perspective", "PImage",
       "pixels", "PMatrix2D", "PMatrix3D", "PMatrixStack", "pmouseX", "pmouseY",
       "point", "pointLight", "popMatrix", "popStyle", "pow", "print",
-      "printCamera", "println", "printMatrix", "printProjection", "PShape",
+      "printCamera", "println", "printMatrix", "printProjection", "PShape","PShapeSVG",
       "pushMatrix", "pushStyle", "PVector", "quad", "radians", "random",
       "Random", "randomSeed", "rect", "rectMode", "red", "redraw",
       "requestImage", "resetMatrix", "reverse", "rotate", "rotateX", "rotateY",