Merge pull request #35 from FuZhenn/master

empty context and setDashLine

canvas2svg.js

@@ -167,6 +167,12 @@
         },
         "textBaseline":{
             canvas : "alphabetic"
+        },
+        "lineDash" : {
+            svgAttr : "stroke-dasharray",
+            canvas : [],
+            svg : null,
+            apply : "stroke"
         }
     };
 
@@ -1038,17 +1044,21 @@
             //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
             //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
             svg = image.getSvg();
-            defs = svg.childNodes[0];
+            if (svg.childNodes && svg.childNodes.length > 1) {
-            while(defs.childNodes.length) {
+                defs = svg.childNodes[0];
-                id = defs.childNodes[0].getAttribute("id");
+                while(defs.childNodes.length) {
-                this.__ids[id] = id;
+                    id = defs.childNodes[0].getAttribute("id");
-                this.__defs.appendChild(defs.childNodes[0]);
+                    this.__ids[id] = id;
+                    this.__defs.appendChild(defs.childNodes[0]);
+                }
+                group = svg.childNodes[1];
+                if (group) {
+                    parent.appendChild(group);
+                    this.__currentElement = group;
+                    this.translate(dx, dy);
+                    this.__currentElement = currentElement;
+                }
             }
-            group = svg.childNodes[1];
-            parent.appendChild(group);
-            this.__currentElement = group;
-            this.translate(dx, dy);
-            this.__currentElement = currentElement;
         } else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
             //canvas or image
             svgImage = this.__createElement("image");
@@ -1099,6 +1109,14 @@
         return new CanvasPattern(pattern, this);
     };
     
+    ctx.prototype.setLineDash = function(dashArray) {
+        if (dashArray && dashArray.length > 0) {
+            this.lineDash = dashArray.join(",");
+        } else {
+            this.lineDash = null;
+        }
+    };
+    
     /**
      * Not yet implemented
      */

test/example/setLineDash.js

@@ -0,0 +1,12 @@
+window.C2S_EXAMPLES['setLineDash'] = function(ctx) {
+    ctx.save();
+    ctx.lineWidth = 4;
+    for (var i = 0; i < 10; i++){
+        ctx.setLineDash([(i+1)*5,10]);
+        ctx.beginPath();
+        ctx.moveTo(5+i*14,5);
+        ctx.lineTo(5+i*14,140);
+        ctx.stroke();
+    }
+    ctx.restore();
+};

test/playground.html

@@ -20,7 +20,7 @@
         <div class="row">
             <div class="twelve columns">
                 <!-- select content is generated by the command `gulp update_examples` -->
-                <select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
+                <select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="setLineDash">setLineDash</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
             </div>
         </div>
     </form>
@@ -64,7 +64,7 @@
 </script>
 
 <!-- examples content is generated by the command `gulp update_examples` -->
-<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
+<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
 
 <script type="text/javascript">
     (function () {