mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -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({
|
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;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
* Creates a Paper.js Group by parsing
|
||||||
* Takes the svg dom obj and parses the data
|
* a specific svg g node
|
||||||
* 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 Group
|
||||||
* takes in a svg object (xml dom)
|
*/
|
||||||
* returns Paper.js Layer
|
importGroup: function(svg)
|
||||||
*/
|
{
|
||||||
importSVG: function(svg)
|
var group = new Group();
|
||||||
{
|
var child;
|
||||||
//TODO: return layer;
|
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
|
* Creates a Paper.js Path by parsing
|
||||||
* a specific svg g node
|
* 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
|
* takes in a svg object (xml dom)
|
||||||
*/
|
* returns Paper.js Item
|
||||||
importGroup: function(svg)
|
*/
|
||||||
{
|
importPath: function(svg)
|
||||||
//TODO: return group;
|
{
|
||||||
},
|
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
|
* Creates a Path.Circle Paper.js item
|
||||||
* a specific svg node (rect, path, circle, polygon, etc)
|
*
|
||||||
* and creating the right path object based on the svg type.
|
* takes a svg circle node (xml dom)
|
||||||
*
|
* returns Paper.js Path.Circle item
|
||||||
* takes in a svg object (xml dom)
|
*/
|
||||||
* returns Paper.js Group
|
_importCircle: function(svgCircle)
|
||||||
*/
|
{
|
||||||
importPath: function(svg)
|
var cx = svgCircle.cx.baseVal.value || 0;
|
||||||
{
|
var cy = svgCircle.cy.baseVal.value || 0;
|
||||||
//TODO: return path;
|
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.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;
|
/**
|
||||||
},
|
* 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;
|
||||||
|
|
||||||
/**
|
var center = new Point(cx, cy);
|
||||||
* Creates a Path.Oval Paper.js item
|
var offset = new Point(rx, ry);
|
||||||
*
|
var topLeft = center.subtract(offset);
|
||||||
* takes a svg ellipse node (xml dom)
|
var bottomRight = center.add(offset);
|
||||||
* 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 rect = new Rectangle(topLeft, bottomRight);
|
||||||
var offset = new Point(rx, ry);
|
var oval = new Path.Oval(rect);
|
||||||
var topLeft = center.subtract(offset);
|
|
||||||
var bottomRight = center.add(offset);
|
|
||||||
|
|
||||||
var rect = new Rectangle(topLeft, bottomRight);
|
return oval;
|
||||||
var oval = new Path.Oval(rect);
|
},
|
||||||
|
|
||||||
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;
|
||||||
|
|
||||||
/**
|
var topLeft = new Point(x, y);
|
||||||
* Creates a "rectangle" Paper.js item
|
var size = new Size(width, height);
|
||||||
*
|
var rectangle = new Rectangle(topLeft, size);
|
||||||
* 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);
|
if (rx > 0 || ry > 0) {
|
||||||
var size = new Size(width, height);
|
var cornerSize = new Size(rx, ry);
|
||||||
var rectangle = new Rectangle(topLeft, size);
|
rectangle = new Path.RoundRectangle(rectangle, cornerSize);
|
||||||
|
} else {
|
||||||
|
rectangle = new Path.Rectangle(rectangle);
|
||||||
|
}
|
||||||
|
|
||||||
if (rx > 0 || ry > 0) {
|
return rectangle;
|
||||||
var cornerSize = new Size(rx, ry);
|
},
|
||||||
rectangle = new Path.RoundRectangle(rectangle, cornerSize);
|
|
||||||
} else {
|
|
||||||
rectangle = new Path.Rectangle(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;
|
||||||
|
|
||||||
/**
|
var from = new Point(x1, y1);
|
||||||
* Creates a Path.Line Paper.js item
|
var to = new Point(x2, y2);
|
||||||
*
|
var line = new Path.Line(from, to);
|
||||||
* 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);
|
return line;
|
||||||
var to = new Point(x2, y2);
|
},
|
||||||
var line = new Path.Line(from, to);
|
|
||||||
|
|
||||||
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