mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Reset files to stubs
This commit is contained in:
Justin Ridgewell
parent
350fc91c4d
commit
f46c77c699
3 changed files with 49 additions and 377 deletions
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
/
|
||||
Loading…
Reference in a new issue