From 2f5dcce61d81c7bb159d9824a225530cacd8c41a Mon Sep 17 00:00:00 2001 From: skierons Date: Sun, 16 Sep 2012 00:13:14 -0400 Subject: [PATCH] Jacob and I added a bit to the exportPath class. The initialize function was not working correctly and JT said he would fix that. So we initialized svgObj in the function for the meantime. We added svgRect and svgPoint objects for testing purposes to figure out the xml svg format. Recovered points, strokecolor, fillcolor, and stroke width from the input path. The last thing we need to do for extracting path data is to find the point definitions for each point in the path. Waiting on response from head coders to find out what type of path is passed in for simple conversions (such as: Rectangle path, Circle path, etc.). We added a method called RGBConverter to covnert colors into hexadecimal format for xml. --- examples/Tools/SVGCircles.html | 35 +++++++++++++ examples/Tools/SVGStars.html | 34 +++++++++++++ src/svg/ExportSVG.js | 89 ++++++++++++++++++++++++++++++++-- 3 files changed, 153 insertions(+), 5 deletions(-) create mode 100644 examples/Tools/SVGCircles.html create mode 100644 examples/Tools/SVGStars.html diff --git a/examples/Tools/SVGCircles.html b/examples/Tools/SVGCircles.html new file mode 100644 index 00000000..1878f18a --- /dev/null +++ b/examples/Tools/SVGCircles.html @@ -0,0 +1,35 @@ + + + + + Circles + + + + + + + + + diff --git a/examples/Tools/SVGStars.html b/examples/Tools/SVGStars.html new file mode 100644 index 00000000..b0550020 --- /dev/null +++ b/examples/Tools/SVGStars.html @@ -0,0 +1,34 @@ + + + + + Stars + + + + + + + + + diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js index 79d88b78..064caead 100644 --- a/src/svg/ExportSVG.js +++ b/src/svg/ExportSVG.js @@ -6,16 +6,23 @@ * var svg=document.createElementNS(NS,"svg"); */ + + var ExportSVG = function() { var svgObj = null; // xml dom object (svg typed) + //var blarg = this; //initialize the svgObj and what ever else. - function initialize() + /*function initialize() { + var NS = "http://www.w3.org/2000/svg"; + svgObj = document.createElementNS(NS,"svg"); - }; + console.log(svgObj); + + };*/ /** * @@ -83,8 +90,80 @@ var ExportSVG = function() */ this.exportPath = function(path) { - return svgObj; + //this.initialize(); + //console.log(blarg.svgObj); + var NS = "http://www.w3.org/2000/svg"; + svgObj = document.createElementNS(NS,"svg"); + svgRect = document.createElementNS(NS,"rect"); + svgRect.height.baseVal.value = 50; + svgRect.width.baseVal.value = 60; + svgRect.x.baseVal.value = 50; + svgObj.appendChild(svgRect); + + svgPoint = document.createElementNS(NS,"point"); + svgPoint.setAttribute("x",50); + svgPoint.setAttribute("y",100); + svgObj.appendChild(svgPoint); + + svgPath = document.createElementNS(NS, "path"); + + console.log(svgObj); + var pathClone = path.clone(); + var segArray = pathClone.getSegments(); + + var pointArray = new Array(); + for(i = 0; i < segArray.length; i++) + { + pointArray[i] = segArray[i].getPoint(); + } + var pointString = ""; + for(i = 0; i < pointArray.length; i++) + { + var x = pointArray[i].getX(); + x = x - (x % 1); + var y = pointArray[i].getY(); + y = y - (y % 1); + if(i === 0) + { + pointString+= "M " + x + " " + y + " "; + } + else + { + pointString+= "L " + x + " " + y + " "; + } + } + if(pathClone.getClosed()) + { + pointString += "z"; + } + + var strokeRed = RGBconverter(pathClone.strokeColor.red); + var strokeGreen = RGBconverter(pathClone.strokeColor.green); + var strokeBlue = RGBconverter(pathClone.strokeColor.blue); + var strokeRGB = "#" + strokeRed + strokeGreen + strokeBlue; + + var fillRed = RGBconverter(pathClone.fillColor.red); + var fillGreen = RGBconverter(pathClone.fillColor.green); + var fillBlue = RGBconverter(pathClone.fillColor.blue); + var fillRGB = "#" + fillRed + fillGreen + fillBlue; + + svgPath.setAttribute("d", pointString); + svgPath.setAttribute("stroke", strokeRGB); + svgPath.setAttribute("fill", fillRGB); + svgPath.setAttribute("stroke-width",pathClone.strokeWidth); + svgObj.appendChild(svgPath);i + + console.log(svgObj); + return svgObj; }; - initialize(); // calls the init function after class is loaded -}; \ No newline at end of file + function RGBconverter(deciColor) + { + var decColor = Math.round(deciColor * 255); + var hexColor = decColor.toString(16); + hexColor = hexColor.length > 1? hexColor : "0" + hexColor; + return hexColor; + }; + + //initialize(); // calls the init function after class is loaded +};