From ad76e651196807471b09af188ba79e11bd17d7ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 5 Nov 2012 23:27:02 -0800 Subject: [PATCH] Further optimise determination of rotation and start implementing rotating of primitives. --- src/svg/SvgExporter.js | 77 +++++++++++++++++++++++------------------- 1 file changed, 43 insertions(+), 34 deletions(-) diff --git a/src/svg/SvgExporter.js b/src/svg/SvgExporter.js index 1d2fbe43..5f7bcec5 100644 --- a/src/svg/SvgExporter.js +++ b/src/svg/SvgExporter.js @@ -71,40 +71,35 @@ var SvgExporter = this.SvgExporter = new function() { function exportPath(path) { var segments = path._segments, type = determineType(path, segments), - topCenter; + attrs; // If the object is a circle, ellipse, rectangle, or rounded rectangle, // see if they are placed at an angle. - switch (type) { - case 'rect': - topCenter = segments[1]._point.add(segments[2]._point).divide(2); - break; - case 'roundrect': - topCenter = segments[3]._point.add(segments[4]._point).divide(2); - break; - case 'circle': - case 'ellipse': - topCenter = segments[1]._point; - break; - } + var angle = 0, + topCenter = type === 'rect' + ? segments[1]._point.add(segments[2]._point).divide(2) + : type === 'roundrect' + ? segments[3]._point.add(segments[4]._point).divide(2) + : type === 'circle' || type === 'ellipse' + ? segments[1]._point + : null; if (topCenter) { - var angle = topCenter.subtract(path.getPosition()).getAngle() + 90; - if (!Numerical.isZero(angle)) { - // TODO: Need to implement exported transforms for circle, - // ellipse and rectangles instead of making them paths. - return pathSetup(path, segments); - } + angle = topCenter.subtract(path.getPosition()).getAngle() + 90; + if (Numerical.isZero(angle)) + angle = 0; } switch (type) { case 'rect': var width = getDistance(segments, 0, 3), height = getDistance(segments, 0, 1), - point = path.getBounds().getTopLeft(); - return createElement('rect', { - x: point._x, - y: point._y, + // Counter-compensate the rotation angle + point = segments[1]._point.rotate(-angle, path.getPosition()); + attrs = { + x: point.x, + y: point.y, width: width, height: height - }); + }; + break; case 'roundrect': // d-variables and point are used to determine the rounded corners // for the rounded rectangle @@ -118,41 +113,45 @@ var SvgExporter = this.SvgExporter = new function() { point = new Point((segments[3]._point._x - dx3), (segments[2]._point._y - dy3)), rx = segments[3]._point._x - point.x, ry = segments[2]._point._y - point.y; - return createElement('rect', { + attrs = { x: point._x, y: point._y, width: width, height: height, rx: rx, ry: ry - }); + }; + break; case'line': var first = segments[0]._point, last = segments[segments.length - 1]._point; - return createElement('line', { + attrs = { x1: first._x, y1: first._y, x2: last._x, y2: last._y - }); + }; + break; case 'circle': var radius = getDistance(segments, 0, 2) / 2, center = path.getPosition(); - return createElement('circle', { + attrs = { cx: center._x, cy: center._y, r: radius - }); + }; + break; case 'ellipse': var rx = getDistance(segments, 2, 0) / 2, ry = getDistance(segments, 3, 1) / 2, center = path.getPosition(); - return createElement('ellipse', { + attrs = { cx: center._x, cy: center._y, rx: rx, ry: ry - }); + }; + break; case 'polyline': case 'polygon': var parts = []; @@ -160,9 +159,19 @@ var SvgExporter = this.SvgExporter = new function() { var point = segments[i]._point; parts.push(point._x + ',' + point._y); } - return createElement(type, { + attrs = { points: parts.join(' ') - }); + }; + break; + } + if (attrs) { + var svg = createElement(type, attrs), + center = path.getPosition(); + if (angle) { + svg.setAttribute('transform', 'rotate(' + angle + ',' + + center._x + ',' + center._y + ')'); + } + return svg; } return pathSetup(path, segments); }