diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js index e4906664..79d88b78 100644 --- a/src/svg/ExportSVG.js +++ b/src/svg/ExportSVG.js @@ -6,23 +6,16 @@ * 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); - - };*/ + }; /** * @@ -90,100 +83,8 @@ var ExportSVG = function() */ this.exportPath = function(path) { - //this.initialize(); - //console.log(blarg.svgObj); - var pathClone = path.clone(); - var NS = "http://www.w3.org/2000/svg"; - svgObj = document.createElementNS(NS,"svg"); - svgPath = document.createElementNS(NS, "path"); - - //Getting all of the segments(a point, a HandleIn and a HandleOut) in the path - var segArray = pathClone.getSegments(); - - var pointArray = new Array(); - var handleInArray = new Array(); - var handleOutArray = new Array(); - for(i = 0; i < segArray.length; i++) - { - - console.log(segArray[i].toString()); - pointArray[i] = segArray[i].getPoint(); - handleInArray[i] = segArray[i].getHandleIn(); - handleOutArray[i] = segArray[i].getHandleOut(); - } - //pointstring is formatted in the way the SVG XML will be reading - //Namely, a point and the way to traverse to that point - var pointString = ""; - for(i = 0; i < pointArray.length; i++) - { - var x = pointArray[i].getX(); - //x = x - (x % 1); //Possible for simplifying - var y = pointArray[i].getY(); - //y = y - (x % 1); - if(i === 0) - { - //M is moveto, moving to a point without drawing - pointString+= "M " + x + " " + y + " "; - } - else - { - //L is lineto, moving to a point with drawing - pointString+= "L " + x + " " + y + " "; - } - } - if(pathClone.getClosed()) - { - //Z implies a closed path, connecting the first and last points - pointString += "z"; - } - - svgPath.setAttribute("d",pointString); - - //If the stroke doesn't have a color, there's no attribute for it - if(pathClone.strokeColor != undefined) - { - //Using rgb, each value between 0 and 1 - var strokeRed = pathClone.strokeColor.red; - var strokeGreen = pathClone.strokeColor.green; - var strokeBlue = pathClone.strokeColor.blue; - var strokeRGB = RGBtoHex(strokeRed, strokeGreen, strokeBlue); - svgPath.setAttribute("stroke", strokeRGB); - } - - //If the fill doesn't have a color, there's no attribute for it - if(pathClone.fillColor != undefined) - { - var fillRed = pathClone.fillColor.red; - var fillGreen = pathClone.fillColor.green; - var fillBlue = pathClone.fillColor.blue; - var fillRGB = RGBtoHex(fillRed, fillGreen, fillBlue); - svgPath.setAttribute("fill", fillRGB); - } - svgPath.setAttribute("stroke-width",pathClone.strokeWidth); - svgObj.appendChild(svgPath); //appends path to svgObj - return svgObj; + return svgObj; }; - function RGBConverter(deciColor) - { - //since value is scaled from 0 to 1, must round the - //multiplication by 255 - var decColor = Math.round(deciColor * 255); - var hexColor = decColor.toString(16); //to hex - //R, G, and B need to take up at 2 characters - hexColor = hexColor.length > 1? hexColor : "0" + hexColor; - return hexColor; - }; - - function RGBtoHex(red, green, blue) - { - var redVal = RGBConverter(red); - var greenVal = RGBConverter(green); - var blueVal = RGBConverter(blue); - //Returns hex for colors - return "#" + redVal + greenVal + blueVal; - } - - - //initialize(); // calls the init function after class is loaded -}; + initialize(); // calls the init function after class is loaded +}; \ No newline at end of file diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index a0d497a9..08f6f557 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -1,252 +1,55 @@ -/* -* Paper.js -* -* This file is part of Paper.js, a JavaScript Vector Graphics Library, -* based on Scriptographer.org and designed to be largely API compatible. -* http://paperjs.org/ -* http://scriptographer.org/ -* -* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey -* http://lehni.org/ & http://jonathanpuckey.com/ -* -* Distributed under the MIT license. See LICENSE file for details. -* -* All rights reserved. -* -* -* -* This class and all methods therein designed by Stetson-Team-Alpha -* @author Stetson-Team-Alpha -*/ - /** - * @name ImportSVG - * @class The ImportSVG object represents an object created using the SVG - * Canvas that will be converted into a Paper.js object. - * The SVG object is imported into Paper.js by converting it into items - * within groups. - * + * Imports svg into items with groups + * Stetson Alpha - Paper.js + * */ -var ImportSVG = this.ImportSVG = Base.extend(/** @Lends ImportSVG# */{ - - /** - * Creates a Paper.js object using data parsed from the selected SVG - * Document Object Model (DOM). The SVG object is imported, than a layer - * is created (with groups for the items if needed). - * - * Supports nested groups - * - * @param {SVG DOM} svg An SVG DOM object with parameters - * @return {Layer} A Paper.js layer - */ - - importSVG: function(svg) +var ImportSVG = function() +{ + //initialize + function initialize() { - var layer = new Layer(); - groups = this.importGroup(svg); - layer.addChild(groups); - - return layer; - }, + + }; /** - * Creates a Paper.js group by parsing a specific GNode of the imported - * SVG DOM * - * @name ImportSVG#importGroup - * @function - * @param {XML DOM} svg A node passed in by the imported SVG - * @return {Group} group A Paper.js group - * - * + * 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 */ - importGroup: function(svg) - { - 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; - }, - + this.importSVG = function(svg) + { + 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 + */ + function importGroup(svg) + { + return group; + }; + /** * Creates a Paper.js Path by parsing - * a specific SVG node (rectangle, path, circle, polygon, etc.) - * and creating the right Path object based on the SVG type. - * - * @name ImportSVG#importPath - * @function - * @param {XML DOM} svg An SVG object - * @return {Item} item A Paper.js item + * 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) - { - 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; - case 'text': - item = this._importText(svg); - break; - default: - break; - } - - return item; - }, - - /** - * Creates a Path.Circle item in Paper.js using an imported Circle from - * SVG - * - * @name ImportSVG#importCircle - * @function - * @param {XML DOM} svgCircle An SVG circle node - * @return {Path.Circle} circle A Path.Circle item for Paper.js - */ - _importCircle: 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 item in Paper.js using an imported Oval from SVG - * - * @name ImportSVG#importOval - * @function - * @param {XML DOM} svgOval An SVG ellipse node - * @return {Path.Oval} oval A Path.Oval item for Paper.js - */ - _importOval: 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 Path.Rectangle item from an imported SVG rectangle - * - * @name ImportSVG#importRectangle - * @function - * @param {XML DOM} svgRectangle An SVG rectangle node - * @return {Path.Rectangle} rectangle A Path.Rectangle item for Paper.js - */ - /** - * Creates a Path.RoundRectangle item from an imported SVG rectangle - * with rounded corners - * - * @name ImportSVG#importRectangle - * @function - * @param {XML DOM} svgRectangle An SVG rectangle node with rounded - * corners - * @return {Path.RoundRectangle} rectangle A Path.Rectangle item for - * Paper.js - */ - _importRectangle: 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 item in Paper.js from an imported SVG line - * - * @name ImportSVG#importLine - * @function - * @param {XML DOM} svgLine An SVG line node - * @return {Path.Line} line A Path.Line item for Paper.js - */ - _importLine: 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; - }, - - /** - * Creates a PointText item in Paper.js from an imported SVG text node - * - * @name ImportSVG#importText - * @function - * @param {XML DOM} svgText An SVG text node - * @return {Path.Text} text A PointText item for Paper.js - */ - _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; - } -}); + function importPath(svg) + { + return path; + }; + + initialize(); // calls the init function after class is loaded +}; \ No newline at end of file diff --git a/test/tests/ImportSVG.js b/test/tests/ImportSVG.js deleted file mode 100644 index e7fd358e..00000000 --- a/test/tests/ImportSVG.js +++ /dev/null @@ -1,32 +0,0 @@ -/* -* Paper.js -* -* This file is part of Paper.js, a JavaScript Vector Graphics Library, -* based on Scriptographer.org and designed to be largely API compatible. -* http://paperjs.org/ -* http://scriptographer.org/ -* -* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey -* http://lehni.org/ & http://jonathanpuckey.com/ -* -* Distributed under the MIT license. See LICENSE file for details. -* -* All rights reserved. -* -* This test file created by Stetson-Team-Alpha -*/ - -module('ImportSVG'); - -test('Make a circle', function() -{ - var svgDocument = evt.target.ownerDocument; - var svgcircle = svgDocument.createElementNS(svgns, "circle"); - svgCircle.setAttributeNS(null, "cx", 25); - svgCircle.setAttributeNS(null, "cy", 25); - svgCircle.setAttributeNS(null, "r", 20); - svgCircle.setAttributeNS(null, "fill", "green"); - var circle = new ImportSVG(svgCircle) - equals(circle); -}); -/