scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

More SVG code refactoring.

Browse source 
Follow coding conventions and fix some forgotten renamings.
This commit is contained in:
Jürg Lehni 2012-10-22 16:31:08 -07:00
parent 160095d6e3
commit d4a60fb62a
12 changed files with 378 additions and 381 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/SVG Import/Circle and Oval Testing.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Line Testing.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Multiple Paths Test 1.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Multiple Paths Test 2.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Nested Groups Test.html
View file

@ -12,8 +12,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Rect Testing.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Testing.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Text Testing.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

4
examples/SVG Import/Transform Testing.html
View file

@ -11,8 +11,8 @@
// strokeWidth: 2,
// strokeCap: 'round'
};
var isvg = new ImportSvg;
isvg.importSVG(document.getElementById('svg'));
var isvg = new ImportSvg();
isvg.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

285
src/svg/ExportSVG.js
View file

@ -111,123 +111,124 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
var pointArray;
var handleInArray;
var handleOutArray;
var type;
//finding the type of path to export
if(path.content) {
if (path.content) {
type = 'text';
} else {
//Values are only defined if the path is not text because
// text does not have these values
segArray = path.getSegments();
pointArray = new Array();
handleInArray = new Array();
handleOutArray = new Array();
pointArray = [];
handleInArray = [];
handleOutArray = [];
for (i = 0; i < segArray.length; i++) {
pointArray[i] = segArray[i].getPoint();
handleInArray[i] = segArray[i].getHandleIn();
handleOutArray[i] = segArray[i].getHandleOut();
}
var exp = this;
var type = exp._determineType(path, segArray, pointArray, handleInArray, handleOutArray);
type = exp._determineType(path, segArray, pointArray, handleInArray, handleOutArray);
}
//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], false);
var height = pointArray[0].getDistance(pointArray[1], false);
svgEle = document.createElementNS(this.NS, 'rect');
svgEle.setAttribute('x', path.bounds.topLeft.getX());
svgEle.setAttribute('y', path.bounds.topLeft.getY());
svgEle.setAttribute('width', width);
svgEle.setAttribute('height', height);
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], false);
var dx2 = pointArray[0].getDistance(pointArray[7], false);
var dx3 = (dx1 - dx2) / 2;
var dy1 = pointArray[0].getDistance(pointArray[3], false);
var dy2 = pointArray[1].getDistance(pointArray[2], false);
var dy3 = (dy1 - dy2) / 2;
var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].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;
svgEle = document.createElementNS(this.NS, 'rect');
svgEle.setAttribute('x', path.bounds.topLeft.getX());
svgEle.setAttribute('y', path.bounds.topLeft.getY());
svgEle.setAttribute('rx', rx);
svgEle.setAttribute('ry', ry);
svgEle.setAttribute('width', width);
svgEle.setAttribute('height', height);
break;
case'line':
svgEle = document.createElementNS(this.NS, 'line');
svgEle.setAttribute('x1', pointArray[0].getX());
svgEle.setAttribute('y1', pointArray[0].getY());
svgEle.setAttribute('x2', pointArray[pointArray.length - 1].getX());
svgEle.setAttribute('y2', pointArray[pointArray.length - 1].getY());
break;
case 'circle':
svgEle = document.createElementNS(this.NS, 'circle');
var radius = (pointArray[0].getDistance(pointArray[2], false)) /2;
svgEle.setAttribute('cx', path.bounds.center.x);
svgEle.setAttribute('cy', path.bounds.center.y);
svgEle.setAttribute('r', radius);
break;
case 'ellipse':
svgEle = document.createElementNS(this.NS, 'ellipse');
var radiusX = (pointArray[2].getDistance(pointArray[0], false)) / 2;
var radiusY = (pointArray[3].getDistance(pointArray[1], false)) /2;
svgEle.setAttribute('cx', path.bounds.center.x);
svgEle.setAttribute('cy', path.bounds.center.y);
svgEle.setAttribute('rx', radiusX);
svgEle.setAttribute('ry', radiusY);
break;
case 'polyline':
svgEle = document.createElementNS(this.NS, 'polyline');
var pointString = '';
for(i = 0; i < pointArray.length; ++i) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
}
svgEle.setAttribute('points', pointString);
break;
case 'polygon':
svgEle = document.createElementNS(this.NS, 'polygon');
var pointString = '';
for(i = 0; i < pointArray.length; ++i) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
}
svgEle.setAttribute('points', pointString);
break;
case 'text':
svgEle = document.createElementNS(this.NS, 'text');
svgEle.setAttribute('x', path.getPoint().getX());
svgEle.setAttribute('y', path.getPoint().getY());
if(path.style.font != undefined) {
svgEle.setAttribute('font', path.style.font);
}
if(path.characterStyle.font != undefined) {
svgEle.setAttribute('font-family', path.characterStyle.font);
}
if(path.characterStyle.fontSize != undefined) {
svgEle.setAttribute('font-size',path.characterStyle.fontSize);
}
svgEle.textContent = path.getContent();
break;
default:
svgEle = document.createElementNS(this.NS, 'path');
svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
break;
case 'rect':
var width = pointArray[0].getDistance(pointArray[3], false);
var height = pointArray[0].getDistance(pointArray[1], false);
svgEle = document.createElementNS(this.NS, 'rect');
svgEle.setAttribute('x', path.bounds.topLeft.getX());
svgEle.setAttribute('y', path.bounds.topLeft.getY());
svgEle.setAttribute('width', width);
svgEle.setAttribute('height', height);
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], false);
var dx2 = pointArray[0].getDistance(pointArray[7], false);
var dx3 = (dx1 - dx2) / 2;
var dy1 = pointArray[0].getDistance(pointArray[3], false);
var dy2 = pointArray[1].getDistance(pointArray[2], false);
var dy3 = (dy1 - dy2) / 2;
var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].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;
svgEle = document.createElementNS(this.NS, 'rect');
svgEle.setAttribute('x', path.bounds.topLeft.getX());
svgEle.setAttribute('y', path.bounds.topLeft.getY());
svgEle.setAttribute('rx', rx);
svgEle.setAttribute('ry', ry);
svgEle.setAttribute('width', width);
svgEle.setAttribute('height', height);
break;
case'line':
svgEle = document.createElementNS(this.NS, 'line');
svgEle.setAttribute('x1', pointArray[0].getX());
svgEle.setAttribute('y1', pointArray[0].getY());
svgEle.setAttribute('x2', pointArray[pointArray.length - 1].getX());
svgEle.setAttribute('y2', pointArray[pointArray.length - 1].getY());
break;
case 'circle':
svgEle = document.createElementNS(this.NS, 'circle');
var radius = (pointArray[0].getDistance(pointArray[2], false)) /2;
svgEle.setAttribute('cx', path.bounds.center.x);
svgEle.setAttribute('cy', path.bounds.center.y);
svgEle.setAttribute('r', radius);
break;
case 'ellipse':
svgEle = document.createElementNS(this.NS, 'ellipse');
var radiusX = (pointArray[2].getDistance(pointArray[0], false)) / 2;
var radiusY = (pointArray[3].getDistance(pointArray[1], false)) /2;
svgEle.setAttribute('cx', path.bounds.center.x);
svgEle.setAttribute('cy', path.bounds.center.y);
svgEle.setAttribute('rx', radiusX);
svgEle.setAttribute('ry', radiusY);
break;
case 'polyline':
svgEle = document.createElementNS(this.NS, 'polyline');
var pointString = '';
for(i = 0; i < pointArray.length; ++i) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
}
svgEle.setAttribute('points', pointString);
break;
case 'polygon':
svgEle = document.createElementNS(this.NS, 'polygon');
var pointString = '';
for(i = 0; i < pointArray.length; ++i) {
pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
}
svgEle.setAttribute('points', pointString);
break;
case 'text':
svgEle = document.createElementNS(this.NS, 'text');
svgEle.setAttribute('x', path.getPoint().getX());
svgEle.setAttribute('y', path.getPoint().getY());
if (path.style.font != undefined) {
svgEle.setAttribute('font', path.style.font);
}
if (path.characterStyle.font != undefined) {
svgEle.setAttribute('font-family', path.characterStyle.font);
}
if (path.characterStyle.fontSize != undefined) {
svgEle.setAttribute('font-size',path.characterStyle.fontSize);
}
svgEle.textContent = path.getContent();
break;
default:
svgEle = document.createElementNS(this.NS, 'path');
svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
break;
}
//If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle
//found by the determineIfTransformed method and make a path that accommodates for the transformed object
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
//making them paths
var angle = this._determineIfTransformed(path, pointArray, type) + 90;
if(angle != 0) {
if(type == 'rect' || type == 'roundRect') {
if (angle != 0) {
if (type == 'rect' || type == 'roundRect') {
svgEle = document.createElementNS(this.NS, 'path');
svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
} else {
@ -236,10 +237,10 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
}
}
}
if(type == 'text') {
if (type == 'text') {
svgEle.setAttribute('transform','rotate(' + path.matrix.getRotation() + ',' + path.getPoint().getX() + ',' +path.getPoint().getY() +')');
}
if(path.id != undefined) {
if (path.id != undefined) {
svgEle.setAttribute('id', path.id);
}
//checks if there is a stroke color in the passed in path
@ -254,30 +255,30 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
svgEle.setAttribute('fill', 'rgba(0,0,0,0)');
}
//same thing as stroke color except with stroke width
if(path.strokeWidth != undefined){
if (path.strokeWidth != undefined) {
svgEle.setAttribute('stroke-width', path.strokeWidth);
}
//same thing as stroke color except with the path name
if(path.name != undefined) {
if (path.name != undefined) {
svgEle.setAttribute('name', path.name);
}
//same thing as stroke color except with the strokeCap
if(path.strokeCap != undefined) {
if (path.strokeCap != undefined) {
svgEle.setAttribute('stroke-linecap', path.strokeCap);
}
//same thing as stroke color except with the strokeJoin
if(path.strokeJoin != undefined) {
if (path.strokeJoin != undefined) {
svgEle.setAttribute('stroke-linejoin', path.strokeJoin);
}
//same thing as stroke color except with the opacity
if(path.opacity != undefined) {
if (path.opacity != undefined) {
svgEle.setAttribute('opacity', path.opacity);
}
//checks to see if there the dashArray is set, then adds the attribute if there is.
if(path.dashArray[0] != undefined) {
if (path.dashArray[0] != undefined) {
var dashVals = '';
for (var i in path.dashArray) {
if(i != path.dashArray.length -1) {
if (i != path.dashArray.length -1) {
dashVals += path.dashArray[i] + ", ";
} else {
dashVals += path.dashArray[i];
@ -286,17 +287,17 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
svgEle.setAttribute('stroke-dasharray', dashVals);
}
//same thing as stroke color except with the dash offset
if(path.dashOffset != undefined) {
if (path.dashOffset != undefined) {
svgEle.setAttribute('stroke-dashoffset', path.dashOffset);
}
//same thing as stroke color except with the miter limit
if(path.miterLimit != undefined) {
if (path.miterLimit != undefined) {
svgEle.setAttribute('stroke-miterlimit', path.miterLimit);
}
//same thing as stroke color except with the visibility
if(path.visibility != undefined) {
if (path.visibility != undefined) {
var visString = '';
if(path.visibility) {
if (path.visibility) {
visString = 'visible';
} else {
visString = 'hidden';
@ -316,25 +317,25 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
var topMidPathy;
var topMidPath;
switch (type) {
case 'rect':
topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2;
topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
case 'ellipse':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
break;
case 'circle':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
break;
case 'roundRect':
topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2;
topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
default:
//Nothing happens here
break;
case 'rect':
topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2;
topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
case 'ellipse':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
break;
case 'circle':
topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
break;
case 'roundRect':
topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2;
topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2;
topMidPath = new Point(topMidPathx, topMidPathy);
break;
default:
//Nothing happens here
break;
}
var deltaY = topMidPath.y - centerPoint.getY();
var deltaX = topMidPath.x - centerPoint.getX();
@ -362,7 +363,7 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
y2 = pointArray[i + 1].getY();
handleOut1 = hOArray[i];
handleIn2 = hIArray[i+1];
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
pointString+= 'L' + x2 + ',' + y2 + ' ';
} else {
@ -410,7 +411,7 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
var curves = false;
var segHandleIn;
var segHandleOut;
for( var i in segArray){
for( var i in segArray) {
//Checks for any curves (if the handles have values). Differentiates between straight objects(line, polyline, rect, and polygon) and
//and objects with curves(circle, ellipse, roundedRectangle).
segHandleIn = segArray[i].getHandleIn();
@ -421,46 +422,46 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{
//Checks for curves in the passed in segments
//Checks if the type of the passed in path is a rounded rectangle, an ellipse, a circle, or if it's simply a path
//If there aren't any curves (if curves = false), then it checks if the type is a rectangle, a polygon, a polyline, or simply a line.
if(curves){
if(segArray.length == 8) {
if (curves) {
if (segArray.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], false));
dPoint34 = Math.round(pointArray[7].getDistance(pointArray[4], false));
if(dPoint12 == dPoint34) {
if (dPoint12 == dPoint34) {
type = 'roundRect';
}
} else if(segArray.length == 4) {
} else if (segArray.length == 4) {
//checks if the values of the point have values similar to circles and ellipses
var checkPointValues = true;
for(i = 0; i < pointArray.length && checkPointValues == true; 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()))) {
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()))) {
checkPointValues = true;
} else {
checkPointValues = false;
}
}
if(checkPointValues == true) {
if (checkPointValues == true) {
//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], false));
var d2 = Math.round(pointArray[1].getDistance(pointArray[3], false));
if(d1 == d2) {
if (d1 == d2) {
type = 'circle';
} else {
type = 'ellipse';
}
}
}
} else if(!curves) {
if(segArray.length == 4) {
} else if (!curves) {
if (segArray.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], false));
dPoint34 = Math.round(pointArray[3].getDistance(pointArray[2], false));
if(dPoint12 == dPoint34) {
if (dPoint12 == dPoint34) {
type = 'rect';
}
} else if(segArray.length >= 3) {
} else if (segArray.length >= 3) {
//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';
} else {
type = 'polyline';

402
src/svg/ImportSVG.js
View file

@ -39,48 +39,47 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
* @param {SVG DOM} svg An SVG DOM object with parameters
* @return {item} A Paper.js layer
*/
importSVG: function(svg) {
importSvg: function(svg) {
var item;
var symbol;
switch (svg.nodeName.toLowerCase()) {
case 'line':
item = this._importLine(svg);
break;
case 'rect':
item = this._importRectangle(svg);
break;
case 'circle':
item = this._importCircle(svg);
break;
case 'ellipse':
item = this._importOval(svg);
break;
case 'g':
case 'svg':
item = this._importGroup(svg);
break;
case 'text':
item = this._importText(svg);
break;
case 'path':
item = this._importPath(svg);
break;
case 'polygon':
case 'polyline':
item = this._importPoly(svg);
break;
case 'symbol':
item = this._importGroup(svg);
this._importAttributesAndStyles(svg, item);
symbol = new Symbol(item);
item = null;
default:
//Not supported yet.
case 'line':
item = this._importLine(svg);
break;
case 'rect':
item = this._importRectangle(svg);
break;
case 'circle':
item = this._importCircle(svg);
break;
case 'ellipse':
item = this._importOval(svg);
break;
case 'g':
case 'svg':
item = this._importGroup(svg);
break;
case 'text':
item = this._importText(svg);
break;
case 'path':
item = this._importPath(svg);
break;
case 'polygon':
case 'polyline':
item = this._importPoly(svg);
break;
case 'symbol':
item = this._importGroup(svg);
this._importAttributesAndStyles(svg, item);
symbol = new Symbol(item);
item = null;
default:
// Not supported yet.
}
if (item) {
if (item)
this._importAttributesAndStyles(svg, item);
}
return item;
},
@ -101,13 +100,11 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
var child;
for (var i in svg.childNodes) {
child = svg.childNodes[i];
if (child.nodeType != 1) {
if (child.nodeType != 1)
continue;
}
item = this.importSVG(child);
if (item) {
item = this.importSvg(child);
if (item)
group.addChild(item);
}
}
return group;
@ -282,7 +279,7 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
var controlPoint;
var prevCommand;
var segmentTo;
for (var i = 0; i < segments.numberOfItems; ++i){
for (var i = 0; i < segments.numberOfItems; ++i) {
segment = segments.getItem(i);
if (segment.pathSegType == SVGPathSeg.PATHSEG_UNKNOWN) {
continue;
@ -295,75 +292,75 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
segmentTo = new Point(segment.x, segment.y);
segmentTo = segmentTo.add(relativeToPoint);
switch (segment.pathSegType) {
case SVGPathSeg.PATHSEG_CLOSEPATH:
path.closePath();
break;
case SVGPathSeg.PATHSEG_MOVETO_ABS:
case SVGPathSeg.PATHSEG_MOVETO_REL:
path.moveTo(segmentTo);
break;
case SVGPathSeg.PATHSEG_LINETO_ABS:
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
case SVGPathSeg.PATHSEG_LINETO_REL:
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:
path.lineTo(segmentTo);
break;
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
path.cubicCurveTo(
relativeToPoint.add([segment.x1, segment.y1]),
relativeToPoint.add([segment.x2, segment.y2]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
path.quadraticCurveTo(
relativeToPoint.add([segment.x1, segment.y1]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_ARC_ABS:
case SVGPathSeg.PATHSEG_ARC_REL:
//TODO: Implement Arcs.
//TODO: Requires changes in Paper.js's Path to do.
//TODO: http://www.w3.org/TR/SVG/implnote.html
break;
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
prevCommand = segments.getItem(i - 1);
controlPoint = new Point(prevCommand.x2, prevCommand.y2);
controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
controlPoint = controlPoint.add(path.lastSegment.point);
controlPoint = path.lastSegment.point.subtract(controlPoint);
controlPoint = path.lastSegment.point.add(controlPoint);
path.cubicCurveTo(
controlPoint,
relativeToPoint.add([segment.x2, segment.y2]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:
for (j = i; j >= 0; --j) {
prevCommand = segments.getItem(j);
if (prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS ||
prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL
) {
controlPoint = new Point(prevCommand.x1, prevCommand.y1);
controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
controlPoint = controlPoint.add(path.segments[j].point);
break;
}
case SVGPathSeg.PATHSEG_CLOSEPATH:
path.closePath();
break;
case SVGPathSeg.PATHSEG_MOVETO_ABS:
case SVGPathSeg.PATHSEG_MOVETO_REL:
path.moveTo(segmentTo);
break;
case SVGPathSeg.PATHSEG_LINETO_ABS:
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
case SVGPathSeg.PATHSEG_LINETO_REL:
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:
path.lineTo(segmentTo);
break;
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
path.cubicCurveTo(
relativeToPoint.add([segment.x1, segment.y1]),
relativeToPoint.add([segment.x2, segment.y2]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
path.quadraticCurveTo(
relativeToPoint.add([segment.x1, segment.y1]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_ARC_ABS:
case SVGPathSeg.PATHSEG_ARC_REL:
//TODO: Implement Arcs.
//TODO: Requires changes in Paper.js's Path to do.
//TODO: http://www.w3.org/TR/SVG/implnote.html
break;
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
prevCommand = segments.getItem(i - 1);
controlPoint = new Point(prevCommand.x2, prevCommand.y2);
controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
controlPoint = controlPoint.add(path.lastSegment.point);
controlPoint = path.lastSegment.point.subtract(controlPoint);
controlPoint = path.lastSegment.point.add(controlPoint);
path.cubicCurveTo(
controlPoint,
relativeToPoint.add([segment.x2, segment.y2]),
segmentTo
);
break;
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:
for (j = i; j >= 0; --j) {
prevCommand = segments.getItem(j);
if (prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS ||
prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL
) {
controlPoint = new Point(prevCommand.x1, prevCommand.y1);
controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
controlPoint = controlPoint.add(path.segments[j].point);
break;
}
for (j; j < i; ++j) {
controlPoint = path.segments[j].point.subtract(controlPoint);
controlPoint = path.segments[j].point.add(controlPoint);
}
path.quadraticCurveTo(controlPoint, segmentTo);
break;
}
for (j; j < i; ++j) {
controlPoint = path.segments[j].point.subtract(controlPoint);
controlPoint = path.segments[j].point.add(controlPoint);
}
path.quadraticCurveTo(controlPoint, segmentTo);
break;
}
}
@ -445,79 +442,79 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
return;
}
switch (name) {
case 'id':
item.name = value;
break;
case 'fill':
if (value != 'none') {
item.fillColor = value;
}
break;
case 'stroke':
if (value != 'none') {
item.strokeColor = value;
}
break;
case 'stroke-width':
item.strokeWidth = parseFloat(value, 10);
break;
case 'stroke-linecap':
item.strokeCap = value;
break;
case 'stroke-linejoin':
item.strokeJoin = value;
break;
case 'stroke-dasharray':
value = value.replace(/px/g, '');
value = value.replace(/, /g, ',');
value = value.replace(/ /g, ',');
value = value.split(',');
for (var i in value) {
value[i] = parseFloat(value[i], 10);
}
item.dashArray = value;
break;
case 'stroke-dashoffset':
item.dashOffset = parseFloat(value, 10);
break;
case 'stroke-miterlimit':
item.miterLimit = parseFloat(value, 10);
break;
case 'transform':
this._applyTransform(item, svg);
case 'opacity':
item.opacity = parseFloat(value, 10);
case 'visibility':
item.visibility = (value == 'visible') ? true : false;
break;
case 'font':
case 'font-family':
case 'font-size':
//Implemented in characterStyle below.
break;
default:
// Not supported yet.
break;
case 'id':
item.name = value;
break;
case 'fill':
if (value != 'none') {
item.fillColor = value;
}
break;
case 'stroke':
if (value != 'none') {
item.strokeColor = value;
}
break;
case 'stroke-width':
item.strokeWidth = parseFloat(value, 10);
break;
case 'stroke-linecap':
item.strokeCap = value;
break;
case 'stroke-linejoin':
item.strokeJoin = value;
break;
case 'stroke-dasharray':
value = value.replace(/px/g, '');
value = value.replace(/, /g, ',');
value = value.replace(/ /g, ',');
value = value.split(',');
for (var i in value) {
value[i] = parseFloat(value[i], 10);
}
item.dashArray = value;
break;
case 'stroke-dashoffset':
item.dashOffset = parseFloat(value, 10);
break;
case 'stroke-miterlimit':
item.miterLimit = parseFloat(value, 10);
break;
case 'transform':
this._applyTransform(item, svg);
case 'opacity':
item.opacity = parseFloat(value, 10);
case 'visibility':
item.visibility = (value == 'visible') ? true : false;
break;
case 'font':
case 'font-family':
case 'font-size':
//Implemented in characterStyle below.
break;
default:
// Not supported yet.
break;
}
if (item.characterStyle) {
switch (name) {
case 'font':
var text = document.createElement('span');
text.style.font = value;
for (var i = 0; i < text.style.length; ++i) {
var n = text.style[i];
this._applyAttributeOrStyle(n, text.style[n], item, svg);
}
break;
case 'font-family':
var fonts = value.split(',');
fonts[0] = fonts[0].replace(/^\s+|\s+$/g, "");
item.characterStyle.font = fonts[0];
break;
case 'font-size':
item.characterStyle.fontSize = parseFloat(value, 10);
break;
}
case 'font':
var text = document.createElement('span');
text.style.font = value;
for (var i = 0; i < text.style.length; ++i) {
var n = text.style[i];
this._applyAttributeOrStyle(n, text.style[n], item, svg);
}
break;
case 'font-family':
var fonts = value.split(',');
fonts[0] = fonts[0].replace(/^\s+|\s+$/g, "");
item.characterStyle.font = fonts[0];
break;
case 'font-size':
item.characterStyle.fontSize = parseFloat(value, 10);
break;
}
}
},
@ -550,29 +547,28 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{
transform.matrix.f
);
switch (transform.type) {
case SVGTransform.SVG_TRANSFORM_TRANSLATE:
break;
case SVGTransform.SVG_TRANSFORM_SCALE:
break;
//Compensate for SVG's theta rotation going the opposite direction
case SVGTransform.SVG_TRANSFORM_MATRIX:
var temp = transformMatrix.getShearX();
transformMatrix.setShearX(transformMatrix.getShearY());
transformMatrix.setShearY(temp);
break;
case SVGTransform.SVG_TRANSFORM_SKEWX:
transformMatrix.setShearX(transformMatrix.getShearY());
transformMatrix.setShearY(0);
break;
case SVGTransform.SVG_TRANSFORM_SKEWY:
transformMatrix.setShearY(transformMatrix.getShearX());
transformMatrix.setShearX(0);
break;
case SVGTransform.SVG_TRANSFORM_ROTATE:
transformMatrix.setShearX(transformMatrix.getShearX() * -1);
transformMatrix.setShearY(transformMatrix.getShearY() * -1);
break;
case SVGTransform.SVG_TRANSFORM_TRANSLATE:
break;
case SVGTransform.SVG_TRANSFORM_SCALE:
break;
//Compensate for SVG's theta rotation going the opposite direction
case SVGTransform.SVG_TRANSFORM_MATRIX:
var temp = transformMatrix.getShearX();
transformMatrix.setShearX(transformMatrix.getShearY());
transformMatrix.setShearY(temp);
break;
case SVGTransform.SVG_TRANSFORM_SKEWX:
transformMatrix.setShearX(transformMatrix.getShearY());
transformMatrix.setShearY(0);
break;
case SVGTransform.SVG_TRANSFORM_SKEWY:
transformMatrix.setShearY(transformMatrix.getShearX());
transformMatrix.setShearX(0);
break;
case SVGTransform.SVG_TRANSFORM_ROTATE:
transformMatrix.setShearX(transformMatrix.getShearX() * -1);
transformMatrix.setShearY(transformMatrix.getShearY() * -1);
break;
}
matrix.concatenate(transformMatrix);
}

36
test/tests/ImportSVG.js
View file

@ -31,7 +31,7 @@ test('make an svg line', function() {
shape.setAttribute('y2', y2);
var isvg = new ImportSvg();
var importedLine = isvg.importSVG(shape);
var importedLine = isvg.importSvg(shape);
var line = new Path.Line([x1, y1], [x2, y2]);
@ -47,7 +47,7 @@ test('make an svg line with invalid values', function() {
shape.setAttribute('y2', null);
var isvg = new ImportSvg();
var importedLine = isvg.importSVG(shape);
var importedLine = isvg.importSvg(shape);
var line = new Path.Line([0, 0], [0, 0]);
@ -68,7 +68,7 @@ test('compare rectangle values', function() {
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSVG(shape);
var importedRectangle = isvg.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -92,7 +92,7 @@ test('compare negative rectangle values', function() {
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSVG(shape);
var importedRectangle = isvg.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var rectangle = new Rectangle(topLeft, size);
@ -112,7 +112,7 @@ test('compare invalid rectangle values', function() {
shape.setAttribute('height', null);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSVG(shape);
var importedRectangle = isvg.importSvg(shape);
var topLeft = new Point(0, 0);
var size = new Size(0, 0);
@ -139,7 +139,7 @@ test('compare round rectangle values', function() {
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSVG(shape);
var importedRectangle = isvg.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -167,7 +167,7 @@ test('compare negative round rectangle values', function() {
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSVG(shape);
var importedRectangle = isvg.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -195,7 +195,7 @@ test('compare invalid round rectangle values', function() {
shape.setAttribute('height', height);
var isvg = new ImportSvg();
var importedRectangle = isvg.importSVG(shape);
var importedRectangle = isvg.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -219,7 +219,7 @@ test('compare oval values', function() {
shape.setAttribute('ry', ry);
var isvg = new ImportSvg();
var importedOval = isvg.importSVG(shape);
var importedOval = isvg.importSvg(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -247,7 +247,7 @@ test('compare negative oval values', function() {
shape.setAttribute('ry', ry);
var isvg = new ImportSvg();
var importedOval = isvg.importSVG(shape);
var importedOval = isvg.importSvg(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -270,7 +270,7 @@ test('compare invalid oval values', function() {
shape.setAttribute('ry', null);
var isvg = new ImportSvg();
var importedOval = isvg.importSVG(shape);
var importedOval = isvg.importSvg(shape);
var center = new Point(0, 0);
var offset = new Point(0, 0);
@ -295,7 +295,7 @@ test('compare circle values', function() {
shape.setAttribute('r', r);
var isvg = new ImportSvg();
var importedCircle = isvg.importSVG(shape);
var importedCircle = isvg.importSvg(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
@ -315,7 +315,7 @@ test('compare negative circle values', function() {
shape.setAttribute('r', r);
var isvg = new ImportSvg();
var importedCircle = isvg.importSVG(shape);
var importedCircle = isvg.importSvg(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
@ -333,7 +333,7 @@ test('compare invalid circle values', function() {
shape.setAttribute('r', null);
var isvg = new ImportSvg();
var importedCircle = isvg.importSVG(shape);
var importedCircle = isvg.importSvg(shape);
var center = new Point(0, 0);
var circle = new Path.Circle(center, 0);
@ -349,7 +349,7 @@ test('compare polygon values', function() {
shape.setAttribute('points', svgpoints);
var isvg = new ImportSvg();
var importedPolygon = isvg.importSVG(shape);
var importedPolygon = isvg.importSvg(shape);
var poly = new Path();
var points = shape.points;
@ -376,7 +376,7 @@ test('compare negative polygon values', function() {
shape.setAttribute('points', svgpoints);
var isvg = new ImportSvg();
var importedPolygon = isvg.importSVG(shape);
var importedPolygon = isvg.importSvg(shape);
var poly = new Path();
var points = shape.points;
@ -403,7 +403,7 @@ test('compare polyline values', function() {
shape.setAttribute('points', svgpoints);
var isvg = new ImportSvg();
var importedPolyline = isvg.importSVG(shape);
var importedPolyline = isvg.importSvg(shape);
var poly = new Path();
var points = shape.points;
@ -430,7 +430,7 @@ test('compare polyline values', function() {
shape.setAttribute('points', svgpoints);
var isvg = new ImportSvg();
var importedPolyline = isvg.importSVG(shape);
var importedPolyline = isvg.importSvg(shape);
var poly = new Path();
var points = shape.points;