scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switch from using classes to object literals for SVG exporter / importer.

Browse source
This commit is contained in:
Jürg Lehni 2012-11-02 16:19:45 -07:00
parent ee65ee1026
commit 69dc8be629
21 changed files with 71 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/SVG Export/Circle Testing.html
View file

@ -28,8 +28,7 @@
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";

4
examples/SVG Export/Empty Path Testing.html
View file

@ -22,9 +22,7 @@
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";

3
examples/SVG Export/Line Testing.html
View file

@ -37,8 +37,7 @@
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";

3
examples/SVG Export/Random Path Testing.html
View file

@ -35,8 +35,7 @@
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";

3
examples/SVG Export/Rect and Attribute Testing.html
View file

@ -49,8 +49,7 @@
path4.strokeColor= 'yellow';
path4.fillColor='purple';
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";

5
examples/SVG Export/Text Testing.html
View file

@ -34,9 +34,8 @@
var c = new Path.Circle(p, 2);
c.fillColor = colors[i];
}
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);

5
examples/SVG Export/Transform Test 1.html
View file

@ -24,9 +24,8 @@
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";

3
examples/SVG Export/Transform Test 2.html
View file

@ -21,8 +21,7 @@
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
var esvg = new ExportSvg();
var output = esvg.exportProject(paper.project);
var output = ExportSvg.exportProject(paper.project);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);

3
examples/SVG Import/Circle and Oval Testing.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Line Testing.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Multiple Paths Test 1.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Multiple Paths Test 2.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Nested Groups Test.html
View file

@ -12,8 +12,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Rect Testing.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Testing.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Text Testing.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

3
examples/SVG Import/Transform Testing.html
View file

@ -11,8 +11,7 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
ImportSvg.import(document.getElementById('svg'));
</script>
</head>
<body>

5
src/svg/ExportSvg.js
View file

@ -17,7 +17,6 @@
* @author Stetson-Team-Alpha
*/
/**
* @name ExportSvg
*
@ -27,7 +26,7 @@
*
*/
var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
var ExportSvg = this.ExportSvg = /** @Lends ExportSvg */{
create: function(tag) {
return document.createElementNS('http://www.w3.org/2000/svg', tag);
@ -473,4 +472,4 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
}
return type;
}
});
};

8
src/svg/ImportSvg.js
View file

@ -28,7 +28,7 @@
*
*/
var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
var ImportSvg = this.ImportSvg = /** @Lends ImportSvg */{
/**
* Creates a Paper.js object using data parsed from the selected
* SVG Document Object Model (DOM). The SVG object is imported,
@ -39,7 +39,7 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
* @param {SVG DOM} svg An SVG DOM object with parameters
* @return {item} A Paper.js layer
*/
importSvg: function(svg) {
import: function(svg) {
var item;
var symbol;
switch (svg.nodeName.toLowerCase()) {
@ -103,7 +103,7 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
child = svg.childNodes[i];
if (child.nodeType != 1)
continue;
item = this.importSvg(child);
item = this.import(child);
if (item)
group.addChild(item);
}
@ -577,4 +577,4 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
}
item.transform(matrix);
}
});
};

45
test/tests/ExportSvg.js
View file

