scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-19 14:10:14 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'ImportSVG'

Browse source
This commit is contained in:
Justin Ridgewell 2012-09-16 01:15:37 -04:00
commit 76303bb756
2 changed files with 205 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
examples/Scripts/ImportSVG.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stroke Bounds</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
strokeColor: 'black',
strokeWidth: 2,
strokeCap: 'round'
};
var isvg = new ImportSVG;
isvg.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:500px; background:black;" id="svg">
<g>
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:1" id="line" />
<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
</g>
<g>
<rect x="250" y="180" width="150" height="150" style="fill:blue" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;" id="oval" />
</g>
<text x="20" y="15" fill="green">I love SVG</text>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

84
src/svg/ImportSVG.js
View file

@ -5,14 +5,7 @@
*/ */
var ImportSVG = this.ImportSVG = Base.extend({ var ImportSVG = this.ImportSVG = Base.extend({
//initialize
initialize: function()
{
},
/** /**
*
* Takes the svg dom obj and parses the data * Takes the svg dom obj and parses the data
* to create a layer with groups (if needed) with * to create a layer with groups (if needed) with
* items inside. Should support nested groups. * items inside. Should support nested groups.
@ -22,7 +15,11 @@ var ImportSVG = this.ImportSVG = Base.extend({
*/ */
importSVG: function(svg) importSVG: function(svg)
{ {
//TODO: return layer; var layer = new Layer();
groups = this.importGroup(svg);
layer.addChild(groups);
return layer;
}, },
/** /**
@ -34,7 +31,18 @@ var ImportSVG = this.ImportSVG = Base.extend({
*/ */
importGroup: function(svg) 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;
}, },
/** /**
@ -43,11 +51,31 @@ var ImportSVG = this.ImportSVG = Base.extend({
* and creating the right path object based on the svg type. * and creating the right path object based on the svg type.
* *
* takes in a svg object (xml dom) * takes in a svg object (xml dom)
* returns Paper.js Group * returns Paper.js Item
*/ */
importPath: function(svg) 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;
case 'text':
item = this._importText(svg);
break;
default:
break;
}
return item;
}, },
/** /**
@ -56,7 +84,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
* takes a svg circle node (xml dom) * takes a svg circle node (xml dom)
* returns Paper.js Path.Circle item * returns Paper.js Path.Circle item
*/ */
createCircle: function(svgCircle) _importCircle: function(svgCircle)
{ {
var cx = svgCircle.cx.baseVal.value || 0; var cx = svgCircle.cx.baseVal.value || 0;
var cy = svgCircle.cy.baseVal.value || 0; var cy = svgCircle.cy.baseVal.value || 0;
@ -73,7 +101,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
* takes a svg ellipse node (xml dom) * takes a svg ellipse node (xml dom)
* returns Paper.js Path.Oval item * returns Paper.js Path.Oval item
*/ */
createOval: function(svgOval) _importOval: function(svgOval)
{ {
var cx = svgOval.cx.baseVal.value || 0; var cx = svgOval.cx.baseVal.value || 0;
var cy = svgOval.cy.baseVal.value || 0; var cy = svgOval.cy.baseVal.value || 0;
@ -99,7 +127,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
* - Path.Rectangle item * - Path.Rectangle item
* - Path.RoundRectangle item (if the rectangle has rounded corners) * - Path.RoundRectangle item (if the rectangle has rounded corners)
*/ */
createRectangle: function(svgRectangle) _importRectangle: function(svgRectangle)
{ {
var x = svgRectangle.x.baseVal.value || 0; var x = svgRectangle.x.baseVal.value || 0;
var y = svgRectangle.y.baseVal.value || 0; var y = svgRectangle.y.baseVal.value || 0;
@ -128,7 +156,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
* takes a svg line node (xml dom) * takes a svg line node (xml dom)
* returns a Path.Line item * returns a Path.Line item
*/ */
createLine: function(svgLine) _importLine: function(svgLine)
{ {
var x1 = svgLine.x1.baseVal.value || 0; var x1 = svgLine.x1.baseVal.value || 0;
var y1 = svgLine.y1.baseVal.value || 0; var y1 = svgLine.y1.baseVal.value || 0;
@ -140,5 +168,31 @@ var ImportSVG = this.ImportSVG = Base.extend({
var line = new Path.Line(from, to); var line = new Path.Line(from, to);
return line; 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;
} }
}); });