From 8659c6b44c1b5247ec0793df742e784d5a409402 Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sat, 15 Sep 2012 22:25:19 -0400 Subject: [PATCH 01/10] Reformat the code to match the rest of Paper.js --- src/svg/ImportSVG.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 6951f521..3a25c6fa 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -4,13 +4,13 @@ * */ -var ImportSVG = function() +var ImportSVG = this.ImportSVG = Base.extend({ { //initialize - function initialize() + initialize: function() { - }; + }, /** * @@ -21,10 +21,10 @@ var ImportSVG = function() * takes in a svg object (xml dom) * returns Paper.js Layer */ - this.importSVG = function(svg) + importSVG: function(svg) { - return layer; - }; + //TODO: return layer; + }, /** * Creates a Paper.js Group by parsing @@ -33,10 +33,10 @@ var ImportSVG = function() * takes in a svg object (xml dom) * returns Paper.js Group */ - function importGroup(svg) + importGroup: function(svg) { - return group; - }; + //TODO: return group; + }, /** * Creates a Paper.js Path by parsing @@ -46,10 +46,8 @@ var ImportSVG = function() * takes in a svg object (xml dom) * returns Paper.js Group */ - function importPath(svg) + importPath: function(svg) { - return path; - }; - - initialize(); // calls the init function after class is loaded -}; \ No newline at end of file + //TODO: return path; + } +}); \ No newline at end of file From bbef9a9594aed2fd47224200bf9e00bdcbe752c4 Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sat, 15 Sep 2012 22:26:43 -0400 Subject: [PATCH 02/10] Add a few helper functions These will convert directly from SVG objects to Paper.js equivalents. --- src/svg/ImportSVG.js | 92 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 3a25c6fa..6b15f02c 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -49,5 +49,97 @@ var ImportSVG = this.ImportSVG = Base.extend({ importPath: function(svg) { //TODO: return path; + }, + + /** + * Creates a Path.Circle Paper.js item + * + * takes a svg circle node (xml dom) + * returns Paper.js Path.Circle item + */ + createCircle: function(svgCircle) + { + var cx = svgCircle.cx.baseVal.value || 0; + var cy = svgCircle.cy.baseVal.value || 0; + var r = svgCircle.r.baseVal.value || 0; + var center = new Point(cx, cy); + var circle = new Path.Circle(center, r); + + return circle; + }, + + /** + * Creates a Path.Oval Paper.js item + * + * takes a svg ellipse node (xml dom) + * returns Paper.js Path.Oval item + */ + createOval: function(svgOval) + { + var cx = svgOval.cx.baseVal.value || 0; + var cy = svgOval.cy.baseVal.value || 0; + var rx = svgOval.rx.baseVal.value || 0; + var ry = svgOval.ry.baseVal.value || 0; + + var center = new Point(cx, cy); + var offset = new Point(rx, ry); + var topLeft = center.subtract(offset); + var bottomRight = center.add(offset); + + var rect = new Rectangle(topLeft, bottomRight); + var oval = new Path.Oval(rect); + + return oval; + }, + + /** + * Creates a "rectangle" Paper.js item + * + * takes a svg rect node (xml dom) + * returns either a + * - Path.Rectangle item + * - Path.RoundRectangle item (if the rectangle has rounded corners) + */ + createRectangle: function(svgRectangle) + { + var x = svgRectangle.x.baseVal.value || 0; + var y = svgRectangle.y.baseVal.value || 0; + var rx = svgRectangle.rx.baseVal.value || 0; + var ry = svgRectangle.ry.baseVal.value || 0; + var width = svgRectangle.width.baseVal.value || 0; + var height = svgRectangle.height.baseVal.value || 0; + + var topLeft = new Point(x, y); + var size = new Size(width, height); + var rectangle = new Rectangle(topLeft, size); + + if (rx > 0 || ry > 0) { + var cornerSize = new Size(rx, ry); + rectangle = new Path.RoundRectangle(rectangle, cornerSize); + } else { + rectangle = new Path.Rectangle(rectangle); + } + + return rectangle; + }, + + /** + * Creates a Path.Line Paper.js item + * + * takes a svg line node (xml dom) + * returns a Path.Line item + */ + createLine: function(svgLine) + { + var x1 = svgLine.x1.baseVal.value || 0; + var y1 = svgLine.y1.baseVal.value || 0; + var x2 = svgLine.x2.baseVal.value || 0; + var y2 = svgLine.y2.baseVal.value || 0; + + var from = new Point(x1, y1); + var to = new Point(x2, y2); + var line = new Path.Line(from, to); + + return line; } }); \ No newline at end of file From 7879b4b61b462036ce85d5c3740547d8cc38c12c Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sat, 15 Sep 2012 23:58:39 -0400 Subject: [PATCH 03/10] Convert from 4 spaces to tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Oops. Paper.js uses tabs… --- src/svg/ImportSVG.js | 238 +++++++++++++++++++++---------------------- 1 file changed, 119 insertions(+), 119 deletions(-) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 6b15f02c..268c4a75 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -6,140 +6,140 @@ var ImportSVG = this.ImportSVG = Base.extend({ { - //initialize - initialize: function() - { + //initialize + initialize: function() + { - }, + }, - /** - * - * Takes the svg dom obj and parses the data - * to create a layer with groups (if needed) with - * items inside. Should support nested groups. - * - * takes in a svg object (xml dom) - * returns Paper.js Layer - */ - importSVG: function(svg) - { - //TODO: return layer; - }, + /** + * + * Takes the svg dom obj and parses the data + * to create a layer with groups (if needed) with + * items inside. Should support nested groups. + * + * takes in a svg object (xml dom) + * returns Paper.js Layer + */ + importSVG: function(svg) + { + //TODO: return layer; + }, - /** - * Creates a Paper.js Group by parsing - * a specific svg g node - * - * takes in a svg object (xml dom) - * returns Paper.js Group - */ - importGroup: function(svg) - { - //TODO: return group; - }, + /** + * Creates a Paper.js Group by parsing + * a specific svg g node + * + * takes in a svg object (xml dom) + * returns Paper.js Group + */ + importGroup: function(svg) + { + //TODO: return group; + }, - /** - * Creates a Paper.js Path by parsing - * a specific svg node (rect, path, circle, polygon, etc) - * and creating the right path object based on the svg type. - * - * takes in a svg object (xml dom) - * returns Paper.js Group - */ - importPath: function(svg) - { - //TODO: return path; - }, + /** + * Creates a Paper.js Path by parsing + * a specific svg node (rect, path, circle, polygon, etc) + * and creating the right path object based on the svg type. + * + * takes in a svg object (xml dom) + * returns Paper.js Group + */ + importPath: function(svg) + { + //TODO: return path; + }, - /** - * Creates a Path.Circle Paper.js item - * - * takes a svg circle node (xml dom) - * returns Paper.js Path.Circle item - */ - createCircle: function(svgCircle) - { - var cx = svgCircle.cx.baseVal.value || 0; - var cy = svgCircle.cy.baseVal.value || 0; - var r = svgCircle.r.baseVal.value || 0; - var center = new Point(cx, cy); - var circle = new Path.Circle(center, r); + /** + * Creates a Path.Circle Paper.js item + * + * takes a svg circle node (xml dom) + * returns Paper.js Path.Circle item + */ + createCircle: function(svgCircle) + { + var cx = svgCircle.cx.baseVal.value || 0; + var cy = svgCircle.cy.baseVal.value || 0; + var r = svgCircle.r.baseVal.value || 0; + var center = new Point(cx, cy); + var circle = new Path.Circle(center, r); - return circle; - }, + return circle; + }, - /** - * Creates a Path.Oval Paper.js item - * - * takes a svg ellipse node (xml dom) - * returns Paper.js Path.Oval item - */ - createOval: function(svgOval) - { - var cx = svgOval.cx.baseVal.value || 0; - var cy = svgOval.cy.baseVal.value || 0; - var rx = svgOval.rx.baseVal.value || 0; - var ry = svgOval.ry.baseVal.value || 0; + /** + * Creates a Path.Oval Paper.js item + * + * takes a svg ellipse node (xml dom) + * returns Paper.js Path.Oval item + */ + createOval: function(svgOval) + { + var cx = svgOval.cx.baseVal.value || 0; + var cy = svgOval.cy.baseVal.value || 0; + var rx = svgOval.rx.baseVal.value || 0; + var ry = svgOval.ry.baseVal.value || 0; - var center = new Point(cx, cy); - var offset = new Point(rx, ry); - var topLeft = center.subtract(offset); - var bottomRight = center.add(offset); + var center = new Point(cx, cy); + var offset = new Point(rx, ry); + var topLeft = center.subtract(offset); + var bottomRight = center.add(offset); - var rect = new Rectangle(topLeft, bottomRight); - var oval = new Path.Oval(rect); + var rect = new Rectangle(topLeft, bottomRight); + var oval = new Path.Oval(rect); - return oval; - }, + return oval; + }, - /** - * Creates a "rectangle" Paper.js item - * - * takes a svg rect node (xml dom) - * returns either a - * - Path.Rectangle item - * - Path.RoundRectangle item (if the rectangle has rounded corners) - */ - createRectangle: function(svgRectangle) - { - var x = svgRectangle.x.baseVal.value || 0; - var y = svgRectangle.y.baseVal.value || 0; - var rx = svgRectangle.rx.baseVal.value || 0; - var ry = svgRectangle.ry.baseVal.value || 0; - var width = svgRectangle.width.baseVal.value || 0; - var height = svgRectangle.height.baseVal.value || 0; + /** + * Creates a "rectangle" Paper.js item + * + * takes a svg rect node (xml dom) + * returns either a + * - Path.Rectangle item + * - Path.RoundRectangle item (if the rectangle has rounded corners) + */ + createRectangle: function(svgRectangle) + { + var x = svgRectangle.x.baseVal.value || 0; + var y = svgRectangle.y.baseVal.value || 0; + var rx = svgRectangle.rx.baseVal.value || 0; + var ry = svgRectangle.ry.baseVal.value || 0; + var width = svgRectangle.width.baseVal.value || 0; + var height = svgRectangle.height.baseVal.value || 0; - var topLeft = new Point(x, y); - var size = new Size(width, height); - var rectangle = new Rectangle(topLeft, size); + var topLeft = new Point(x, y); + var size = new Size(width, height); + var rectangle = new Rectangle(topLeft, size); - if (rx > 0 || ry > 0) { - var cornerSize = new Size(rx, ry); - rectangle = new Path.RoundRectangle(rectangle, cornerSize); - } else { - rectangle = new Path.Rectangle(rectangle); - } + if (rx > 0 || ry > 0) { + var cornerSize = new Size(rx, ry); + rectangle = new Path.RoundRectangle(rectangle, cornerSize); + } else { + rectangle = new Path.Rectangle(rectangle); + } - return rectangle; - }, + return rectangle; + }, - /** - * Creates a Path.Line Paper.js item - * - * takes a svg line node (xml dom) - * returns a Path.Line item - */ - createLine: function(svgLine) - { - var x1 = svgLine.x1.baseVal.value || 0; - var y1 = svgLine.y1.baseVal.value || 0; - var x2 = svgLine.x2.baseVal.value || 0; - var y2 = svgLine.y2.baseVal.value || 0; + /** + * Creates a Path.Line Paper.js item + * + * takes a svg line node (xml dom) + * returns a Path.Line item + */ + createLine: function(svgLine) + { + var x1 = svgLine.x1.baseVal.value || 0; + var y1 = svgLine.y1.baseVal.value || 0; + var x2 = svgLine.x2.baseVal.value || 0; + var y2 = svgLine.y2.baseVal.value || 0; - var from = new Point(x1, y1); - var to = new Point(x2, y2); - var line = new Path.Line(from, to); + var from = new Point(x1, y1); + var to = new Point(x2, y2); + var line = new Path.Line(from, to); - return line; - } + return line; + } }); \ No newline at end of file From edd8f67f8dc1493f5908f6aefe7f21e3e316f08b Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sun, 16 Sep 2012 00:09:02 -0400 Subject: [PATCH 04/10] Fix error Shouldn't have two of these... --- src/svg/ImportSVG.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 268c4a75..4793faae 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -5,7 +5,6 @@ */ var ImportSVG = this.ImportSVG = Base.extend({ -{ //initialize initialize: function() { @@ -13,7 +12,6 @@ var ImportSVG = this.ImportSVG = Base.extend({ }, /** - * * Takes the svg dom obj and parses the data * to create a layer with groups (if needed) with * items inside. Should support nested groups. From 8cf70ca6e1f73e6fe43c64487aa91efe9edb8d44 Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sun, 16 Sep 2012 00:09:39 -0400 Subject: [PATCH 05/10] Rename the create* functions to import* Keeps in line with the naming of the other functions --- src/svg/ImportSVG.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 4793faae..2e2b74e0 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -55,7 +55,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * takes a svg circle node (xml dom) * returns Paper.js Path.Circle item */ - createCircle: function(svgCircle) + importCircle: function(svgCircle) { var cx = svgCircle.cx.baseVal.value || 0; var cy = svgCircle.cy.baseVal.value || 0; @@ -72,7 +72,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * takes a svg ellipse node (xml dom) * returns Paper.js Path.Oval item */ - createOval: function(svgOval) + importOval: function(svgOval) { var cx = svgOval.cx.baseVal.value || 0; var cy = svgOval.cy.baseVal.value || 0; @@ -98,7 +98,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * - Path.Rectangle item * - Path.RoundRectangle item (if the rectangle has rounded corners) */ - createRectangle: function(svgRectangle) + importRectangle: function(svgRectangle) { var x = svgRectangle.x.baseVal.value || 0; var y = svgRectangle.y.baseVal.value || 0; @@ -127,7 +127,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * takes a svg line node (xml dom) * returns a Path.Line item */ - createLine: function(svgLine) + importLine: function(svgLine) { var x1 = svgLine.x1.baseVal.value || 0; var y1 = svgLine.y1.baseVal.value || 0; From 2ce23aacc2f4e5c9788ef0370932ee80e7cb9fac Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sun, 16 Sep 2012 00:10:14 -0400 Subject: [PATCH 06/10] Implement importSVG, importGroup, and importPath --- src/svg/ImportSVG.js | 40 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 2e2b74e0..d7c09643 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -21,7 +21,11 @@ var ImportSVG = this.ImportSVG = Base.extend({ */ importSVG: function(svg) { - //TODO: return layer; + var layer = new Layer(); + groups = this.importGroup(svg); + layer.addChild(groups); + + return layer; }, /** @@ -33,7 +37,18 @@ var ImportSVG = this.ImportSVG = Base.extend({ */ importGroup: function(svg) { - //TODO: return group; + var group = new Group(); + var child; + for (var i in svg.childNodes) { + child = svg.childNodes[i]; + if (child.nodeType != 1) { + continue; + } + item = this.importPath(child); + group.addChild(item); + } + + return group; }, /** @@ -42,11 +57,28 @@ var ImportSVG = this.ImportSVG = Base.extend({ * and creating the right path object based on the svg type. * * takes in a svg object (xml dom) - * returns Paper.js Group + * returns Paper.js Item */ importPath: function(svg) { - //TODO: return path; + switch (svg.nodeName.toLowerCase()) { + case 'line': + item = this.importLine(svg); + break; + case 'rect': + item = this.importRectangle(svg); + break; + case 'ellipse': + item = this.importOval(svg); + break; + case 'g': + item = this.importGroup(svg); + break; + default: + break; + } + + return item; }, /** From 9218664a67edd224a4dabd1ce909da42ed827f5a Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sun, 16 Sep 2012 01:01:28 -0400 Subject: [PATCH 07/10] Remove the initialize function I'm not using it for anything --- src/svg/ImportSVG.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index d7c09643..2c583e54 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -5,12 +5,6 @@ */ var ImportSVG = this.ImportSVG = Base.extend({ - //initialize - initialize: function() - { - - }, - /** * Takes the svg dom obj and parses the data * to create a layer with groups (if needed) with From 2952e01fc596618fd45f69fa39fd1f5e97fd8178 Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sun, 16 Sep 2012 01:02:00 -0400 Subject: [PATCH 08/10] Change the import* functions to private --- src/svg/ImportSVG.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 2c583e54..6b92b44f 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -57,13 +57,13 @@ var ImportSVG = this.ImportSVG = Base.extend({ { switch (svg.nodeName.toLowerCase()) { case 'line': - item = this.importLine(svg); + item = this._importLine(svg); break; case 'rect': - item = this.importRectangle(svg); + item = this._importRectangle(svg); break; case 'ellipse': - item = this.importOval(svg); + item = this._importOval(svg); break; case 'g': item = this.importGroup(svg); @@ -81,7 +81,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * takes a svg circle node (xml dom) * returns Paper.js Path.Circle item */ - importCircle: function(svgCircle) + _importCircle: function(svgCircle) { var cx = svgCircle.cx.baseVal.value || 0; var cy = svgCircle.cy.baseVal.value || 0; @@ -98,7 +98,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * takes a svg ellipse node (xml dom) * returns Paper.js Path.Oval item */ - importOval: function(svgOval) + _importOval: function(svgOval) { var cx = svgOval.cx.baseVal.value || 0; var cy = svgOval.cy.baseVal.value || 0; @@ -124,7 +124,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * - Path.Rectangle item * - Path.RoundRectangle item (if the rectangle has rounded corners) */ - importRectangle: function(svgRectangle) + _importRectangle: function(svgRectangle) { var x = svgRectangle.x.baseVal.value || 0; var y = svgRectangle.y.baseVal.value || 0; @@ -153,7 +153,7 @@ var ImportSVG = this.ImportSVG = Base.extend({ * takes a svg line node (xml dom) * returns a Path.Line item */ - importLine: function(svgLine) + _importLine: function(svgLine) { var x1 = svgLine.x1.baseVal.value || 0; var y1 = svgLine.y1.baseVal.value || 0; From 64f34e6dfd4e8935a0c49c85957042e2349de438 Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sun, 16 Sep 2012 01:02:23 -0400 Subject: [PATCH 09/10] Add _importText --- src/svg/ImportSVG.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index 6b92b44f..7653034a 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -68,6 +68,9 @@ var ImportSVG = this.ImportSVG = Base.extend({ case 'g': item = this.importGroup(svg); break; + case 'text': + item = this._importText(svg); + break; default: break; } @@ -165,5 +168,31 @@ var ImportSVG = this.ImportSVG = Base.extend({ var line = new Path.Line(from, to); return line; + }, + + /** + * Creates a PointText Paper.js item + * + * takes a svg text node (xml dom) + * returns a PointText item + */ + _importText: function(svgText) + { + //TODO: Extend this for multiple values + var x = svgText.x.baseVal.getItem(0).value || 0; + var y = svgText.y.baseVal.getItem(0).value || 0; + //END:Todo + + var dx; //character kerning + var dy; //character baseline + var rotate; //character rotation + var textLength; //the width of the containing box + var lengthAdjust; // + var textContent = svgText.textContent || ""; + + var topLeft = new Point(x, y); + var text = new PointText(topLeft); + text.content = textContent; + return text; } }); \ No newline at end of file From 0b8e9407989f6608466ecd0dfadcc7c868ac4605 Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Sun, 16 Sep 2012 01:02:40 -0400 Subject: [PATCH 10/10] Create an example page for ImportSVG --- examples/Scripts/ImportSVG.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 examples/Scripts/ImportSVG.html diff --git a/examples/Scripts/ImportSVG.html b/examples/Scripts/ImportSVG.html new file mode 100644 index 00000000..da8d79cc --- /dev/null +++ b/examples/Scripts/ImportSVG.html @@ -0,0 +1,32 @@ + + + + + Stroke Bounds + + + + + + + + + + + + + + + I love SVG + + + + \ No newline at end of file