@ -32,8 +32,7 @@ test('compare line path functions', function() {
var line = new Path.Line([x1, y1], [x2, y2]);
var epjs = new ExportSvg();
var exportedLine = epjs.exportPath(line);
var exportedLine = ExportSvg.exportPath(line);
var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1');
@ -66,8 +65,7 @@ test('compare negative line path functions', function() {
var line = new Path.Line([x1, y1], [x2, y2]);
var epjs = new ExportSvg();
var exportedLine = epjs.exportPath(line);
var exportedLine = ExportSvg.exportPath(line);
var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1');
@ -100,8 +98,7 @@ test('compare invalid line path functions', function() {
var line = new Path.Line([x1, y1], [x2, y2]);
var epjs = new ExportSvg();
var exportedLine = epjs.exportPath(line);
var exportedLine = ExportSvg.exportPath(line);
var shapex1 = shape.getAttribute('x1');
var shapey1 = shape.getAttribute('y1');
@ -136,8 +133,7 @@ test('compare invalid line path functions', function() {
var size = new Size(100, 100);
var path = new Path.Rectangle(point, size);
var epjs = new ExportSvg();
var exportedRectangle = new epjs.exportPath(path);
var exportedRectangle = ExportSvg.exportPath(path);
var shapex1 = shape.getAttribute('x');
var shapey1 = shape.getAttribute('y1');
@ -172,8 +168,7 @@ test('compare negative rectangle values', function() {
var size = new Size(width, height);
var rect = new Rectangle(topLeft, size);
var epjs = new ExportSvg();
var exportedRectangle = new epjs.exportPath(rect);
var exportedRectangle = ExportSvg.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
@ -207,8 +202,7 @@ test('compare invalid rectangle values', function() {
var size = new Size(width, height);
var rect = new Rectangle(topLeft, size);
var epjs = new ExportSvg();
var exportedRectangle = new epjs.exportPath(rect);
var exportedRectangle = ExportSvg.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
@ -248,8 +242,7 @@ test('compare rounded rectangle values', function() {
var rect = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rect, cornerSize);
var epjs = new ExportSvg();
var exportedRectangle = new epjs.exportPath(rect);
var exportedRectangle = ExportSvg.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
@ -293,8 +286,7 @@ test('compare negative rounded rectangle values', function() {
var rect = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rect, cornerSize);
var epjs = new ExportSvg();
var exportedRectangle = new epjs.exportPath(rect);
var exportedRectangle = ExportSvg.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
@ -338,8 +330,7 @@ test('compare invalid rounded rectangle values', function() {
var rect = new Rectangle(topLeft, size);
var roundRect = new Path.RoundRectangle(rect, cornerSize);
var epjs = new ExportSvg();
var exportedRectangle = new epjs.exportPath(rect);
var exportedRectangle = ExportSvg.exportPath(rect);
var shapex = shape.getAttribute('x');
var shapey = shape.getAttribute('y');
@ -381,8 +372,7 @@ test('compare oval values', function() {
var rect = new Rectangle(topLeft, bottomRight);
var oval = new Path.Oval(rect);
var epjs = new ExportSvg();
var exportedOval = epjs.exportPath(oval);
var exportedOval = ExportSvg.exportPath(oval);
var shapecx = shape.getAttribute('cx');
var shapecy = shape.getAttribute('cy');
@ -414,8 +404,7 @@ test('compare circle values', function() {
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
var epjs = new ExportSvg();
var exportedCircle = epjs.exportPath(circle);
var exportedCircle = ExportSvg.exportPath(circle);
var shapecx = shape.getAttribute('cx');
var shapecy = shape.getAttribute('cy');
@ -451,8 +440,7 @@ test('compare polygon values', function() {
poly.closePath();
}
var epjs = new ExportSvg();
var exportedPolygon = epjs.exportPath(poly);
var exportedPolygon = ExportSvg.exportPath(poly);
var svgPoints = shape.getAttribute('points');
@ -482,8 +470,7 @@ test('compare negative polygon values', function() {
poly.closePath();
}
var epjs = new ExportSvg();
var exportedPolygon = epjs.exportPath(poly);
var exportedPolygon = ExportSvg.exportPath(poly);
var svgPoints = shape.getAttribute('points');
@ -513,8 +500,7 @@ test('compare polyline values', function() {
poly.closePath();
}
var epjs = new ExportSvg();
var exportedPolygon = epjs.exportPath(poly);
var exportedPolygon = ExportSvg.exportPath(poly);
var svgPoints = shape.getAttribute('points');
@ -544,8 +530,7 @@ test('compare negative polyline values', function() {
poly.closePath();
}
var epjs = new ExportSvg();
var exportedPolygon = epjs.exportPath(poly);
var exportedPolygon = ExportSvg.exportPath(poly);
var svgPoints = shape.getAttribute('points');

80
test/tests/ImportSvg.js
View file

@ -20,18 +20,17 @@ module('ImportSvg');
test('make an svg line', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'line');
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);
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 importedLine = ImportSvg.import(shape);
var line = new Path.Line([x1, y1], [x2, y2]);
@ -46,8 +45,7 @@ test('make an svg line with invalid values', function() {
shape.setAttribute('x2', null);
shape.setAttribute('y2', null);
var isvg = new ImportSvg();
var importedLine = isvg.importSvg(shape);
var importedLine = ImportSvg.import(shape);
var line = new Path.Line([0, 0], [0, 0]);
@ -67,8 +65,7 @@ test('compare rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSvg(shape);
var importedRectangle = ImportSvg.import(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -91,12 +88,11 @@ test('compare negative rectangle values', function() {
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);
var importedRectangle = ImportSvg.import(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);
});
@ -111,8 +107,7 @@ test('compare invalid rectangle values', function() {
shape.setAttribute('width', null);
shape.setAttribute('height', null);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSvg(shape);
var importedRectangle = ImportSvg.import(shape);
var topLeft = new Point(0, 0);
var size = new Size(0, 0);
@ -138,8 +133,7 @@ test('compare round rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSvg(shape);
var importedRectangle = ImportSvg.import(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -166,8 +160,7 @@ test('compare negative round rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSvg(shape);
var importedRectangle = ImportSvg.import(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -194,8 +187,7 @@ test('compare invalid round rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSvg(shape);
var importedRectangle = ImportSvg.import(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -218,8 +210,7 @@ test('compare oval values', function() {
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var isvg = new ImportSvg();
var importedOval = isvg.importSvg(shape);
var importedOval = ImportSvg.import(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -246,8 +237,7 @@ test('compare negative oval values', function() {
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var isvg = new ImportSvg();
var importedOval = isvg.importSvg(shape);
var importedOval = ImportSvg.import(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -269,8 +259,7 @@ test('compare invalid oval values', function() {
shape.setAttribute('rx', null);
shape.setAttribute('ry', null);
var isvg = new ImportSvg();
var importedOval = isvg.importSvg(shape);
var importedOval = ImportSvg.import(shape);
var center = new Point(0, 0);
var offset = new Point(0, 0);
@ -294,8 +283,7 @@ test('compare circle values', function() {
shape.setAttribute('cy', cy);
shape.setAttribute('r', r);
var isvg = new ImportSvg();
var importedCircle = isvg.importSvg(shape);
var importedCircle = ImportSvg.import(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
@ -314,8 +302,7 @@ test('compare negative circle values', function() {
shape.setAttribute('cy', cy);
shape.setAttribute('r', r);
var isvg = new ImportSvg();
var importedCircle = isvg.importSvg(shape);
var importedCircle = ImportSvg.import(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
@ -332,8 +319,7 @@ test('compare invalid circle values', function() {
shape.setAttribute('cy', null);
shape.setAttribute('r', null);
var isvg = new ImportSvg();
var importedCircle = isvg.importSvg(shape);
var importedCircle = ImportSvg.import(shape);
var center = new Point(0, 0);
var circle = new Path.Circle(center, 0);
@ -348,8 +334,7 @@ test('compare polygon values', function() {
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 importedPolygon = ImportSvg.import(shape);
var poly = new Path();
var points = shape.points;
@ -375,8 +360,7 @@ test('compare negative polygon values', function() {
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 importedPolygon = ImportSvg.import(shape);
var poly = new Path();
var points = shape.points;
@ -397,17 +381,16 @@ test('compare negative polygon values', function() {
});
test('compare polyline values', function() {
var svgns = 'http://www.w3.org/2000/svg'
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 importedPolyline = ImportSvg.import(shape);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var start = points.getItem(0);
var point;
poly.moveTo([start.x, start.y]);
@ -424,17 +407,16 @@ test('compare polyline values', function() {
});
test('compare negative polyline values', function() {
var svgns = 'http://www.w3.org/2000/svg'
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 importedPolyline = ImportSvg.import(shape);
var poly = new Path();
var points = shape.points;
var start = points.getItem(0)
var start = points.getItem(0);
var point;
poly.moveTo([start.x, start.y]);