From ed04f4652c2828e5dce7dc6b6997bd67ee51ff3b Mon Sep 17 00:00:00 2001 From: DD <liudi08@gmail.com> Date: Wed, 24 Jan 2018 19:40:19 -0500 Subject: [PATCH] Fix point rotation point is relative to, which is not viewBox upper left --- src/containers/paper-canvas.jsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx index a9f9d60f..742e38db 100644 --- a/src/containers/paper-canvas.jsx +++ b/src/containers/paper-canvas.jsx @@ -98,6 +98,20 @@ class PaperCanvas extends React.Component { svg = svg.replace( '<svg ', '<svg xmlns="http://www.w3.org/2000/svg" '); } + + // Get the origin which the viewBox is defined relative to. During import, Paper will translate + // the viewBox to start at (0, 0), and we need to translate it back for some costumes to render + // correctly. + const parser = new DOMParser(); + const svgDom = parser.parseFromString(svg, 'text/xml'); + const viewBox = svgDom.documentElement.attributes.viewBox ? + svgDom.documentElement.attributes.viewBox.value.match(/\S+/g) : null; + if (viewBox) { + for (let i = 0; i < viewBox.length; i++) { + viewBox[i] = parseFloat(viewBox[i]); + } + } + paper.project.importSVG(svg, { expandShapes: true, onLoad: function (item) { @@ -131,8 +145,12 @@ class PaperCanvas extends React.Component { ensureClockwise(item); if (typeof rotationCenterX !== 'undefined' && typeof rotationCenterY !== 'undefined') { + let rotationPoint = new paper.Point(rotationCenterX, rotationCenterY); + if (viewBox && viewBox.length >= 2 && !isNaN(viewBox[0]) && !isNaN(viewBox[1])) { + rotationPoint = rotationPoint.subtract(viewBox[0], viewBox[1]); + } item.translate(paper.project.view.center - .subtract(rotationCenterX, rotationCenterY)); + .subtract(rotationPoint)); } else { // Center item.translate(paper.project.view.center