scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-06-13 05:31:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merging all the magic

Browse source
This commit is contained in:
Andrew 2012-09-30 17:51:50 -04:00
parent f46c77c699
commit c6c460519e
21 changed files with 2837 additions and 119 deletions

48
examples/ExportSVGTests/Circle Testing.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas">
initializePath();
function initializePath() {
var topLeft = new Point(-200, -200);
var size = new Size(-150, -100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle);
path.fillColor = 'black';
var topLeft = new Point(-5, -400);
var size = new Size(-100, -50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle);
path.fillColor = 'yellow';
var path = new Path.Circle(new Point(-25, -25), -7);
path.fillColor = 'red';
var esvg = new ExportSVG();
//esvg.exportProject(paper.project);
var output = esvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

42
examples/ExportSVGTests/Empty Path Testing.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas">
initializePath();
function initializePath() {
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var esvg = new ExportSVG();
//esvg.exportProject(paper.project);
var output = esvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

61
examples/ExportSVGTests/Line Testing.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas">
initializePath();
function initializePath() {
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10px";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5px";
var esvg = new ExportSVG();
//esvg.exportProject(paper.project);
var output = esvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

54
examples/ExportSVGTests/Random Path Testing.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas">
initializePath();
function initializePath() {
var center = new Point(100, 100);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
var center = new Point(100, 300);
var sides = 10;
var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black';
var center = new Point(100, 400);
var points = 6;
var radius1 = 20;
var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
var esvg = new ExportSVG();
var output = esvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

70
examples/ExportSVGTests/Rect and Attribute Testing.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas">
initializePath();
function initializePath() {
var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = "[5, 2]";
path1.dashOffset = "0";
var point2 = new Point(75, 75);
var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
path2.strokeColor = 'red';
path2.strokeWidth = '4px';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point3 = new Point(150, 150);
var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3);
path3.strokeColor = 'blue';
var point4 = new Point(200, 200);
var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.RoundRectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
var esvg = new ExportSVG();
var output = esvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

60
examples/ExportSVGTests/Text Testing.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="350"></canvas>
<script type="text/paperscript" canvas="canvas">
function initializePath() {
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
radius = 50;
center = new Point(100,100);
var path2 = new Path.Circle(center,radius);
path2.strokeColor = 'black';
console.log(path2.getSegments());
//copy = path2.clone();
//copy.strokeColor = 'blue';
point = new Point(120,100);
path2.shear(.5, .5);
colors = ['red', 'blue', 'green', 'orange'];
for (var i in path2.segments) {
var p = path2.segments[i].point;
var c = new Path.Circle(p, 2);
c.fillColor = colors[i];
}
console.log(path2.segments);
var esvg = new ExportSVG();
var output = esvg.exportProject(paper.project);
//console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

46
examples/ExportSVGTests/Transform Test 1.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas">
initializePath();
function initializePath() {
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
var clones = 30;
var angle = 360 / clones;
for(var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
var esvg = new ExportSVG();
//esvg.exportProject(paper.project);
var output = esvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

41
examples/ExportSVGTests/Transform Test 2.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas">
initializePath();
function initializePath() {
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
var esvg = new ExportSVG();
//esvg.exportProject(paper.project);
var output = esvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
</body>
</html>

33
examples/ImportSVGTests/Circle and Oval Testing.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circle and Oval Testing</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:1000px;" id="svg">
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="oval1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="oval2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="oval3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="oval4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="oval5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="oval6"/>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

32
examples/ImportSVGTests/Line Testing.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>Line Testing</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:1000px;" id="svg">
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
<line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
<line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
<line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
<line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
<line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
<line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

49
examples/ImportSVGTests/Multiple Paths Test 1.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Multiple Paths Test</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:1000px;" id="svg">
<g>
<circle cx="100" cy="400" r="100" style="fill:darkred;" id="circle" />
<g>
<rect x="200" y="20" rx="20" ry="10" width="150px" height="150px" style="fill:green" id="round" />
<circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
</g>
</g>
<g>
<rect x="250" y="180" width="150px" height="150px" fill="blue" style="stroke-dasharray: 10px, 4px; stroke-width:0px;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="oval" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" id="path" />
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4px" fill="none" id="path"/>
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4px" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

45
examples/ImportSVGTests/Multiple Paths Test 2.html Normal file
View file

@ -0,0 +1,45 @@
<!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:1000px;" id="svg">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3px" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3px" fill="none" />
<path id="lineBC" d="M 175 200 l 150 0" stroke="red"
stroke-width="3px" fill="none" />
<path id="quadcurveABC" d="M 100 350 q 150 -300 300 0"
stroke="blue" stroke-width="5px" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g fill="black" stroke="none"
text-anchor="middle">
<text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
<text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
<text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
</g>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

85
examples/ImportSVGTests/Nested Groups Test.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nested Groups Test</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:1000px;" id="svg">
<g>
<circle cx="25" cy="25" r="20" style="fill:orange;" id="circle" />
<g>
<circle cx="75" cy="25" r="20" style="fill:red;" id="circle" />
<g>
<circle cx="125" cy="25" r="20" style="fill:pink;" id="circle" />
<g>
<circle cx="175" cy="25" r="20" style="fill:blue;" id="circle" />
<g>
<circle cx="225" cy="25" r="20" style="fill:green;" id="circle" />
<g>
<circle cx="275" cy="25" r="20" style="fill:purple;" id="circle" />
<g>
<circle cx="25" cy="75" r="20" style="fill:black;" id="circle" />
<g>
<circle cx="75" cy="75" r="20" style="fill:indigo;" id="circle" />
<g>
<circle cx="125" cy="75" r="20" style="fill:gold;" id="circle" />
<g>
<circle cx="175" cy="75" r="20" style="fill:brown;" id="circle" />
<g>
<circle cx="225" cy="75" r="20" style="fill:darkred;" id="circle" />
<g>
<circle cx="275" cy="75" r="20" style="fill:darkgreen;" id="circle" />
<g>
<circle cx="25" cy="125" r="20" style="fill:darkgrey;" id="circle" />
<g>
<circle cx="75" cy="125" r="20" style="fill:violet;" id="circle" />
<g>
<circle cx="125" cy="125" r="20" style="fill:yellow;" id="circle" />
<g>
<circle cx="175" cy="125" r="20" style="fill:lightblue;" id="circle" />
<g>
<circle cx="225" cy="125" r="20" style="fill:lightgreen;" id="circle" />
<g>
<circle cx="275" cy="125" r="20" style="fill:darkblue;" id="circle" />
<g>
<circle cx="25" cy="175" r="20" style="fill:darkorange;" id="circle" />
<g>
<circle cx="75" cy="175" r="20" style="fill:lawngreen;" id="circle" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

30
examples/ImportSVGTests/Rect Testing.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rect Testing</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:1000px;" id="svg">
<rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" />
<rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
<rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
<rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />
<rect x="300" y="10" width="50" height="50px" fill="gold" style="stroke-dasharray: 10, 4; stroke: black; stroke-widthpx:5" id="rect1" />
<rect x="300" y="300" width="100" height="100px" fill="pink" style="stroke-dasharray: 10, 4; stroke-width:50px;" id="rect2" />
<rect x="300" y="180" width="178" height="100px" fill="hotpink" style="stroke-dasharray: 10, 4; stroke-width:10px;" id="rect3" />
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

47
examples/ImportSVGTests/Testing.html Normal file
View file

@ -0,0 +1,47 @@
<!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:500; height:1000px;" id="svg">
<g>
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10;stroke-dasharray: 10, 4;stroke-linecap: butt" id="line" />
<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
<circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
</g>
<g>
<rect x="250" y="180" width="150" height="150" fill="blue" style="stroke-dasharray: 10, 4; stroke-width:0;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="oval" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4" fill="none" id="path"/>
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>

27
examples/ImportSVGTests/Text Testing.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text Testing</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:1000px;" id="svg">
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">Plain SVG Text</text>
<text x="20" y="50" fill="red" transform="rotate(30 20,40)">Rotated SVG Text</text>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>

29
examples/ImportSVGTests/Transform Testing.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circle and Oval Testing</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:1000px;" id="svg">
<g transform="scale(5) translate(15, 15) rotate(20) skewX(20) skewY(5)" >
<rect x="10" y="10" width="5" height="5" fill="firebrick" />
<circle r="10" fill="seagreen" stroke="blue"/>
<rect x="5" y="5" width="12" height="2" fill="gray" stroke="silver"/>
</g>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>
</html>

528
src/svg/ExportSVG.js
View file

@ -1,90 +1,476 @@
/**
* Exports items, layers or whole projects as a svg
* Stetson Alpha - Paper.js
*
* var NS="http://www.w3.org/2000/svg";
* var svg=document.createElementNS(NS,"svg");
/*
* 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 programmed by Stetson-Team-Alpha
* @author Stetson-Team-Alpha
*/
var ExportSVG = function()
{
var svgObj = null; // xml dom object (svg typed)
//initialize the svgObj and what ever else.
function initialize()
{
};
/**
* @name ExportSVG
*
* @class The ExportSVG object represents a Paper.js object that will be
* converted into an SVG canvas design.
* The Paper.js object is converted by changing its items into groups
*
*/
var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
//initialize the svgObj
initialize: function() {
this.NS = 'http://www.w3.org/2000/svg';
this.svgObj = document.createElementNS(this.NS, 'svg');
},
/**
* Takes the selected Paper.js project and parses all of its layers and
* groups to be placed into SVG groups, converting the project into one
* SVG group.
*
* @function
* @param {Paper.js Project} project A Paper.js project
* @return {SVG DOM} this.svgObj The imported project converted to an
* SVG project
*/
exportProject: function(project) {
var layerArray = project.layers;
var layer;
for (var i = 0; i < layerArray.length; ++i) {
layer = layerArray[i];
this.svgObj.appendChild(this.exportLayer(layer));
}
return this.svgObj;
},
/**
*
* Takes the whole project and parses
* all the layers to be put into svg groups and
* groups into svg groups making all the projects
* items into one svg.
* Takes the selected Paper.js layer and parses all groups
* and items on the layer into one SVG
*
* takes in a Paper.js Project
* returns svg object (xml dom)
* @name ExportSVG#exportLayer
* @function
* @param {Paper.js Layer} layer A Paper.js layer
* @return {SVG DOM} this.exportGroup(layer) The layer converted into an
* SVG group
*/
this.exportProject = function(project)
{
return svgObj;
};
exportLayer: function(layer) {
return this.exportGroup(layer);
},
/**
*
* Takes the layer and then parses all groups
* and items into one svg
* Takes a Paper.js group and puts its items in a SVG file.
*
* takes in a Paper.js Layer
* returns svg object (xml dom)
* @name ExportSVG#exportGroup
* @function
* @param {Paper.js Group} group A Paper.js group
* @return {SVG DOM} svgG An SVG object
*/
this.exportLayer = function(layer)
{
return svgObj;
};
exportGroup: function(group) {
var svgG = document.createElementNS(this.NS, 'g');
var curChild;
for (var i in group.children) {
curChild = group.children[i];
if (curChild.children) {
svgG.appendChild(this.exportGroup(curChild));
} else {
svgG.appendChild(this.exportPath(curChild));
}
}
return svgG;
},
/**
*
* Takes the group and puts it's items
* in a svg file.
*
* takes in a Paper.js Group
* returns svg object (xml dom)
*/
this.exportGroup = function(group)
{
return svgObj;
};
/**
*
* Takes the item and puts it in
* a svg file.
*
* takes in a Paper.js Item
* returns svg object (xml dom)
*/
this.exportItem = function(item)
{
return svgObj;
};
/**
*
* Takes the path and puts it in
* a svg file.
*
* takes in a Paper.js Path
* returns svg object (xml dom)
* @name ExportSVG#exportPath
* @function
* @param {Paper.js Path} path A Paper.js path object
* @return {SVG DOM} svgPath An SVG object of the imported path
*/
this.exportPath = function(path)
{
return svgObj;
};
exportPath: function(path) {
var svgEle;
//Getting all of the segments(a point, a HandleIn and a HandleOut) in the path
var segArray;
var pointArray;
var handleInArray;
var handleOutArray;
//finding the type of path to export
if(path.content) {
type = 'text';
} else {
//Values are only defined if the path is not text because
// text does not have these values
segArray = path.getSegments();
pointArray = new Array();
handleInArray = new Array();
handleOutArray = new Array();
for (i = 0; i < segArray.length; i++) {
pointArray[i] = segArray[i].getPoint();
handleInArray[i] = segArray[i].getHandleIn();
handleOutArray[i] = segArray[i].getHandleOut();
}
var exp = this;
var type = exp._determineType(path, segArray, pointArray, handleInArray, handleOutArray);
}
//switch statement that determines what type of SVG element to add to the SVG Object
switch (type) {
case 'rect':
var width = pointArray[0].getDistance(pointArray[3], false);
var height = pointArray[0].getDistance(pointArray[1], false);
svgEle = document.createElementNS(this.NS, 'rect');
svgEle.setAttribute('x', path.bounds.topLeft.getX());
svgEle.setAttribute('y', path.bounds.topLeft.getY());
svgEle.setAttribute('width', width);
svgEle.setAttribute('height', height);
break;
case 'roundRect':
//d variables and point are used to determine the rounded corners for the rounded rectangle
var dx1 = pointArray[1].getDistance(pointArray[6], false);
var dx2 = pointArray[0].getDistance(pointArray[7], false);
var dx3 = (dx1 - dx2) / 2;
var dy1 = pointArray[0].getDistance(pointArray[3], false);
var dy2 = pointArray[1].getDistance(pointArray[2], false);
var dy3 = (dy1 - dy2) / 2;
var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].getY() - dy3));
var width = Math.round(dx1);
var height = Math.round(dy1);
var rx = pointArray[3].getX() - point.x;
var ry = pointArray[2].getY() - point.y;
svgEle = document.createElementNS(this.NS, 'rect');
svgEle.setAttribute('x', path.bounds.topLeft.getX());
svgEle.setAttribute('y', path.bounds.topLeft.getY());
svgEle.setAttribute('rx', rx);
svgEle.setAttribute('ry', ry);
svgEle.setAttribute('width', width);
svgEle.setAttribute('height', height);
break;
case'line':
svgEle = document.createElementNS(this.NS, 'line');
svgEle.setAttribute('x1', pointArray[0].getX());
svgEle.setAttribute('y1', pointArray[0].getY());
svgEle.setAttribute('x2', pointArray[pointArray.length - 1].getX());
svgEle.setAttribute('y2', pointArray[pointArray.length - 1].getY());
break;
case 'circle':
svgEle = document.createElementNS(this.NS, 'circle');
var radius = (pointArray[0].getDistance(pointArray[2], false)) /2;
svgEle.setAttribute('cx', path.bounds.center.x);
svgEle.setAttribute('cy', path.bounds.center.y);
svgEle.setAttribute('r', radius);
break;
case 'ellipse':
svgEle = document.createElementNS(this.NS, 'ellipse');
var radiusX = (pointArray[2].getDistance(pointArray[0], false)) / 2;
var radiusY = (pointArray[3].getDistance(pointArray[1], false)) /2;
svgEle.setAttribute('cx', path.bounds.center.x);
svgEle.setAttribute('cy', path.bounds.center.y);
svgEle.setAttribute('rx', radiusX);
svgEle.setAttribute('ry', radiusY);
break;
case 'polyline':
svgEle = document.createElementNS(this.NS, 'polyline');
var pointString = '';
for(i = 0; i < pointArray.length; ++i) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
}
svgEle.setAttribute('points', pointString);
break;
case 'polygon':
svgEle = document.createElementNS(this.NS, 'polygon');
var pointString = '';
for(i = 0; i < pointArray.length; ++i) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
}
svgEle.setAttribute('points', pointString);
break;
case 'text':
svgEle = document.createElementNS(this.NS, 'text');
svgEle.setAttribute('x', path.getPoint().getX());
svgEle.setAttribute('y', path.getPoint().getY());
if(path.style.font != undefined) {
svgEle.setAttribute('font', path.style.font);
}
if(path.characterStyle.font != undefined) {
svgEle.setAttribute('font-family', path.characterStyle.font);
}
if(path.characterStyle.fontSize != undefined) {
svgEle.setAttribute('font-size',path.characterStyle.fontSize);
}
svgEle.textContent = path.getContent();
break;
default:
svgEle = document.createElementNS(this.NS, 'path');
svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
break;
}
//If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle
//found by the transformCheck method and make a path that accommodates for the transformed object
if(type != 'text' && type != undefined && type != 'polygon' && type != 'polyline' && type != 'line') {
var angle = this._transformCheck(path, pointArray, type) + 90;
console.log(angle);
if(angle != 0) {
if(type == 'rect' || type == 'roundRect') {
svgEle = document.createElementNS(this.NS, 'path');
svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
} else {
svgEle = document.createElementNS(this.NS, 'path');
svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
}
}
}
if(type == 'text') {
svgEle.setAttribute('transform','rotate(' + path.matrix.getRotation() + ',' + path.getPoint().getX() + ',' +path.getPoint().getY() +')');
}
if(path.id != undefined) {
svgEle.setAttribute('id', path.id);
}
//checks if there is a stroke color in the passed in path
//adds an SVG element attribute with the defined stroke color
if (path.strokeColor != undefined) {
svgEle.setAttribute('stroke', path.strokeColor.toCssString());
}
//same thing as above except checking for a fill color
if (path.fillColor != undefined) {
svgEle.setAttribute('fill', path.fillColor.toCssString());
} else {
svgEle.setAttribute('fill', 'rgba(0,0,0,0)');
}
//same thing as stroke color except with stroke width
if(path.strokeWidth != undefined){
svgEle.setAttribute('stroke-width', path.strokeWidth);
}
//same thing as stroke color except with the path name
if(path.name != undefined) {
svgEle.setAttribute('name', path.name);
}
//same thing as stroke color except with the strokeCap
if(path.strokeCap != undefined) {
svgEle.setAttribute('stroke-linecap', path.strokeCap);
}
//same thing as stroke color except with the strokeJoin
if(path.strokeJoin != undefined) {
svgEle.setAttribute('stroke-linejoin', path.strokeJoin);
}
//same thing as stroke color except with the opacity
if(path.opacity != undefined) {
svgEle.setAttribute('opacity', path.opacity);
}
//checks to see if there the dashArray is set, then adds the attribute if there is.
if(path.dashArray[0] != undefined) {
var dashVals = '';
for (var i in path.dashArray) {
if(i != path.dashArray.length -1) {
dashVals += path.dashArray[i] + ", ";
} else {
dashVals += path.dashArray[i];
}
}
svgEle.setAttribute('stroke-dasharray', dashVals);
}
//same thing as stroke color except with the dash offset
if(path.dashOffset != undefined) {
svgEle.setAttribute('stroke-dashoffset', path.dashOffset);
}
//same thing as stroke color except with the miter limit
if(path.miterLimit != undefined) {
svgEle.setAttribute('stroke-miterlimit', path.miterLimit);
}
//same thing as stroke color except with the visibility
if(path.visibility != undefined) {
var visString = '';
if(path.visibility) {
visString = 'visible';
} else {
visString = 'hidden';
}
svgEle.setAttribute('visibility', visString);
}
return svgEle;
},
initialize(); // calls the init function after class is loaded
};
//Determines whether the object has been transformed or not through determining the angle
_determinesIfTransformed: function(path, pointArray, type) {
var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2;
var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2;
var topMidBound = new Point(topMidBoundx, topMidBoundy);
var centerPoint = path.getPosition();
var topMidPathx;
var topMidPathy;
var topMidPath;
switch (type) {
case 'rect':
topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2;
topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
case 'ellipse':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
break;
case 'circle':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
break;
case 'roundRect':
topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2;
topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
default:
//Nothing happens here
break;
}
var deltaY = topMidPath.y - centerPoint.getY();
var deltaX = topMidPath.x - centerPoint.getX();
var angleInDegrees = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
return angleInDegrees;
},
//pointstring is formatted in the way the SVG XML will be reading
//Namely, a point and the way to traverse to that point
pathSetup: function(path, pointArray, hIArray, hOArray) {
var svgPath = document.createElementNS(this.NS, 'path');
var pointString = '';
var x1;
var x2;
var y1;
var y2;
var handleOut1;
var handleIn2;
pointString += 'M' + pointArray[0].getX() + ',' + pointArray[0].getY() + ' ';
//Checks 2 points and the angles in between the 2 points
for (i = 0; i < pointArray.length-1; i++) {
x1 = pointArray[i].getX();
y1 = pointArray[i].getY();
x2 = pointArray[i + 1].getX();
y2 = pointArray[i + 1].getY();
handleOut1 = hOArray[i];
handleIn2 = hIArray[i+1];
if(handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() ==0) {
//L is lineto, moving to a point with drawing
pointString+= 'L' + x2 + ',' + y2 + ' ';
} else {
//c is curveto, relative: handleOut, handleIn - endpoint, endpoint - startpoint
pointString+= 'c' + (handleOut1.getX()) + ',' + (handleOut1.getY()) + ' ';
pointString+= (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' ';
pointString+= (x2 - x1) + ',' + (y2-y1) + ' ';
}
}
if (!hOArray[hOArray.length - 1].equals([0,0]) && !hIArray[0].equals([0,0])) {
handleOut1 = hOArray[hOArray.length - 1];
handleIn2 = hIArray[0];
// Bezier curve from last point to first
x1 = pointArray[pointArray.length - 1].getX();
y1 = pointArray[pointArray.length - 1].getY();
x2 = pointArray[0].getX();
y2 = pointArray[0].getY();
pointString+= 'c' + (handleOut1.getX()) + ',' + (handleOut1.getY()) + ' ';
pointString+= (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' ';
pointString+= (x2 - x1) + ',' + (y2-y1) + ' ';
}
if (path.getClosed())
{
//Z implies a closed path, connecting the first and last points
pointString += 'z';
}
svgPath.setAttribute('d',pointString);
return svgPath;
},
/**
* Checks the type SVG object created by converting from Paper.js
*
* @name ExportSVG#checkType
* @function
* @param {SVG Object Array} segArray An array of objects for the newly
* converted SVG object
* @return {String} type A string labeling which type of object the
* passed in object is
*/
_determineType: function(path, segArray, pointArray, handleInArray, handleOutArray) {
var type;
var dPoint12;
var dPoint34;
var curves = false;
var segHandleIn;
var segHandleOut;
for( var i in segArray){
//Checks for any curves (if the handles have values). Differentiates between straight objects(line, polyline, rect, and polygon) and
//and objects with curves(circle, ellipse, roundedRectangle).
segHandleIn = segArray[i].getHandleIn();
segHandleOut = segArray[i].getHandleOut();
curves = segHandleIn.getX() != 0 || segHandleIn.getY() != 0 ? true : curves;
curves = segHandleOut.getX() != 0 || segHandleOut.getY() != 0 ? true : curves;
}
//Checks for curves in the passed in segments
//Checks if the type of the passed in path is a rounded rectangle, an ellipse, a circle, or if it's simply a path
//If there aren't any curves (if curves = false), then it checks if the type is a rectangle, a polygon, a polyline, or simply a line.
if(curves){
if(segArray.length == 8) {
//if the distance between (point0 and point3) and (point7 and point4) are equal then it is a roundedRectangle
dPoint12 = Math.round(pointArray[0].getDistance(pointArray[3], false));
dPoint34 = Math.round(pointArray[7].getDistance(pointArray[4], false));
if(dPoint12 == dPoint34) {
type = 'roundRect';
}
} else if(segArray.length == 4) {
//checks if the values of the point have values similar to circles and ellipses
var checkPointValues = true;
for(i = 0; i < pointArray.length && checkPointValues == true; i++) {
if(handleInArray[i].getX() != 0 || handleInArray[i].getY() != 0 && Math.round(Math.abs(handleInArray[i].getX())) === Math.round(Math.abs(handleOutArray[i].getX())) && Math.round(Math.abs(handleInArray[i].getY())) === Math.round(Math.abs(handleOutArray[i].getY()))) {
checkPointValues = true;
} else {
checkPointValues = false;
}
}
if(checkPointValues == true) {
//if the distance between (point0 and point2) and (point1 and point3) are equal, then it is a circle
var d1 = Math.round(pointArray[0].getDistance(pointArray[2], false));
var d2 = Math.round(pointArray[1].getDistance(pointArray[3], false));
if(d1 == d2) {
type = 'circle';
} else {
type = 'ellipse';
}
}
}
} else if(!curves) {
if(segArray.length == 4) {
//if the distance between (point0 and point1) and (point2 and point3) are equal, then it is a rectangle
dPoint12 = Math.round(pointArray[0].getDistance(pointArray[1], false));
dPoint34 = Math.round(pointArray[3].getDistance(pointArray[2], false));
if(dPoint12 == dPoint34) {
type = 'rect';
}
} else if(segArray.length >= 3) {
//If it is an object with more than 3 segments and the path is closed, it is a polygon
if(path.getClosed()) {
type = 'polygon';
} else {
type = 'polyline';
}
} else {
//if all of the handle values are == 0 and there are only 2 segments, it is a line
type = 'line';
}
} else {
type = null;
}
console.log(type);
return type;
}
});

622
src/svg/ImportSVG.js
View file

@ -1,55 +1,581 @@
/**
* Imports svg into items with groups
* Stetson Alpha - Paper.js
*
*/
/*
* 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
*/
var ImportSVG = function()
{
//initialize
function initialize()
{
/**
* @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.
*
*/
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 {item} A Paper.js layer
*/
importSVG: function(svg) {
var item;
var symbol;
switch (svg.nodeName.toLowerCase()) {
case 'line':
item = this._importLine(svg);
break;
case 'rect':
item = this._importRectangle(svg);
break;
case 'circle':
item = this._importCircle(svg);
break;
case 'ellipse':
item = this._importOval(svg);
break;
case 'g':
case 'svg':
item = this._importGroup(svg);
break;
case 'text':
item = this._importText(svg);
break;
case 'path':
item = this._importPath(svg);
break;
case 'polygon':
case 'polyline':
item = this._importPoly(svg);
break;
case 'symbol':
item = this._importGroup(svg);
this._importAttributesAndStyles(svg, item);
symbol = new Symbol(item);
item = null;
default:
//Not supported yet.
}
if (item) {
this._importAttributesAndStyles(svg, item);
}
return item;
},
/**
* 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
*
*
*/
_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.importSVG(child);
if (item) {
group.addChild(item);
}
}
return group;
},
/**
* 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 && ry) {
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) {
var x = svgText.x.baseVal.getItem(0).value || 0;
var y = svgText.y.baseVal.getItem(0).value || 0;
var dx = 0;
var dy = 0;
if (svgText.dx.baseVal.numberOfItems) {
dx = svgText.dx.baseVal.getItem(0).value || 0;
}
if (svgText.dy.baseVal.numberOfItems) {
dy = svgText.dy.baseVal.getItem(0).value || 0;
}
};
var textLength = svgText.textLength.baseVal.value || 0;
/* Not supported by Paper.js
x; //multiple values for x
y; //multiple values for y
dx; //multiple values for x
dy; //multiple values for y
var rotate; //character rotation
var lengthAdjust;
*/
var textContent = svgText.textContent || "";
var bottomLeft = new Point(x, y);
bottomLeft = bottomLeft.add([dx, dy]);
bottomLeft = bottomLeft.subtract([textLength / 2, 0]);
var text = new PointText(bottomLeft);
text.content = textContent;
return text;
},
/**
*
* 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
*/
this.importSVG = function(svg)
{
return layer;
};
* 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
*/
_importPath: function(svgPath) {
var path = new Path();
var segments = svgPath.pathSegList;
var segment;
var j;
var relativeToPoint;
var controlPoint;
var prevCommand;
var segmentTo;
for (var i = 0; i < segments.numberOfItems; ++i){
segment = segments.getItem(i);
if (segment.pathSegType == SVGPathSeg.PATHSEG_UNKNOWN) {
continue;
}
if (segment.pathSegType % 2 == 1 && path.segments.length > 0) {
relativeToPoint = path.lastSegment.point;
} else {
relativeToPoint = new Point(0, 0);
}
segmentTo = new Point(segment.x, segment.y);
segmentTo = segmentTo.add(relativeToPoint);
switch (segment.pathSegType) {
case SVGPathSeg.PATHSEG_CLOSEPATH:
path.closePath();
break;
case SVGPathSeg.PATHSEG_MOVETO_ABS:
case SVGPathSeg.PATHSEG_MOVETO_REL:
path.moveTo(segmentTo);
break;
case SVGPathSeg.PATHSEG_LINETO_ABS:
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
case SVGPathSeg.PATHSEG_LINETO_REL:
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:
path.lineTo(segmentTo);
break;
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
path.cubicCurveTo(
relativeToPoint.add([segment.x1, segment.y1]),
relativeToPoint.add([segment.x2, segment.y2]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
path.quadraticCurveTo(
relativeToPoint.add([segment.x1, segment.y1]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_ARC_ABS:
case SVGPathSeg.PATHSEG_ARC_REL:
//TODO: Implement Arcs.
//TODO: Requires changes in Paper.js's Path to do.
//TODO: http://www.w3.org/TR/SVG/implnote.html
break;
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
prevCommand = segments.getItem(i - 1);
controlPoint = new Point(prevCommand.x2, prevCommand.y2);
controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
controlPoint = controlPoint.add(path.lastSegment.point);
controlPoint = path.lastSegment.point.subtract(controlPoint);
controlPoint = path.lastSegment.point.add(controlPoint);
path.cubicCurveTo(
controlPoint,
relativeToPoint.add([segment.x2, segment.y2]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:
for (j = i; j >= 0; --j) {
prevCommand = segments.getItem(j);
if (prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS ||
prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL
) {
controlPoint = new Point(prevCommand.x1, prevCommand.y1);
controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
controlPoint = controlPoint.add(path.segments[j].point);
break;
}
}
for (j; j < i; ++j) {
controlPoint = path.segments[j].point.subtract(controlPoint);
controlPoint = path.segments[j].point.add(controlPoint);
}
path.quadraticCurveTo(controlPoint, segmentTo);
break;
}
}
return path;
},
/**
* Creates a Paper.js Group by parsing
* a specific svg g node
*
* takes in a svg object (xml dom)
* returns Paper.js Group
* Creates a Path.Poly item in Paper.js using an imported Polygon or
* Polyline SVG node
*
* @name ImportSVG#importPoly
* @function
* @param {XML DOM} svgPoly An SVG polygon or polyline node
* @return {Path.Poly} poly A Path.Poly item for Paper.js
* - svg polyline node (xml dom)
* - svg polygon node (xml dom)
* returns a Path item
*/
function importGroup(svg)
{
return group;
};
_importPoly: function(svgPoly) {
var poly = new Path();
var points = svgPoly.points;
var start = points.getItem(0);
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (svgPoly.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
return poly;
},
/**
* 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
* Converts various SVG styles and attributes into Paper.js styles and
* attributes
* This method is destructive to item (changes happen to it)
*
* @name ImportSVG#importAttributesAndStyles
* @function
* @param {XML DOM} svg An SVG node
* @param {Item} item A Paper.js item
*/
function importPath(svg)
{
return path;
};
initialize(); // calls the init function after class is loaded
};
_importAttributesAndStyles: function(svg, item) {
var name,
value,
cssName;
for (var i = 0; i < svg.style.length; ++i) {
name = svg.style[i];
cssName = name.replace(/-(.)/g, function(match, p) {
return p.toUpperCase();
});
value = svg.style[cssName];
this._applyAttributeOrStyle(name, value, item, svg);
}
for (var i = 0; i < svg.attributes.length; ++i) {
name = svg.attributes[i].name;
value = svg.attributes[i].value;
this._applyAttributeOrStyle(name, value, item, svg);
}
},
/**
* Parses an SVG style attibute and applies it to a Paper.js item
* This method is destructive to item (changes happen to it)
*
* @name ImportSVG#applyAttributeOrStyle
* @function
* @param {Style Name} name An SVG style name
* @param {Style Value} value The value of an SVG style
* @param {Item} item A Paper.js item
* @param {XML DOM} svg An SVG node
*/
_applyAttributeOrStyle: function(name, value, item, svg) {
if (!value) {
return;
}
switch (name) {
case 'id':
item.name = value;
break;
case 'fill':
if (value != 'none') {
item.fillColor = value;
}
break;
case 'stroke':
if (value != 'none') {
item.strokeColor = value;
}
break;
case 'stroke-width':
item.strokeWidth = parseFloat(value, 10);
break;
case 'stroke-linecap':
item.strokeCap = value;
break;
case 'stroke-linejoin':
item.strokeJoin = value;
break;
case 'stroke-dasharray':
value = value.replace(/px/g, '');
value = value.replace(/, /g, ',');
value = value.replace(/ /g, ',');
value = value.split(',');
for (var i in value) {
value[i] = parseFloat(value[i], 10);
}
item.dashArray = value;
break;
case 'stroke-dashoffset':
item.dashOffset = parseFloat(value, 10);
break;
case 'stroke-miterlimit':
item.miterLimit = parseFloat(value, 10);
break;
case 'transform':
this._applyTransform(item, svg);
case 'opacity':
item.opacity = parseFloat(value, 10);
case 'visibility':
item.visibility = (value == 'visible') ? true : false;
break;
case 'font':
case 'font-family':
case 'font-size':
//Implemented in characterStyle below.
break;
default:
// Not supported yet.
break;
}
if (item.characterStyle) {
switch (name) {
case 'font':
var text = document.createElement('span');
text.style.font = value;
for (var i = 0; i < text.style.length; ++i) {
var n = text.style[i];
this._applyAttributeOrStyle(n, text.style[n], item, svg);
}
break;
case 'font-family':
var fonts = value.split(',');
fonts[0] = fonts[0].replace(/^\s+|\s+$/g, "");
item.characterStyle.font = fonts[0];
break;
case 'font-size':
item.characterStyle.fontSize = parseFloat(value, 10);
break;
}
}
},
/**
* Applies the transformations specified on the SVG node to the newly
* made Paper.js item
* This method is destructive to item
*
* @name ImportSVG#applyTransform
* @function
* @param {XML DOM} An SVG node
* @param {Item} A Paper.js item
*/
_applyTransform: function(item, svg) {
var transforms = svg.transform.baseVal;
var transform;
var matrix = new Matrix();
for (var i = 0; i < transforms.numberOfItems; ++i) {
transform = transforms.getItem(i);
if (transform.type == SVGTransform.SVG_TRANSFORM_UNKNOWN) {
continue;
}
var transformMatrix = new Matrix(
transform.matrix.a,
transform.matrix.c,
transform.matrix.b,
transform.matrix.d,
transform.matrix.e,
transform.matrix.f
);
switch (transform.type) {
case SVGTransform.SVG_TRANSFORM_TRANSLATE:
break;
case SVGTransform.SVG_TRANSFORM_SCALE:
break;
//Compensate for SVG's theta rotation going the opposite direction
case SVGTransform.SVG_TRANSFORM_MATRIX:
var temp = transformMatrix.getShearX();
transformMatrix.setShearX(transformMatrix.getShearY());
transformMatrix.setShearY(temp);
break;
case SVGTransform.SVG_TRANSFORM_SKEWX:
transformMatrix.setShearX(transformMatrix.getShearY());
transformMatrix.setShearY(0);
break;
case SVGTransform.SVG_TRANSFORM_SKEWY:
transformMatrix.setShearY(transformMatrix.getShearX());
transformMatrix.setShearX(0);
break;
case SVGTransform.SVG_TRANSFORM_ROTATE:
transformMatrix.setShearX(transformMatrix.getShearX() * -1);
transformMatrix.setShearY(transformMatrix.getShearY() * -1);
break;
}
matrix.concatenate(transformMatrix);
}
item.transform(matrix);
}
});

556
test/tests/ExportSVG.js Normal file
View file

@ -0,0 +1,556 @@
/**
* 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('ExportSVG');
test('compare line path functions', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'line');
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
shape.setAttribute('x1', x1);
shape.setAttribute('y1', y1);
shape.setAttribute('x2', x2);
shape.setAttribute('y2', y2);
var line = new Path.Line([x1, y1], [x2, y2]);
var epjs = new ExportSVG();
var exportedLine = epjs.exportPath(line);
var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1');
var shapex2 = shape.getAttribute('x2');
var shapey2 = shape.getAttribute('y2');
var exportedx1 = exportedLine.getAttribute('x1');
var exportedy1 = exportedLine.getAttribute('y1');
var exportedx2 = exportedLine.getAttribute('x2');
var exportedy2 = exportedLine.getAttribute('y2');
equals(shapex1, exportedx1);
equals(shapey1, exportedy1);
equals(shapex2, exportedx2);
equals(shapey2, exportedy2);
});
test('compare negative line path functions', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'line');
var x1 = -5,
x2 = -45,
y1 = -5,
y2 = -45;
shape.setAttribute('x1', x1);
shape.setAttribute('y1', y1);
shape.setAttribute('x2', x2);
shape.setAttribute('y2', y2);
var line = new Path.Line([x1, y1], [x2, y2]);
var epjs = new ExportSVG();
var exportedLine = epjs.exportPath(line);
var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1');
var shapex2 = shape.getAttribute('x2');
var shapey2 = shape.getAttribute('y2');
var exportedx1 = exportedLine.getAttribute('x1');
var exportedy1 = exportedLine.getAttribute('y1');
var exportedx2 = exportedLine.getAttribute('x2');
var exportedy2 = exportedLine.getAttribute('y2');
equals(shapex1, exportedx1);
equals(shapey1, exportedy1);
equals(shapex2, exportedx2);
equals(shapey2, exportedy2);
});
test('compare invalid line path functions', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'line');
var x1 = null,
x2 = null,
y1 = null,
y2 = null;
shape.setAttribute('x1', x1);
shape.setAttribute('y1', y1);
shape.setAttribute('x2', x2);
shape.setAttribute('y2', y2);
var line = new Path.Line([x1, y1], [x2, y2]);
var epjs = new ExportSVG();
var exportedLine = epjs.exportPath(line);
var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1');
var shapex2 = shape.getAttribute('x2');
var shapey2 = shape.getAttribute('y2');
var exportedx1 = exportedLine.getAttribute('x1');
var exportedy1 = exportedLine.getAttribute('y1');
var exportedx2 = exportedLine.getAttribute('x2');
var exportedy2 = exportedLine.getAttribute('y2');
equals(shapex1, exportedx1);
equals(shapey1, exportedy1);
equals(shapex2, exportedx2);
equals(shapey2, exportedy2);
});
/*test('compare rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'rect');
var x = 25,
y = 25,
width = 100,
height = 100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var point = new Point(100, 100);
var size = new Size(100, 100);
var path = new Path.Rectangle(point, size);
var epjs = new ExportSVG();
var exportedRectangle = new epjs.exportPath(path);
var shapex1 = shape.getAttribute('x');
var shapey1 = shape.getAttribute('y1');
var shapewidth = shape.getAttribute('width');
var shapeheight = shape.getAttribute('height');
var exportedx = exportedRectangle.getAttribute('x1');
var exportedy = exportedRectangle.getAttribute('y1');
var exportedwidth = exportedRectangle.getAttribute('width');
var exportedheight = exportedRectangle.getAttribute('height');
equals(shapex, exportedx);
equals(shapey, exportedy);
equals(shapewidth, exportedwidth);
equals(shapeheight, exportedheight);
});
test('compare negative rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'rect');
var x = -25,
y = -25,
width = -100,
height = -100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var rect = new Rectangle(topLeft, size);
var epjs = new ExportSVG();
var exportedRectangle = new epjs.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
var shapewidth = shape.getAttribute('width');
var shapeheight = shape.getAttribute('height');
var exportedx = exportedRectangle.getAttribute('x');
var exportedy = exportedRectangle.getAttribute('y');
var exportedwidth = exportedRectangle.getAttribute('width');
var exportedheight = exportedRectangle.getAttribute('height');
equals(shapex, exportedx);
equals(shapey, exportedy);
equals(shapewidth, exportedwidth);
equals(shapeheight, exportedheight);
});
test('compare invalid rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'rect');
var x = null,
y = null,
width = null,
height = 100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var rect = new Rectangle(topLeft, size);
var epjs = new ExportSVG();
var exportedRectangle = new epjs.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
var shapewidth = shape.getAttribute('width');
var shapeheight = shape.getAttribute('height');
var exportedx = exportedRectangle.getAttribute('x');
var exportedy = exportedRectangle.getAttribute('y');
var exportedwidth = exportedRectangle.getAttribute('width');
var exportedheight = exportedRectangle.getAttribute('height');
equals(shapex, exportedx);
equals(shapey, exportedy);
equals(shapewidth, exportedwidth);
equals(shapeheight, exportedheight);
});
test('compare rounded rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'rect');
var x = 25,
y = 25,
rx = 50,
ry = 50,
width = 100,
height = 100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var cornerSize = new Size(rx, ry);
var rect = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rect, cornerSize);
var epjs = new ExportSVG();
var exportedRectangle = new epjs.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
var shapecx = shape.getAttribute('rx');
var shapecy = shape.getAttribute('ry');
var shapewidth = shape.getAttribute('width');
var shapeheight = shape.getAttribute('height');
var exportedx = exportedRectangle.getAttribute('x');
var exportedy = exportedRectangle.getAttribute('y');
var exportedcx = exportedRectangle.getAttribute('rx');
var exportedcy = exportedRectangle.getAttribute('ry');
var exportedwidth = exportedRectangle.getAttribute('width');
var exportedheight = exportedRectangle.getAttribute('height');
equals(shapex, exportedx);
equals(shapey, exportedy);
equals(shapewidth, exportedwidth);
equals(shapeheight, exportedheight);
});
test('compare negative rounded rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'rect');
var x = -25,
y = -25,
rx = -50,
ry = -50,
width = -100,
height = -100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var cornerSize = new Size(rx, ry);
var rect = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rect, cornerSize);
var epjs = new ExportSVG();
var exportedRectangle = new epjs.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
var shapecx = shape.getAttribute('rx');
var shapecy = shape.getAttribute('ry');
var shapewidth = shape.getAttribute('width');
var shapeheight = shape.getAttribute('height');
var exportedx = exportedRectangle.getAttribute('x');
var exportedy = exportedRectangle.getAttribute('y');
var exportedcx = exportedRectangle.getAttribute('rx');
var exportedcy = exportedRectangle.getAttribute('ry');
var exportedwidth = exportedRectangle.getAttribute('width');
var exportedheight = exportedRectangle.getAttribute('height');
equals(shapex, exportedx);
equals(shapey, exportedy);
equals(shapewidth, exportedwidth);
equals(shapeheight, exportedheight);
});
test('compare invalid rounded rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'rect');
var x = null,
y = null,
rx = null,
ry = null,
width = null,
height = null;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var cornerSize = new Size(rx, ry);
var rect = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rect, cornerSize);
var epjs = new ExportSVG();
var exportedRectangle = new epjs.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
var shapecx = shape.getAttribute('rx');
var shapecy = shape.getAttribute('ry');
var shapewidth = shape.getAttribute('width');
var shapeheight = shape.getAttribute('height');
var exportedx = exportedRectangle.getAttribute('x');
var exportedy = exportedRectangle.getAttribute('y');
var exportedcx = exportedRectangle.getAttribute('rx');
var exportedcy = exportedRectangle.getAttribute('ry');
var exportedwidth = exportedRectangle.getAttribute('width');
var exportedheight = exportedRectangle.getAttribute('height');
equals(shapex, exportedx);
equals(shapey, exportedy);
equals(shapewidth, exportedwidth);
equals(shapeheight, exportedheight);
});*/
test('compare oval values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'ellipse');
var cx = 100,
cy = 80,
rx = 50;
ry = 30;
shape.setAttribute('cx', cx);
shape.setAttribute('cy', cy);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
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 epjs = new ExportSVG();
var exportedOval = epjs.exportPath(oval);
var shapecx = shape.getAttribute('cx');
var shapecy = shape.getAttribute('cy');
var shaperx = shape.getAttribute('rx');
var shapery = shape.getAttribute('ry');
var exportedcx = exportedOval.getAttribute('cx');
var exportedcy = exportedOval.getAttribute('cy');
var exportedrx = exportedOval.getAttribute('rx');
var exportedry = exportedOval.getAttribute('ry');
equals(shapecx, exportedcx);
equals(shapecy, exportedcy);
equals(shaperx, exportedrx);
equals(shapery, exportedry);
});
test('compare circle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'circle');
var cx = 100,
cy = 80,
r = 50;
shape.setAttribute('cx', cx);
shape.setAttribute('cy', cy);
shape.setAttribute('r', r);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
var epjs = new ExportSVG();
var exportedCircle = epjs.exportPath(circle);
var shapecx = shape.getAttribute('cx');
var shapecy = shape.getAttribute('cy');
var shaper = shape.getAttribute('r');
var exportedcx = exportedCircle.getAttribute('cx');
var exportedcy = exportedCircle.getAttribute('cy');
var exportedr = exportedCircle.getAttribute('r');
equals(shapecx, exportedcx);
equals(shapecy, exportedcy);
equals(shaper, exportedr);
});
test('compare polygon values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polygon');
var svgpoints = "100,10 40,180 190,60 10,60 160,180";
shape.setAttribute('points', svgpoints);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
var epjs = new ExportSVG();
var exportedPolygon = epjs.exportPath(poly);
var svgPoints = shape.getAttribute('points');
var exportedPoints = shape.getAttribute('points');
equals(svgPoints, exportedPoints);
});
test('compare negative polygon values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polygon');
var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
shape.setAttribute('points', svgpoints);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
var epjs = new ExportSVG();
var exportedPolygon = epjs.exportPath(poly);
var svgPoints = shape.getAttribute('points');
var exportedPoints = shape.getAttribute('points');
equals(svgPoints, exportedPoints);
});
test('compare polyline values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polyline');
var svgpoints = "5,5 45,45 5,45 45,5";
shape.setAttribute('points', svgpoints);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
var epjs = new ExportSVG();
var exportedPolygon = epjs.exportPath(poly);
var svgPoints = shape.getAttribute('points');
var exportedPoints = shape.getAttribute('points');
equals(svgPoints, exportedPoints);
});
test('compare negative polyline values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polyline');
var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
shape.setAttribute('points', svgpoints);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
var epjs = new ExportSVG();
var exportedPolygon = epjs.exportPath(poly);
var svgPoints = shape.getAttribute('points');
var exportedPoints = shape.getAttribute('points');
equals(svgPoints, exportedPoints);
});

