mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -05:00
233 lines
7.3 KiB
JavaScript
233 lines
7.3 KiB
JavaScript
/*
|
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
|
* http://paperjs.org/
|
|
*
|
|
* Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
|
|
* http://juerglehni.com/ & https://puckey.studio/
|
|
*
|
|
* Distributed under the MIT license. See LICENSE file for details.
|
|
*
|
|
* All rights reserved.
|
|
*/
|
|
|
|
QUnit.module('SvgImport');
|
|
|
|
test('Import SVG line', function() {
|
|
var attrs = {
|
|
x1: 5,
|
|
x2: 45,
|
|
y1: 5,
|
|
y2: 45
|
|
};
|
|
var imported = paper.project.importSVG(createSVG('line', attrs));
|
|
var path = new Path.Line([attrs.x1, attrs.y1], [attrs.x2, attrs.y2]);
|
|
equals(imported, path);
|
|
});
|
|
|
|
test('Import SVG rect', function() {
|
|
var attrs = {
|
|
x: 25,
|
|
y: 25,
|
|
width: 100,
|
|
height: 100
|
|
};
|
|
var imported = paper.project.importSVG(createSVG('rect', attrs),
|
|
{ expandShapes: true });
|
|
var path = new Path.Rectangle(attrs);
|
|
equals(imported, path);
|
|
});
|
|
|
|
test('Import SVG round rect', function() {
|
|
var attrs = {
|
|
x: 25,
|
|
y: 25,
|
|
rx: 50,
|
|
ry: 50,
|
|
width: 100,
|
|
height: 100
|
|
};
|
|
var imported = paper.project.importSVG(createSVG('rect', attrs),
|
|
{ expandShapes: true });
|
|
var path = new Path.Rectangle(new Rectangle(attrs),
|
|
new Size(attrs.rx, attrs.ry));
|
|
equals(imported, path);
|
|
});
|
|
|
|
test('Import SVG ellipse', function() {
|
|
var attrs = {
|
|
cx: 300,
|
|
cy: 80,
|
|
rx: 100,
|
|
ry: 50
|
|
};
|
|
var imported = paper.project.importSVG(createSVG('ellipse', attrs),
|
|
{ expandShapes: true });
|
|
var path = new Path.Ellipse({
|
|
center: new Point(attrs.cx, attrs.cy),
|
|
radius: new Point(attrs.rx, attrs.ry)
|
|
});
|
|
equals(imported, path);
|
|
});
|
|
|
|
test('Import SVG circle', function() {
|
|
var attrs = {
|
|
cx: 100,
|
|
cy: 80,
|
|
r: 50
|
|
};
|
|
var imported = paper.project.importSVG(createSVG('circle', attrs),
|
|
{ expandShapes: true });
|
|
var path = new Path.Circle({
|
|
center: new Point(attrs.cx, attrs.cy),
|
|
radius: attrs.r
|
|
});
|
|
equals(imported, path);
|
|
});
|
|
|
|
function createPolyPath(str) {
|
|
var points = str.split(' ').map(function(point) {
|
|
return point.split(',').map(parseFloat);
|
|
});
|
|
var path = new Path();
|
|
path.moveTo(points[0]);
|
|
for (var i = 1; i < points.length; i++)
|
|
path.lineTo(points[i]);
|
|
return path;
|
|
}
|
|
|
|
test('Import SVG polygon', function() {
|
|
var points = '100,10 40,180 190,60 10,60 160,180';
|
|
var imported = paper.project.importSVG(createSVG('polygon', {
|
|
points: points
|
|
}));
|
|
var path = createPolyPath(points);
|
|
path.closePath();
|
|
equals(imported, path);
|
|
});
|
|
|
|
test('Import SVG polyline', function() {
|
|
var points = '5,5 45,45 5,45 45,5';
|
|
var imported = paper.project.importSVG(createSVG('polyline', {
|
|
points: points
|
|
}));
|
|
var path = createPolyPath(points);
|
|
equals(imported, path);
|
|
});
|
|
|
|
test('Import SVG Image', function(assert) {
|
|
var done = assert.async();
|
|
var svg = '<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image style="overflow:visible;enable-background:new ;" width="300" height="67" id="e0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" transform="matrix(0.2149 0 0 0.2149 304.7706 197.8176)"></image></svg>';
|
|
var imported = paper.project.importSVG(svg);
|
|
var raster = imported.children[0];
|
|
raster.on('load', function() {
|
|
equals(raster.matrix, new Matrix(0.2149, 0, 0, 0.2149, 337.0056, 205.01675));
|
|
done();
|
|
});
|
|
});
|
|
|
|
test('Import complex CompoundPath and clone', function() {
|
|
var svg = '<svg xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M4,14h20v-2H4V14z M15,26h7v-2h-7V26z M15,22h9v-2h-9V22z M15,18h9v-2h-9V18z M4,26h9V16H4V26z M28,10V6H0v22c0,0,0,4,4,4 h25c0,0,3-0.062,3-4V10H28z M4,30c-2,0-2-2-2-2V8h24v20c0,0.921,0.284,1.558,0.676,2H4z"/></svg>';
|
|
var item = paper.project.importSVG(svg);
|
|
equals(item.clone(), item, null, { cloned: true });
|
|
});
|
|
|
|
test('Import SVG without insertion', function() {
|
|
var svg = createSVG('path', { d: '' });
|
|
var imported = paper.project.importSVG(svg, { insert: true });
|
|
equals(function() {
|
|
return imported.parent === project.activeLayer;
|
|
}, true);
|
|
var imported = paper.project.importSVG(svg, { insert: false });
|
|
equals(function() {
|
|
return imported.parent === null;
|
|
}, true);
|
|
});
|
|
|
|
test('Import SVG switch', function(assert) {
|
|
var done = assert.async();
|
|
var svg = '<svg xmlns="http://www.w3.org/2000/svg"><switch><line x1="0" x2="10" y1="0" y2="10" fill="none"></line></switch></svg>';
|
|
paper.project.importSVG(svg, {
|
|
onLoad: function(item) {
|
|
equals(item.className, 'Group');
|
|
equals(item.children.length, 1);
|
|
equals(item.firstChild.className, 'Group');
|
|
equals(item.firstChild.children.length, 1);
|
|
equals(item.firstChild.firstChild, new Path([new Point(0, 0), new Point(10, 10)]));
|
|
done();
|
|
}
|
|
});
|
|
});
|
|
|
|
test('Import SVG string with leading line-breaks', function() {
|
|
var svg = '\n<svg xmlns="http://www.w3.org/2000/svg">\n <rect fill="red" width="100" height="100"/>\n</svg>\n'
|
|
var imported = paper.project.importSVG(svg);
|
|
equals(imported.children.length, 1);
|
|
equals(imported.firstChild, new Shape.Rectangle({
|
|
size: [100, 100],
|
|
fillColor: 'red'
|
|
}));
|
|
});
|
|
|
|
test('Import SVG with numeric ID', function() {
|
|
paper.project.importSVG(createSVG('circle', {
|
|
cx: 100,
|
|
cy: 100,
|
|
r: 50,
|
|
id: '1'
|
|
}));
|
|
ok(true, 'Imports SVG with a numeric element ID without throwing.');
|
|
});
|
|
|
|
function importSVG(assert, url, message, options) {
|
|
var done = assert.async();
|
|
project.importSVG(url, {
|
|
applyMatrix: false,
|
|
|
|
onLoad: function(item, svg) {
|
|
if (!message) {
|
|
message = 'The imported SVG "' + url + '" should visually be '
|
|
+ 'the same as the rasterized original SVG data.';
|
|
}
|
|
compareSVG(done, item, svg, message, options);
|
|
},
|
|
|
|
onError: function(error) {
|
|
var ok = !!(options && options.expectError);
|
|
QUnit.push(ok, false, !ok, ok && message
|
|
|| 'Loading SVG from a valid URL should not give an error: ' +
|
|
error);
|
|
done();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!isNodeContext) {
|
|
// JSDom does not have SVG rendering, so we can't test there.
|
|
var svgFiles = {
|
|
'butterfly': { tolerance: 1e-2 },
|
|
'viewbox': { tolerance: 1e-2 },
|
|
'clipping': {},
|
|
'arcs': {},
|
|
'symbol': {},
|
|
'symbols': {},
|
|
'blendModes': {},
|
|
'gradients-1': {},
|
|
'gradients-2': !isPhantomContext && {},
|
|
'gradients-3': {},
|
|
'gradients-4': {}
|
|
};
|
|
Base.each(svgFiles, function(options, name) {
|
|
if (options) {
|
|
name += '.svg';
|
|
test('Import ' + name, function(assert) {
|
|
importSVG(assert, 'assets/' + name, null, options);
|
|
});
|
|
}
|
|
});
|
|
|
|
test('Import inexistent file', function(assert) {
|
|
importSVG(assert, 'assets/inexistent.svg',
|
|
'Load an inexistent SVG file should trigger an error',
|
|
{ expectError: true });
|
|
});
|
|
}
|