/* * Paper.js - The Swiss Army Knife of Vector Graphics Scripting. * http://paperjs.org/ * * Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey * http://scratchdisk.com/ & http://jonathanpuckey.com/ * * 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 complex CompoundPath and clone', function() { var svg = createSVG(''); var item = paper.project.importSVG(svg); equals(item.clone(), item, null, { cloned: true }); }); if (!isNode) { test('Import SVG clipping', function(assert) { importSVG(assert, 'assets/clipping.svg', 'The imported SVG item should visually be the same as the rasterized original SVG data.'); }); } function importSVG(assert, url, message, options) { var done = assert.async(); project.importSVG(url, { onLoad: function(item, svg) { compareSVG(done, item, svg, message, options); }, onError: function(error) { // TODO: Implement in SvgImport first! pushFailure('Loading SVG from a valid URL should not give an error.'); done(); } }); } function compareSVG(done, actual, expected, message, options) { function getItem(item) { return item instanceof Item ? item : typeof item === 'string' ? new Raster('data:image/svg+xml;base64,' + btoa(item)) : null; } actual = getItem(actual); expected = getItem(expected); actual.position = expected.position; if (typeof actual === 'function') { if (!message) message = getFunctionMessage(actual); actual = actual(); } expected.onLoad = function() { comparePixels(actual, expected, message, Base.set({ tolerance: 1e-2, resolution: 72 }, options)); done(); }; }