451
test/tests/ImportSVG.js Normal file
View file

@ -0,0 +1,451 @@
/*
* 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 an svg line', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'line');
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
shape.setAttribute('x1', x1);
shape.setAttribute('y1', y1);
shape.setAttribute('x2', x2);
shape.setAttribute('y2', y2);
var isvg = new ImportSVG();
var importedLine = isvg.importSVG(shape);
var line = new Path.Line([x1, y1], [x2, y2]);
compareSegmentLists(importedLine.segments, line.segments, true);
});
test('make an svg line with invalid values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'line');
shape.setAttribute('x1', null);
shape.setAttribute('y1', null);
shape.setAttribute('x2', null);
shape.setAttribute('y2', null);
var isvg = new ImportSVG();
var importedLine = isvg.importSVG(shape);
var line = new Path.Line([0, 0], [0, 0]);
compareSegmentLists(importedLine.segments, line.segments, true);
});
test('compare rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'rect');
var x = 25,
y = 25,
width = 100,
height = 100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSVG();
var importedRectangle = isvg.importSVG(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var rectangle = new Rectangle(topLeft, size);
var realRectangle = new Path.Rectangle(rectangle);
compareSegmentLists(importedRectangle.segments, realRectangle.segments, true);
});
test('compare negative rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'rect');
var x = -925,
y = -111,
width = -100,
height = -18;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSVG();
var importedRectangle = isvg.importSVG(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var rectangle = new Rectangle(topLeft, size);
var realRectangle = new Path.Rectangle(rectangle);
compareSegmentLists(importedRectangle.segments, realRectangle.segments, true);
});
test('compare invalid rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'rect');
shape.setAttribute('x', null);
shape.setAttribute('y', null);
shape.setAttribute('width', null);
shape.setAttribute('height', null);
var isvg = new ImportSVG();
var importedRectangle = isvg.importSVG(shape);
var topLeft = new Point(0, 0);
var size = new Size(0, 0);
var rectangle = new Rectangle(topLeft, size);
var realRectangle = new Path.Rectangle(rectangle);
compareSegmentLists(importedRectangle.segments, realRectangle.segments, true);
});
test('compare round rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'rect');
var x = 25,
y = 25,
rx = 50,
ry = 50,
width = 100,
height = 100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSVG();
var importedRectangle = isvg.importSVG(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var cornerSize = new Size(rx, ry);
var rectangle = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rectangle, cornerSize);
compareSegmentLists(importedRectangle.segments, roundRect.segments, true);
});
test('compare negative round rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'rect');
var x = -25,
y = -25,
rx = -50,
ry = -50,
width = -100,
height = -100;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSVG();
var importedRectangle = isvg.importSVG(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var cornerSize = new Size(rx, ry);
var rectangle = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rectangle, cornerSize);
compareSegmentLists(importedRectangle.segments, roundRect.segments, true);
});
test('compare invalid round rectangle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'rect');
var x = null,
y = null,
rx = null,
ry = null,
width = null,
height = null;
shape.setAttribute('x', x);
shape.setAttribute('y', y);
shape.setAttribute('rx', 1);
shape.setAttribute('ry', 1);
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSVG();
var importedRectangle = isvg.importSVG(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var cornerSize = new Size(rx, ry);
var rectangle = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rectangle, cornerSize);
compareSegmentLists(importedRectangle.segments, roundRect.segments, true);
});
test('compare oval values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'ellipse');
var cx = 300,
cy = 80,
rx = 100,
ry = 50;
shape.setAttribute('cx', cx);
shape.setAttribute('cy', cy);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var isvg = new ImportSVG();
var importedOval = isvg.importSVG(shape);
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);
compareSegmentLists(importedOval.segments, oval.segments, true);
});
test('compare negative oval values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'ellipse');
var cx = -111,
cy = -2,
rx = -292,
ry = -1;
shape.setAttribute('cx', cx);
shape.setAttribute('cy', cy);
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var isvg = new ImportSVG();
var importedOval = isvg.importSVG(shape);
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);
compareSegmentLists(importedOval.segments, oval.segments, true);
});
test('compare invalid oval values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'ellipse');
shape.setAttribute('cx', null);
shape.setAttribute('cy', null);
shape.setAttribute('rx', null);
shape.setAttribute('ry', null);
var isvg = new ImportSVG();
var importedOval = isvg.importSVG(shape);
var center = new Point(0, 0);
var offset = new Point(0, 0);
var topLeft = center.subtract(offset);
var bottomRight = center.add(offset);
var rect = new Rectangle(topLeft, bottomRight);
var oval = new Path.Oval(rect);
compareSegmentLists(importedOval.segments, oval.segments, true);
});
test('compare circle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'circle');
var cx = 100,
cy = 80,
r = 50;
shape.setAttribute('cx', cx);
shape.setAttribute('cy', cy);
shape.setAttribute('r', r);
var isvg = new ImportSVG();
var importedCircle = isvg.importSVG(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
compareSegmentLists(importedCircle.segments, circle.segments, true);
});
test('compare negative circle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'circle');
var cx = -234,
cy = -77,
r = -1110;
shape.setAttribute('cx', cx);
shape.setAttribute('cy', cy);
shape.setAttribute('r', r);
var isvg = new ImportSVG();
var importedCircle = isvg.importSVG(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
compareSegmentLists(importedCircle.segments, circle.segments, true);
});
test('compare invalid circle values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'circle');
shape.setAttribute('cx', null);
shape.setAttribute('cy', null);
shape.setAttribute('r', null);
var isvg = new ImportSVG();
var importedCircle = isvg.importSVG(shape);
var center = new Point(0, 0);
var circle = new Path.Circle(center, 0);
compareSegmentLists(importedCircle.segments, circle.segments, true);
});
test('compare polygon values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polygon');
var svgpoints = "100,10 40,180 190,60 10,60 160,180";
shape.setAttribute('points', svgpoints);
var isvg = new ImportSVG();
var importedPolygon = isvg.importSVG(shape);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
compareSegmentLists(importedPolygon.segments, poly.segments, true);
});
test('compare negative polygon values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polygon');
var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
shape.setAttribute('points', svgpoints);
var isvg = new ImportSVG();
var importedPolygon = isvg.importSVG(shape);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
compareSegmentLists(importedPolygon.segments, poly.segments, true);
});
test('compare polyline values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polyline');
var svgpoints = "5,5 45,45 5,45 45,5";
shape.setAttribute('points', svgpoints);
var isvg = new ImportSVG();
var importedPolyline = isvg.importSVG(shape);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
compareSegmentLists(importedPolyline.segments, poly.segments, true);
});
test('compare negative polyline values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'polyline');
var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
shape.setAttribute('points', svgpoints);
var isvg = new ImportSVG();
var importedPolyline = isvg.importSVG(shape);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var point;
poly.moveTo([start.x, start.y]);
for (var i = 1; i < points.length; ++i) {
point = points.getItem(i);
poly.lineTo([point.x, point.y]);
}
if (shape.nodeName.toLowerCase() == 'polygon') {
poly.closePath();
}
compareSegmentLists(importedPolyline.segments, poly.segments, true);
});