mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
Merge branch 'ImportSVG'
This commit is contained in:
Justin Ridgewell
commit
76303bb756
2 changed files with 205 additions and 119 deletions
32
examples/Scripts/ImportSVG.html
Normal file
32
examples/Scripts/ImportSVG.html
Normal 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>
|
||||
|
|
@ -5,140 +5,194 @@
|
|||
*/
|
||||
|
||||
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
|
||||
* items inside. Should support nested groups.
|
||||
*
|
||||
* takes in a svg object (xml dom)
|
||||
* returns Paper.js Layer
|
||||
*/
|
||||
importSVG: function(svg)
|
||||
{
|
||||
var layer = new Layer();
|
||||
groups = this.importGroup(svg);
|
||||
layer.addChild(groups);
|
||||
|
||||
},
|
||||
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)
|
||||
{
|
||||
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;
|
||||
},
|
||||
|
||||
/**
|
||||
* 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 Item
|
||||
*/
|
||||
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 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
|
||||
*/
|
||||
_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);
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
_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;
|
||||
|
||||
/**
|
||||
* 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)
|
||||
*/
|
||||
_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;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
_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;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
});
|
||||
Loading…
Reference in a new issue