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

Remove separate point, handleIn and handleOut arrays and just use segments instead.

Browse source
This commit is contained in:
Jürg Lehni 2012-11-05 19:44:23 -08:00
parent 4c93ce546a
commit a0a04a0bc1
1 changed files with 65 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
src/svg/SvgExporter.js
View file

@ -50,10 +50,7 @@ var SvgExporter = this.SvgExporter = new function() {
function exportItem(path) { function exportItem(path) {
var svg; var svg;
//Getting all of the segments(a point, a HandleIn and a HandleOut) in the path //Getting all of the segments(a point, a HandleIn and a HandleOut) in the path
var segArray; var segments;
var pointArray;
var handleInArray;
var handleOutArray;
var type; var type;
//finding the type of path to export //finding the type of path to export
if (path.content) { if (path.content) {
@ -61,22 +58,14 @@ var SvgExporter = this.SvgExporter = new function() {
} else { } else {
//Values are only defined if the path is not text because //Values are only defined if the path is not text because
// text does not have these values // text does not have these values
segArray = path.getSegments(); segments = path.getSegments();
pointArray = []; type = determineType(path, segments);
handleInArray = [];
handleOutArray = [];
for (var i = 0; i < segArray.length; i++) {
pointArray[i] = segArray[i].getPoint();
handleInArray[i] = segArray[i].getHandleIn();
handleOutArray[i] = segArray[i].getHandleOut();
}
type = determineType(path, segArray, pointArray, handleInArray, handleOutArray);
} }
//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 = pointArray[0].getDistance(pointArray[3]); var width = segments[0]._point.getDistance(segments[3]._point);
var height = pointArray[0].getDistance(pointArray[1]); var height = segments[0]._point.getDistance(segments[1]._point);
svg = createElement('rect'); svg = createElement('rect');
svg.setAttribute('x', path.bounds.topLeft.getX()); svg.setAttribute('x', path.bounds.topLeft.getX());
svg.setAttribute('y', path.bounds.topLeft.getY()); svg.setAttribute('y', path.bounds.topLeft.getY());
@ -85,17 +74,17 @@ var SvgExporter = this.SvgExporter = new function() {
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
var dx1 = pointArray[1].getDistance(pointArray[6]); var dx1 = segments[1]._point.getDistance(segments[6]._point);
var dx2 = pointArray[0].getDistance(pointArray[7]); var dx2 = segments[0]._point.getDistance(segments[7]._point);
var dx3 = (dx1 - dx2) / 2; var dx3 = (dx1 - dx2) / 2;
var dy1 = pointArray[0].getDistance(pointArray[3]); var dy1 = segments[0]._point.getDistance(segments[3]._point);
var dy2 = pointArray[1].getDistance(pointArray[2]); var dy2 = segments[1]._point.getDistance(segments[2]._point);
var dy3 = (dy1 - dy2) / 2; var dy3 = (dy1 - dy2) / 2;
var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].getY() - dy3)); var point = new Point((segments[3]._point.getX() - dx3), (segments[2]._point.getY() - dy3));
var width = Math.round(dx1); var width = Math.round(dx1);
var height = Math.round(dy1); var height = Math.round(dy1);
var rx = pointArray[3].getX() - point.x; var rx = segments[3]._point.getX() - point.x;
var ry = pointArray[2].getY() - point.y; var ry = segments[2]._point.getY() - point.y;
svg = createElement('rect'); svg = createElement('rect');
svg.setAttribute('x', path.bounds.topLeft.getX()); svg.setAttribute('x', path.bounds.topLeft.getX());
svg.setAttribute('y', path.bounds.topLeft.getY()); svg.setAttribute('y', path.bounds.topLeft.getY());
@ -106,22 +95,22 @@ var SvgExporter = this.SvgExporter = new function() {
break; break;
case'line': case'line':
svg = createElement('line'); svg = createElement('line');
svg.setAttribute('x1', pointArray[0].getX()); svg.setAttribute('x1', segments[0]._point.getX());
svg.setAttribute('y1', pointArray[0].getY()); svg.setAttribute('y1', segments[0]._point.getY());
svg.setAttribute('x2', pointArray[pointArray.length - 1].getX()); svg.setAttribute('x2', segments[segments.length - 1]._point.getX());
svg.setAttribute('y2', pointArray[pointArray.length - 1].getY()); svg.setAttribute('y2', segments[segments.length - 1]._point.getY());
break; break;
case 'circle': case 'circle':
svg = createElement('circle'); svg = createElement('circle');
var radius = (pointArray[0].getDistance(pointArray[2])) /2; var radius = (segments[0]._point.getDistance(segments[2]._point)) /2;
svg.setAttribute('cx', path.bounds.center.x); svg.setAttribute('cx', path.bounds.center.x);
svg.setAttribute('cy', path.bounds.center.y); svg.setAttribute('cy', path.bounds.center.y);
svg.setAttribute('r', radius); svg.setAttribute('r', radius);
break; break;
case 'ellipse': case 'ellipse':
svg = createElement('ellipse'); svg = createElement('ellipse');
var radiusX = pointArray[2].getDistance(pointArray[0]) / 2; var radiusX = segments[2]._point.getDistance(segments[0]._point) / 2;
var radiusY = pointArray[3].getDistance(pointArray[1]) /2; var radiusY = segments[3]._point.getDistance(segments[1]._point) /2;
svg.setAttribute('cx', path.bounds.center.x); svg.setAttribute('cx', path.bounds.center.x);
svg.setAttribute('cy', path.bounds.center.y); svg.setAttribute('cy', path.bounds.center.y);
svg.setAttribute('rx', radiusX); svg.setAttribute('rx', radiusX);
@ -130,16 +119,16 @@ var SvgExporter = this.SvgExporter = new function() {
case 'polyline': case 'polyline':
svg = createElement('polyline'); svg = createElement('polyline');
var pointString = ''; var pointString = '';
for(var i = 0; i < pointArray.length; i++) { for(var i = 0; i < segments.length; i++) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; pointString += segments[i]._point.getX() + ',' + segments[i]._point.getY() + ' ';
} }
svg.setAttribute('points', pointString); svg.setAttribute('points', pointString);
break; break;
case 'polygon': case 'polygon':
svg = createElement('polygon'); svg = createElement('polygon');
var pointString = ''; var pointString = '';
for(i = 0; i < pointArray.length; i++) { for(i = 0; i < segments.length; i++) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; pointString += segments[i]._point.getX() + ',' + segments[i]._point.getY() + ' ';
} }
svg.setAttribute('points', pointString); svg.setAttribute('points', pointString);
break; break;
@ -156,7 +145,7 @@ var SvgExporter = this.SvgExporter = new function() {
svg.textContent = path.getContent(); svg.textContent = path.getContent();
break; break;
default: default:
svg = pathSetup(path, pointArray, handleInArray, handleOutArray); svg = pathSetup(path, segments);
break; break;
} }
//If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle //If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle
@ -164,12 +153,12 @@ var SvgExporter = this.SvgExporter = new function() {
if (type != 'text' && type != undefined && type != 'polygon' && type != 'polyline' && type != 'line') { if (type != 'text' && type != undefined && type != 'polygon' && type != 'polyline' && type != 'line') {
//TODO: Need to implement exported transforms for circle, ellipse, and rectangles instead of //TODO: Need to implement exported transforms for circle, ellipse, and rectangles instead of
//making them paths //making them paths
var angle = determineIfTransformed(path, pointArray, type) + 90; var angle = determineIfTransformed(path, segments, type) + 90;
if (angle != 0) { if (angle != 0) {
if (type == 'rect' || type == 'roundrect') { if (type == 'rect' || type == 'roundrect') {
svg = pathSetup(path, pointArray, handleInArray, handleOutArray); svg = pathSetup(path, segments);
} else { } else {
svg = pathSetup(path, pointArray, handleInArray, handleOutArray); svg = pathSetup(path, segments);
} }
} }
} }
@ -191,7 +180,7 @@ 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, pointArray, type) { function determineIfTransformed(path, segments, type) {
var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2; var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2;
var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2; var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2;
var topMidBound = new Point(topMidBoundx, topMidBoundy); var topMidBound = new Point(topMidBoundx, topMidBoundy);
@ -201,19 +190,19 @@ var SvgExporter = this.SvgExporter = new function() {
var topMidPath; var topMidPath;
switch (type) { switch (type) {
case 'rect': case 'rect':
topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2; topMidPathx = (segments[1]._point.getX() + segments[2]._point.getX() )/2;
topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2; topMidPathy = (segments[1]._point.getY() + segments[2]._point.getY() )/2;
topMidPath = new Point(topMidPathx, topMidPathy); topMidPath = new Point(topMidPathx, topMidPathy);
break; break;
case 'ellipse': case 'ellipse':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); topMidPath = new Point(segments[1]._point.getX(), segments[1]._point.getY());
break; break;
case 'circle': case 'circle':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); topMidPath = new Point(segments[1]._point.getX(), segments[1]._point.getY());
break; break;
case 'roundrect': case 'roundrect':
topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2; topMidPathx = (segments[3]._point.getX() + segments[4]._point.getX())/2;
topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2; topMidPathy = (segments[3]._point.getY() + segments[4]._point.getY())/2;
topMidPath = new Point(topMidPathx, topMidPathy); topMidPath = new Point(topMidPathx, topMidPathy);
break; break;
default: default:
@ -226,20 +215,20 @@ var SvgExporter = this.SvgExporter = new function() {
return angleInDegrees; return angleInDegrees;
} }
function pathSetup(path, pointArray, hIArray, hOArray) { function pathSetup(path, segments) {
var svgPath = createElement('path'); var svgPath = createElement('path');
var pointString = ''; var pointString = '';
// pointstring is formatted in the way the SVG XML will be reading. // pointstring is formatted in the way the SVG XML will be reading.
// Namely, a point and the way to traverse to that point. // Namely, a point and the way to traverse to that point.
pointString += 'M' + pointArray[0].getX() + ',' + pointArray[0].getY() + ' '; pointString += 'M' + segments[0]._point.getX() + ',' + segments[0]._point.getY() + ' ';
//Checks 2 points and the angles in between the 2 points //Checks 2 points and the angles in between the 2 points
for (i = 0; i < pointArray.length-1; i++) { for (i = 0; i < segments.length-1; i++) {
var x1 = pointArray[i].getX(), var x1 = segments[i]._point.getX(),
y1 = pointArray[i].getY(), y1 = segments[i]._point.getY(),
x2 = pointArray[i + 1].getX(), x2 = segments[i + 1]._point.getX(),
y2 = pointArray[i + 1].getY(), y2 = segments[i + 1]._point.getY(),
handleOut1 = hOArray[i], handleOut1 = segments[i]._handleOut,
handleIn2 = hIArray[i+1]; handleIn2 = segments[i+1]._handleIn;
if (handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() == 0) { if (handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() == 0) {
// L is lineto, moving to a point with drawing // L is lineto, moving to a point with drawing
pointString+= 'L' + x2 + ',' + y2 + ' '; pointString+= 'L' + x2 + ',' + y2 + ' ';
@ -250,14 +239,14 @@ var SvgExporter = this.SvgExporter = new function() {
pointString += (x2 - x1) + ',' + (y2 - y1) + ' '; pointString += (x2 - x1) + ',' + (y2 - y1) + ' ';
} }
} }
if (!hOArray[hOArray.length - 1].equals([0, 0]) && !hIArray[0].equals([0, 0])) { if (!segments[segments.length - 1]._handleOut.equals([0, 0]) && !segments[0]._handleIn.equals([0, 0])) {
var handleOut1 = hOArray[hOArray.length - 1], var handleOut1 = segments[segments.length - 1]._handleOut,
handleIn2 = hIArray[0], handleIn2 = segments[0]._handleIn,
// Bezier curve from last point to first // Bezier curve from last point to first
x1 = pointArray[pointArray.length - 1].getX(), x1 = segments[segments.length - 1]._point.getX(),
y1 = pointArray[pointArray.length - 1].getY(), y1 = segments[segments.length - 1]._point.getY(),
x2 = pointArray[0].getX(), x2 = segments[0]._point.getX(),
y2 = pointArray[0].getY(); y2 = segments[0]._point.getY();
pointString += 'c' + (handleOut1.getX()) + ',' + (handleOut1.getY()) + ' '; pointString += 'c' + (handleOut1.getX()) + ',' + (handleOut1.getY()) + ' ';
pointString += (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' '; pointString += (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' ';
pointString += (x2 - x1) + ',' + (y2 - y1) + ' '; pointString += (x2 - x1) + ',' + (y2 - y1) + ' ';
@ -273,7 +262,7 @@ var SvgExporter = this.SvgExporter = new function() {
/** /**
* Checks the type SVG object created by converting from Paper.js * Checks the type SVG object created by converting from Paper.js
*/ */
function determineType(path, segArray, pointArray, handleInArray, handleOutArray) { function determineType(path, segments) {
var type; var type;
var dPoint12; var dPoint12;
var dPoint34; var dPoint34;
@ -281,15 +270,15 @@ var SvgExporter = this.SvgExporter = new function() {
// between straight objects (line, polyline, rect, and polygon) and // between straight objects (line, polyline, rect, and polygon) and
// objects with curves(circle, ellipse, roundedRectangle). // objects with curves(circle, ellipse, roundedRectangle).
if (path.isPolygon()) { if (path.isPolygon()) {
if (segArray.length == 4) { if (segments.length == 4) {
// If the distance between (point0 and point1) and (point2 and // If the distance between (point0 and point1) and (point2 and
// point3) are equal, then it is a rectangle // point3) are equal, then it is a rectangle
dPoint12 = Math.round(pointArray[0].getDistance(pointArray[1])); dPoint12 = Math.round(segments[0]._point.getDistance(segments[1]._point));
dPoint34 = Math.round(pointArray[3].getDistance(pointArray[2])); dPoint34 = Math.round(segments[3]._point.getDistance(segments[2]._point));
if (dPoint12 == dPoint34) { if (dPoint12 == dPoint34) {
type = 'rect'; type = 'rect';
} }
} else if (segArray.length >= 3) { } else if (segments.length >= 3) {
//If it is an object with more than 3 segments and the path is closed, it is a polygon //If it is an object with more than 3 segments and the path is closed, it is a polygon
if (path.getClosed()) { if (path.getClosed()) {
type = 'polygon'; type = 'polygon';
@ -301,22 +290,22 @@ var SvgExporter = this.SvgExporter = new function() {
type = 'line'; type = 'line';
} }
} else { } else {
if (segArray.length == 8) { if (segments.length == 8) {
// If the distance between (point0 and point3) and (point7 and // If the distance between (point0 and point3) and (point7 and
// point4) are equal then it is a roundedRectangle // point4) are equal then it is a roundedRectangle
dPoint12 = Math.round(pointArray[0].getDistance(pointArray[3])); dPoint12 = Math.round(segments[0]._point.getDistance(segments[3]._point));
dPoint34 = Math.round(pointArray[7].getDistance(pointArray[4])); dPoint34 = Math.round(segments[7]._point.getDistance(segments[4]._point));
if (dPoint12 == dPoint34) { if (dPoint12 == dPoint34) {
type = 'roundrect'; type = 'roundrect';
} }
} else if (segArray.length == 4) { } else if (segments.length == 4) {
// Check if the values of the point have values similar to // Check if the values of the point have values similar to
// circles and ellipses. // circles and ellipses.
var checkPointValues = true; var checkPointValues = true;
for (i = 0; i < pointArray.length && checkPointValues; i++) { for (i = 0; i < segments.length && checkPointValues; i++) {
if (handleInArray[i].getX() != 0 || handleInArray[i].getY() != 0 if (segments[i]._handleIn.getX() != 0 || segments[i]._handleIn.getY() != 0
&& Math.round(Math.abs(handleInArray[i].getX())) === Math.round(Math.abs(handleOutArray[i].getX())) && Math.round(Math.abs(segments[i]._handleIn.getX())) === Math.round(Math.abs(segments[i]._handleOut.getX()))
&& Math.round(Math.abs(handleInArray[i].getY())) === Math.round(Math.abs(handleOutArray[i].getY()))) { && Math.round(Math.abs(segments[i]._handleIn.getY())) === Math.round(Math.abs(segments[i]._handleOut.getY()))) {
checkPointValues = true; checkPointValues = true;
} else { } else {
checkPointValues = false; checkPointValues = false;
@ -325,8 +314,8 @@ var SvgExporter = this.SvgExporter = new function() {
if (checkPointValues) { if (checkPointValues) {
// If the distance between (point0 and point2) and (point1 // If the distance between (point0 and point2) and (point1
// and point3) are equal, then it is a circle // and point3) are equal, then it is a circle
var d1 = Math.round(pointArray[0].getDistance(pointArray[2])); var d1 = Math.round(segments[0]._point.getDistance(segments[2]._point));
var d2 = Math.round(pointArray[1].getDistance(pointArray[3])); var d2 = Math.round(segments[1]._point.getDistance(segments[3]._point));
if (d1 == d2) { if (d1 == d2) {
type = 'circle'; type = 'circle';
} else { } else {