scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-08 05:42:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

More SvgExporter simplifications.

Browse source
This commit is contained in:
Jürg Lehni 2012-11-05 20:31:45 -08:00
parent 5a061da4e3
commit f576ca3e9e
1 changed files with 69 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
src/svg/SvgExporter.js
View file

@ -25,13 +25,15 @@
var SvgExporter = this.SvgExporter = new function() { var SvgExporter = this.SvgExporter = new function() {
function createElement(tag) {
return document.createElementNS('http://www.w3.org/2000/svg', tag);
}
function setAttributes(svg, attrs) { function setAttributes(svg, attrs) {
for (var key in attrs) for (var key in attrs)
svg.setAttribute(key, attrs[key]); svg.setAttribute(key, attrs[key]);
return svg;
}
function createElement(tag, attrs) {
return setAttributes(
document.createElementNS('http://www.w3.org/2000/svg', tag), attrs);
} }
function exportGroup(group) { function exportGroup(group) {
@ -69,13 +71,15 @@ var SvgExporter = this.SvgExporter = new function() {
//switch statement that determines what type of SVG element to add to the SVG Object //switch statement that determines what type of SVG element to add to the SVG Object
switch (type) { switch (type) {
case 'rect': case 'rect':
var width = getDistance(segments, 0, 3); var width = getDistance(segments, 0, 3),
var height = getDistance(segments, 0, 1); height = getDistance(segments, 0, 1),
svg = createElement('rect'); point = path.getBounds().getTopLeft();
svg.setAttribute('x', path.bounds.topLeft._x); svg = createElement('rect', {
svg.setAttribute('y', path.bounds.topLeft._y); x: point._x,
svg.setAttribute('width', width); y: point._y,
svg.setAttribute('height', height); width: width,
height: height
});
break; break;
case 'roundrect': case 'roundrect':
//d variables and point are used to determine the rounded corners for the rounded rectangle //d variables and point are used to determine the rounded corners for the rounded rectangle
@ -90,56 +94,68 @@ var SvgExporter = this.SvgExporter = new function() {
var height = Math.round(dy1); var height = Math.round(dy1);
var rx = segments[3]._point._x - point.x; var rx = segments[3]._point._x - point.x;
var ry = segments[2]._point._y - point.y; var ry = segments[2]._point._y - point.y;
svg = createElement('rect'); svg = createElement('rect', {
svg.setAttribute('x', path.bounds.topLeft._x); x: path.bounds.topLeft._x,
svg.setAttribute('y', path.bounds.topLeft._y); y: path.bounds.topLeft._y,
svg.setAttribute('rx', rx); rx: rx,
svg.setAttribute('ry', ry); ry: ry,
svg.setAttribute('width', width); width: width,
svg.setAttribute('height', height); height: height
});
break; break;
case'line': case'line':
svg = createElement('line'); var first = segments[0]._point,
svg.setAttribute('x1', segments[0]._point._x); last = segments[segments.length - 1]._point;
svg.setAttribute('y1', segments[0]._point._y); svg = createElement('line', {
svg.setAttribute('x2', segments[segments.length - 1]._point._x); x1: first._x,
svg.setAttribute('y2', segments[segments.length - 1]._point._y); y1: first._y,
x2: last._x,
y2: last._y
});
break; break;
case 'circle': case 'circle':
svg = createElement('circle'); var radius = getDistance(segments, 0, 2) / 2,
var radius = (getDistance(segments, 0, 2)) /2; center = path.getPosition();
svg.setAttribute('cx', path.bounds.center.x); svg = createElement('circle', {
svg.setAttribute('cy', path.bounds.center.y); cx: center._x,
svg.setAttribute('r', radius); cy: center._y,
r: radius
});
break; break;
case 'ellipse': case 'ellipse':
svg = createElement('ellipse'); var radiusX = getDistance(segments, 2, 0) / 2,
var radiusX = getDistance(segments, 2, 0) / 2; radiusY = getDistance(segments, 3, 1) / 2,
var radiusY = getDistance(segments, 3, 1) /2; center = path.getPosition();
svg.setAttribute('cx', path.bounds.center.x); svg = createElement('ellipse', {
svg.setAttribute('cy', path.bounds.center.y); cx: center._x,
svg.setAttribute('rx', radiusX); cy: center._y,
svg.setAttribute('ry', radiusY); rx: radiusX,
ry: radiusY
});
break; break;
case 'polyline': case 'polyline':
case 'polygon': case 'polygon':
svg = createElement(type);
var parts = []; var parts = [];
for(i = 0; i < segments.length; i++) { for(i = 0; i < segments.length; i++) {
parts.push(segments[i]._point._x + ',' + segments[i]._point._y); var point = segments[i]._point;
parts.push(point._x + ',' + point._y);
} }
svg.setAttribute('points', parts.join(' ')); svg = createElement(type, {
points: parts.join(' ')
});
break; break;
case 'text': case 'text':
svg = createElement('text'); var point = path.getPoint(),
svg.setAttribute('x', path.getPoint()._x); attrs = {
svg.setAttribute('y', path.getPoint()._y); x: point._x,
if (path.characterStyle.font != undefined) { y: point._y
svg.setAttribute('font-family', path.characterStyle.font); },
} style = path.characterStyle;
if (path.characterStyle.fontSize != undefined) { if (style._font != null)
svg.setAttribute('font-size',path.characterStyle.fontSize); attrs['font-family'] = style._font;
} if (style._fontSize != null)
attrs['font-size'] = style._fontSize;
svg = createElement('text', attrs);
svg.textContent = path.getContent(); svg.textContent = path.getContent();
break; break;
default: default:
@ -179,38 +195,21 @@ var SvgExporter = this.SvgExporter = new function() {
// Determines whether the object has been transformed or not through finding the angle // Determines whether the object has been transformed or not through finding the angle
function determineIfTransformed(path, segments, type) { function determineIfTransformed(path, segments, type) {
var topMidBoundx = (path.bounds.topRight._x + path.bounds.topLeft._x) / 2;
var topMidBoundy = (path.bounds.topRight._y + path.bounds.topLeft._y) / 2;
var topMidBound = new Point(topMidBoundx, topMidBoundy);
var centerPoint = path.getPosition(); var centerPoint = path.getPosition();
var topMidPathx; var topMidPath = centerPoint;
var topMidPathy;
var topMidPath;
switch (type) { switch (type) {
case 'rect': case 'rect':
topMidPathx = (segments[1]._point._x + segments[2]._point._x) / 2; topMidPath = segments[1]._point.add(segments[2]._point).divide(2);
topMidPathy = (segments[1]._point._y + segments[2]._point._y) / 2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
case 'ellipse':
topMidPath = new Point(segments[1]._point._x, segments[1]._point._y);
break; break;
case 'circle': case 'circle':
topMidPath = new Point(segments[1]._point._x, segments[1]._point._y); case 'ellipse':
topMidPath = segments[1]._point;
break; break;
case 'roundrect': case 'roundrect':
topMidPathx = (segments[3]._point._x + segments[4]._point._x) / 2; topMidPath = segments[3]._point.add(segments[4]._point).divide(2);
topMidPathy = (segments[3]._point._y + segments[4]._point._y) / 2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
default:
//Nothing happens here
break; break;
} }
var deltaY = topMidPath.y - centerPoint._y; return topMidPath.subtract(centerPoint).getAngle();
var deltaX = topMidPath.x - centerPoint._x;
var angleInDegrees = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
return angleInDegrees;
} }
function pathSetup(path, segments) { function pathSetup(path, segments) {