mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-05 20:32:00 -05:00
Remove separate point, handleIn and handleOut arrays and just use segments instead.
This commit is contained in:
Jürg Lehni
parent
4c93ce546a
commit
a0a04a0bc1
1 changed files with 65 additions and 76 deletions
|
|
@ -50,10 +50,7 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
function exportItem(path) {
|
||||
var svg;
|
||||
//Getting all of the segments(a point, a HandleIn and a HandleOut) in the path
|
||||
var segArray;
|
||||
var pointArray;
|
||||
var handleInArray;
|
||||
var handleOutArray;
|
||||
var segments;
|
||||
var type;
|
||||
//finding the type of path to export
|
||||
if (path.content) {
|
||||
|
|
@ -61,22 +58,14 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
} else {
|
||||
//Values are only defined if the path is not text because
|
||||
// text does not have these values
|
||||
segArray = path.getSegments();
|
||||
pointArray = [];
|
||||
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);
|
||||
segments = path.getSegments();
|
||||
type = determineType(path, segments);
|
||||
}
|
||||
//switch statement that determines what type of SVG element to add to the SVG Object
|
||||
switch (type) {
|
||||
case 'rect':
|
||||
var width = pointArray[0].getDistance(pointArray[3]);
|
||||
var height = pointArray[0].getDistance(pointArray[1]);
|
||||
var width = segments[0]._point.getDistance(segments[3]._point);
|
||||
var height = segments[0]._point.getDistance(segments[1]._point);
|
||||
svg = createElement('rect');
|
||||
svg.setAttribute('x', path.bounds.topLeft.getX());
|
||||
svg.setAttribute('y', path.bounds.topLeft.getY());
|
||||
|
|
@ -85,17 +74,17 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
break;
|
||||
case 'roundrect':
|
||||
//d variables and point are used to determine the rounded corners for the rounded rectangle
|
||||
var dx1 = pointArray[1].getDistance(pointArray[6]);
|
||||
var dx2 = pointArray[0].getDistance(pointArray[7]);
|
||||
var dx1 = segments[1]._point.getDistance(segments[6]._point);
|
||||
var dx2 = segments[0]._point.getDistance(segments[7]._point);
|
||||
var dx3 = (dx1 - dx2) / 2;
|
||||
var dy1 = pointArray[0].getDistance(pointArray[3]);
|
||||
var dy2 = pointArray[1].getDistance(pointArray[2]);
|
||||
var dy1 = segments[0]._point.getDistance(segments[3]._point);
|
||||
var dy2 = segments[1]._point.getDistance(segments[2]._point);
|
||||
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 height = Math.round(dy1);
|
||||
var rx = pointArray[3].getX() - point.x;
|
||||
var ry = pointArray[2].getY() - point.y;
|
||||
var rx = segments[3]._point.getX() - point.x;
|
||||
var ry = segments[2]._point.getY() - point.y;
|
||||
svg = createElement('rect');
|
||||
svg.setAttribute('x', path.bounds.topLeft.getX());
|
||||
svg.setAttribute('y', path.bounds.topLeft.getY());
|
||||
|
|
@ -106,22 +95,22 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
break;
|
||||
case'line':
|
||||
svg = createElement('line');
|
||||
svg.setAttribute('x1', pointArray[0].getX());
|
||||
svg.setAttribute('y1', pointArray[0].getY());
|
||||
svg.setAttribute('x2', pointArray[pointArray.length - 1].getX());
|
||||
svg.setAttribute('y2', pointArray[pointArray.length - 1].getY());
|
||||
svg.setAttribute('x1', segments[0]._point.getX());
|
||||
svg.setAttribute('y1', segments[0]._point.getY());
|
||||
svg.setAttribute('x2', segments[segments.length - 1]._point.getX());
|
||||
svg.setAttribute('y2', segments[segments.length - 1]._point.getY());
|
||||
break;
|
||||
case '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('cy', path.bounds.center.y);
|
||||
svg.setAttribute('r', radius);
|
||||
break;
|
||||
case 'ellipse':
|
||||
svg = createElement('ellipse');
|
||||
var radiusX = pointArray[2].getDistance(pointArray[0]) / 2;
|
||||
var radiusY = pointArray[3].getDistance(pointArray[1]) /2;
|
||||
var radiusX = segments[2]._point.getDistance(segments[0]._point) / 2;
|
||||
var radiusY = segments[3]._point.getDistance(segments[1]._point) /2;
|
||||
svg.setAttribute('cx', path.bounds.center.x);
|
||||
svg.setAttribute('cy', path.bounds.center.y);
|
||||
svg.setAttribute('rx', radiusX);
|
||||
|
|
@ -130,16 +119,16 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
case 'polyline':
|
||||
svg = createElement('polyline');
|
||||
var pointString = '';
|
||||
for(var i = 0; i < pointArray.length; i++) {
|
||||
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
|
||||
for(var i = 0; i < segments.length; i++) {
|
||||
pointString += segments[i]._point.getX() + ',' + segments[i]._point.getY() + ' ';
|
||||
}
|
||||
svg.setAttribute('points', pointString);
|
||||
break;
|
||||
case 'polygon':
|
||||
svg = createElement('polygon');
|
||||
var pointString = '';
|
||||
for(i = 0; i < pointArray.length; i++) {
|
||||
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
|
||||
for(i = 0; i < segments.length; i++) {
|
||||
pointString += segments[i]._point.getX() + ',' + segments[i]._point.getY() + ' ';
|
||||
}
|
||||
svg.setAttribute('points', pointString);
|
||||
break;
|
||||
|
|
@ -156,7 +145,7 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
svg.textContent = path.getContent();
|
||||
break;
|
||||
default:
|
||||
svg = pathSetup(path, pointArray, handleInArray, handleOutArray);
|
||||
svg = pathSetup(path, segments);
|
||||
break;
|
||||
}
|
||||
//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') {
|
||||
//TODO: Need to implement exported transforms for circle, ellipse, and rectangles instead of
|
||||
//making them paths
|
||||
var angle = determineIfTransformed(path, pointArray, type) + 90;
|
||||
var angle = determineIfTransformed(path, segments, type) + 90;
|
||||
if (angle != 0) {
|
||||
if (type == 'rect' || type == 'roundrect') {
|
||||
svg = pathSetup(path, pointArray, handleInArray, handleOutArray);
|
||||
svg = pathSetup(path, segments);
|
||||
} 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
|
||||
function determineIfTransformed(path, pointArray, type) {
|
||||
function determineIfTransformed(path, segments, type) {
|
||||
var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2;
|
||||
var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2;
|
||||
var topMidBound = new Point(topMidBoundx, topMidBoundy);
|
||||
|
|
@ -201,19 +190,19 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
var topMidPath;
|
||||
switch (type) {
|
||||
case 'rect':
|
||||
topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2;
|
||||
topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2;
|
||||
topMidPathx = (segments[1]._point.getX() + segments[2]._point.getX() )/2;
|
||||
topMidPathy = (segments[1]._point.getY() + segments[2]._point.getY() )/2;
|
||||
topMidPath = new Point(topMidPathx, topMidPathy);
|
||||
break;
|
||||
case 'ellipse':
|
||||
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
|
||||
topMidPath = new Point(segments[1]._point.getX(), segments[1]._point.getY());
|
||||
break;
|
||||
case 'circle':
|
||||
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
|
||||
topMidPath = new Point(segments[1]._point.getX(), segments[1]._point.getY());
|
||||
break;
|
||||
case 'roundrect':
|
||||
topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2;
|
||||
topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2;
|
||||
topMidPathx = (segments[3]._point.getX() + segments[4]._point.getX())/2;
|
||||
topMidPathy = (segments[3]._point.getY() + segments[4]._point.getY())/2;
|
||||
topMidPath = new Point(topMidPathx, topMidPathy);
|
||||
break;
|
||||
default:
|
||||
|
|
@ -226,20 +215,20 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
return angleInDegrees;
|
||||
}
|
||||
|
||||
function pathSetup(path, pointArray, hIArray, hOArray) {
|
||||
function pathSetup(path, segments) {
|
||||
var svgPath = createElement('path');
|
||||
var pointString = '';
|
||||
// pointstring is formatted in the way the SVG XML will be reading.
|
||||
// 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
|
||||
for (i = 0; i < pointArray.length-1; i++) {
|
||||
var x1 = pointArray[i].getX(),
|
||||
y1 = pointArray[i].getY(),
|
||||
x2 = pointArray[i + 1].getX(),
|
||||
y2 = pointArray[i + 1].getY(),
|
||||
handleOut1 = hOArray[i],
|
||||
handleIn2 = hIArray[i+1];
|
||||
for (i = 0; i < segments.length-1; i++) {
|
||||
var x1 = segments[i]._point.getX(),
|
||||
y1 = segments[i]._point.getY(),
|
||||
x2 = segments[i + 1]._point.getX(),
|
||||
y2 = segments[i + 1]._point.getY(),
|
||||
handleOut1 = segments[i]._handleOut,
|
||||
handleIn2 = segments[i+1]._handleIn;
|
||||
if (handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() == 0) {
|
||||
// L is lineto, moving to a point with drawing
|
||||
pointString+= 'L' + x2 + ',' + y2 + ' ';
|
||||
|
|
@ -250,14 +239,14 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
pointString += (x2 - x1) + ',' + (y2 - y1) + ' ';
|
||||
}
|
||||
}
|
||||
if (!hOArray[hOArray.length - 1].equals([0, 0]) && !hIArray[0].equals([0, 0])) {
|
||||
var handleOut1 = hOArray[hOArray.length - 1],
|
||||
handleIn2 = hIArray[0],
|
||||
if (!segments[segments.length - 1]._handleOut.equals([0, 0]) && !segments[0]._handleIn.equals([0, 0])) {
|
||||
var handleOut1 = segments[segments.length - 1]._handleOut,
|
||||
handleIn2 = segments[0]._handleIn,
|
||||
// Bezier curve from last point to first
|
||||
x1 = pointArray[pointArray.length - 1].getX(),
|
||||
y1 = pointArray[pointArray.length - 1].getY(),
|
||||
x2 = pointArray[0].getX(),
|
||||
y2 = pointArray[0].getY();
|
||||
x1 = segments[segments.length - 1]._point.getX(),
|
||||
y1 = segments[segments.length - 1]._point.getY(),
|
||||
x2 = segments[0]._point.getX(),
|
||||
y2 = segments[0]._point.getY();
|
||||
pointString += 'c' + (handleOut1.getX()) + ',' + (handleOut1.getY()) + ' ';
|
||||
pointString += (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' ';
|
||||
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
|
||||
*/
|
||||
function determineType(path, segArray, pointArray, handleInArray, handleOutArray) {
|
||||
function determineType(path, segments) {
|
||||
var type;
|
||||
var dPoint12;
|
||||
var dPoint34;
|
||||
|
|
@ -281,15 +270,15 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
// between straight objects (line, polyline, rect, and polygon) and
|
||||
// objects with curves(circle, ellipse, roundedRectangle).
|
||||
if (path.isPolygon()) {
|
||||
if (segArray.length == 4) {
|
||||
if (segments.length == 4) {
|
||||
// If the distance between (point0 and point1) and (point2 and
|
||||
// point3) are equal, then it is a rectangle
|
||||
dPoint12 = Math.round(pointArray[0].getDistance(pointArray[1]));
|
||||
dPoint34 = Math.round(pointArray[3].getDistance(pointArray[2]));
|
||||
dPoint12 = Math.round(segments[0]._point.getDistance(segments[1]._point));
|
||||
dPoint34 = Math.round(segments[3]._point.getDistance(segments[2]._point));
|
||||
if (dPoint12 == dPoint34) {
|
||||
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 (path.getClosed()) {
|
||||
type = 'polygon';
|
||||
|
|
@ -301,22 +290,22 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
type = 'line';
|
||||
}
|
||||
} else {
|
||||
if (segArray.length == 8) {
|
||||
if (segments.length == 8) {
|
||||
// If the distance between (point0 and point3) and (point7 and
|
||||
// point4) are equal then it is a roundedRectangle
|
||||
dPoint12 = Math.round(pointArray[0].getDistance(pointArray[3]));
|
||||
dPoint34 = Math.round(pointArray[7].getDistance(pointArray[4]));
|
||||
dPoint12 = Math.round(segments[0]._point.getDistance(segments[3]._point));
|
||||
dPoint34 = Math.round(segments[7]._point.getDistance(segments[4]._point));
|
||||
if (dPoint12 == dPoint34) {
|
||||
type = 'roundrect';
|
||||
}
|
||||
} else if (segArray.length == 4) {
|
||||
} else if (segments.length == 4) {
|
||||
// Check if the values of the point have values similar to
|
||||
// circles and ellipses.
|
||||
var checkPointValues = true;
|
||||
for (i = 0; i < pointArray.length && checkPointValues; i++) {
|
||||
if (handleInArray[i].getX() != 0 || handleInArray[i].getY() != 0
|
||||
&& Math.round(Math.abs(handleInArray[i].getX())) === Math.round(Math.abs(handleOutArray[i].getX()))
|
||||
&& Math.round(Math.abs(handleInArray[i].getY())) === Math.round(Math.abs(handleOutArray[i].getY()))) {
|
||||
for (i = 0; i < segments.length && checkPointValues; i++) {
|
||||
if (segments[i]._handleIn.getX() != 0 || segments[i]._handleIn.getY() != 0
|
||||
&& Math.round(Math.abs(segments[i]._handleIn.getX())) === Math.round(Math.abs(segments[i]._handleOut.getX()))
|
||||
&& Math.round(Math.abs(segments[i]._handleIn.getY())) === Math.round(Math.abs(segments[i]._handleOut.getY()))) {
|
||||
checkPointValues = true;
|
||||
} else {
|
||||
checkPointValues = false;
|
||||
|
|
@ -325,8 +314,8 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
if (checkPointValues) {
|
||||
// If the distance between (point0 and point2) and (point1
|
||||
// and point3) are equal, then it is a circle
|
||||
var d1 = Math.round(pointArray[0].getDistance(pointArray[2]));
|
||||
var d2 = Math.round(pointArray[1].getDistance(pointArray[3]));
|
||||
var d1 = Math.round(segments[0]._point.getDistance(segments[2]._point));
|
||||
var d2 = Math.round(segments[1]._point.getDistance(segments[3]._point));
|
||||
if (d1 == d2) {
|
||||
type = 'circle';
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in a new issue