Skip to content

Commit

Permalink
fixed spaces/superfluous valOf added illegal path check removed speci…
Browse files Browse the repository at this point in the history 
…al handling of m [#798 state:peer-review-requested]
  • Loading branch information
@annasob
annasob committed Aug 10, 2010
1 parent c789ad2 commit 490a271
Show file tree
Hide file tree
Showing 9 changed files with 229 additions and 37 deletions.
13 changes: 13 additions & 0 deletions examples/seneca/loadShape/S.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions examples/seneca/loadShape/T.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 62 additions & 0 deletions examples/seneca/loadShape/loadShape10.html
View file
@@ -0,0 +1,62 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Processing.js SVG LoadImage() bot.svg</title>
<script type="text/javascript" src="../../../processing.js"></script>
<script type="text/javascript" src="../../init.js"></script>

</head>
<body>


<script id="script" type="application/processing">
/**
* Ignore Styles.
* Illustration by George Brower.
*
* Shapes are loaded with style information that tells them how
* to draw (the color, stroke weight, etc.) The disableStyle()
* method of PShape turns off this information. The enableStyle()
* method turns it back on.
*/

PShape bot;
PShape bot2;
void setup() {
size(800, 500);
smooth();
// The file "bot1.svg" must be in the data folder
// of the current sketch to load successfully
bot = loadShape("S.svg");
bot2 = loadShape("ssmall.svg");
noLoop();
}

void draw() {
background(102);

// Draw left bot
bot.disableStyle(); // Ignore the colors in the SVG
fill(0, 102, 153); // Set the SVG fill to blue
stroke(255); // Set the SVG fill to white
shape(bot, 0, 5);

// Draw right bot
bot.enableStyle();
shape(bot, 320, 5);

// Draw left bot
bot2.disableStyle(); // Ignore the colors in the SVG
fill(0, 102, 153); // Set the SVG fill to blue
stroke(255); // Set the SVG fill to white
shape(bot2, 0, 210);

// Draw right bot
bot2.enableStyle();
shape(bot2, 320, 210);
}
</script><canvas id="display" ></canvas>
<div> The actual shape: <img src="s.jpg"></div>
</body>
</html>

62 changes: 62 additions & 0 deletions examples/seneca/loadShape/loadShape9.html
View file
@@ -0,0 +1,62 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Processing.js SVG LoadImage() bot.svg</title>
<script type="text/javascript" src="../../../processing.js"></script>
<script type="text/javascript" src="../../init.js"></script>

</head>
<body>


<script id="script" type="application/processing">
/**
* Ignore Styles.
* Illustration by George Brower.
*
* Shapes are loaded with style information that tells them how
* to draw (the color, stroke weight, etc.) The disableStyle()
* method of PShape turns off this information. The enableStyle()
* method turns it back on.
*/

PShape bot;
PShape bot2;
void setup() {
size(640, 440);
smooth();
// The file "bot1.svg" must be in the data folder
// of the current sketch to load successfully
bot = loadShape("T.svg");
bot2 = loadShape("tsmall.svg");
noLoop();
}

void draw() {
background(102);

// Draw left bot
bot.disableStyle(); // Ignore the colors in the SVG
fill(0, 102, 153); // Set the SVG fill to blue
stroke(255); // Set the SVG fill to white
shape(bot, 20, 5, 300, 300);

// Draw right bot
bot.enableStyle();
shape(bot, 320, 5, 300, 300);

// Draw left bot
bot2.disableStyle(); // Ignore the colors in the SVG
fill(0, 102, 153); // Set the SVG fill to blue
stroke(255); // Set the SVG fill to white
shape(bot2, 20, 210, 300, 300);

// Draw right bot
bot2.enableStyle();
shape(bot2, 320, 210, 300, 300);
}
</script><canvas id="display" ></canvas>
<div> The actual shape: <img src="t.jpg"></div>
</body>
</html>

Binary file added examples/seneca/loadShape/s.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions examples/seneca/loadShape/ssmall.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/seneca/loadShape/t.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions examples/seneca/loadShape/tsmall.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 53 additions & 37 deletions processing.js
View file
Expand Up @@ -1801,7 +1801,7 @@
}
return shape;
},
parsePath: function(){
parsePath: function() {
this.family = p.PATH;
this.kind = 0;
var pathDataChars = [];
Expand Down Expand Up @@ -1829,15 +1829,16 @@
var str = "";
var tmpArray =[];
var flag = false;
while ( i< pathData.length -1) {
while (i< pathData.length) {
valOf = pathData[i].valueOf();
if ((valOf >= 65 && valOf <= 90) || (valOf >= 97 && valOf.valueOf() <= 122)) { // if its a letter
if ((valOf >= 65 && valOf <= 90) || (valOf >= 97 && valOf <= 122)) { // if its a letter
// populate the tmpArray with coordinates
j = i;
i++;
i++;
if (i < pathData.length) { // dont go over boundary of array
tmpArray = [];
valOf = pathData[i].valueOf();
while (!((valOf >= 65 && valOf <= 90) || (valOf >= 97 && valOf.valueOf() <= 100) || (valOf >= 102 && valOf.valueOf() <= 122)) && flag === false) { // if its NOT a letter
while (!((valOf >= 65 && valOf <= 90) || (valOf >= 97 && valOf <= 100) || (valOf >= 102 && valOf <= 122)) && flag === false) { // if its NOT a letter
if (valOf === 32) { //if its a space and the str isn't empty
// somethimes you get a space after the letter
if (str !== "") {
Expand All @@ -1862,12 +1863,13 @@
str += pathData[i].toString();
i++;
}
if ( i === pathData.length) {
if (i === pathData.length) { // dont go over boundary of array
flag = true;
} else {
valOf = pathData[i].valueOf();
}
}
}
if (str !== "") {
tmpArray.push(parseFloat(str));
str = "";
Expand All @@ -1878,8 +1880,8 @@
cx = tmpArray[0];
cy = tmpArray[1];
this.parsePathMoveto(cx, cy);
if (tmpArray.length > 2 ) {
for( j = 2; j < tmpArray.length - 2; j+=2) {
if (tmpArray.length > 2) {
for (j = 2; j < tmpArray.length - 2; j+=2) {
// absolute line to
cx = tmpArray[j];
cy = tmpArray[j+1];
Expand All @@ -1890,18 +1892,12 @@
break;
case 109: // m - move to (relative)
if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) { // need one+ pairs of co-ordinates
if ( j !== 0 ) {
// If a relative moveto (m) appears as the first element of the path,
// then it is treated as a pair of absolute co-ordinates
cx = cx + tmpArray[0];
cy = cy + tmpArray[1];
}
this.parsePathMoveto(cx,cy);
if (tmpArray.length > 2 ) {
if (tmpArray.length > 2) {
for (j = 2; j < tmpArray.length - 2; j+=2) {
// relative line to
cx = cx + tmpArray[j];
cy = cy + tmpArray[j + 1];
cx += tmpArray[j];
cy += tmpArray[j + 1];
this.parsePathLineto(cx,cy);
}
}
Expand All @@ -1920,8 +1916,8 @@
case 108: // l
if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) { // need one+ pairs of co-ordinates
for (j = 0; j < tmpArray.length; j+=2) {
cx = cx + tmpArray[j];
cy = cy + tmpArray[j+1];
cx += tmpArray[j];
cy += tmpArray[j+1];
this.parsePathLineto(cx,cy);
}
}
Expand All @@ -1936,7 +1932,7 @@

case 104: // horizontal lineto relative
for (j = 0; j < tmpArray.length; j++) { // multiple x co-ordinates can be provided
cx = cx + tmpArray[j];
cx += tmpArray[j];
this.parsePathLineto(cx, cy);
}
break;
Expand All @@ -1950,7 +1946,7 @@

case 118:
for (j = 0; j < tmpArray.length; j++) { // multiple y co-ordinates can be provided
cy = cy + tmpArray[j];
cy += tmpArray[j];
this.parsePathLineto(cx, cy);
}
break;
Expand Down Expand Up @@ -2106,23 +2102,35 @@
}
},
parsePathQuadto: function(x1, y1, cx, cy, x2, y2) {
this.parsePathCode(p.BEZIER_VERTEX);
// x1/y1 already covered by last moveto, lineto, or curveto
this.parsePathVertex(x1 + ((cx-x1)*2/3), y1 + ((cy-y1)*2/3));
this.parsePathVertex(x2 + ((cx-x2)*2/3), y2 + ((cy-y2)*2/3));
this.parsePathVertex(x2, y2);
if (this.vertices.length > 0) {
this.parsePathCode(p.BEZIER_VERTEX);
// x1/y1 already covered by last moveto, lineto, or curveto
this.parsePathVertex(x1 + ((cx-x1)*2/3), y1 + ((cy-y1)*2/3));
this.parsePathVertex(x2 + ((cx-x2)*2/3), y2 + ((cy-y2)*2/3));
this.parsePathVertex(x2, y2);
} else {
throw ("Path must start with M/m");
}
},
parsePathCurveto : function(x1, y1, x2, y2, x3, y3) {
this.parsePathCode(p.BEZIER_VERTEX );
this.parsePathVertex(x1, y1);
this.parsePathVertex(x2, y2);
this.parsePathVertex(x3, y3);
if (this.vertices.length > 0) {
this.parsePathCode(p.BEZIER_VERTEX );
this.parsePathVertex(x1, y1);
this.parsePathVertex(x2, y2);
this.parsePathVertex(x3, y3);
} else {
throw ("Path must start with M/m");
}
},
parsePathLineto: function(px, py) {
this.parsePathCode(p.VERTEX);
this.parsePathVertex(px, py);
// add property to distinguish between curContext.moveTo or curContext.lineTo
this.vertices[this.vertices.length-1]["moveTo"] = false;
if (this.vertices.length > 0) {
this.parsePathCode(p.VERTEX);
this.parsePathVertex(px, py);
// add property to distinguish between curContext.moveTo or curContext.lineTo
this.vertices[this.vertices.length-1]["moveTo"] = false;
} else {
throw ("Path must start with M/m");
}
},
parsePathMoveto: function(px, py) {
if (this.vertices.length > 0) {
Expand Down Expand Up @@ -7443,10 +7451,10 @@
}

if(!close){
p.CLOSE = false;
//p.CLOSE = false;
}
else{
p.CLOSE = true;
//p.CLOSE = true;

fillVertArray.push(vertArray[0][0]);
fillVertArray.push(vertArray[0][1]);
Expand Down Expand Up @@ -7497,6 +7505,10 @@
b[3] = [vertArray[i+1][0], vertArray[i+1][1]];
curContext.bezierCurveTo(b[1][0], b[1][1], b[2][0], b[2][1], b[3][0], b[3][1]);
}
// close the shape
if (close === p.CLOSE){
curContext.lineTo(vertArray[0][0], vertArray[0][1]);
}
executeContextFill();
executeContextStroke();
curContext.closePath();
Expand Down Expand Up @@ -7564,6 +7576,10 @@
curContext.bezierCurveTo(vertArray[i][0], vertArray[i][1], vertArray[i][2], vertArray[i][3], vertArray[i][4], vertArray[i][5]);
}
}
// close the shape
if (close === p.CLOSE){
curContext.lineTo(vertArray[0][0], vertArray[0][1]);
}
executeContextFill();
executeContextStroke();
curContext.closePath();
Expand Down Expand Up @@ -7968,7 +7984,7 @@
}
}
}
if(p.CLOSE){
if(close === p.CLOSE){
curContext.lineTo(vertArray[0][0], vertArray[0][1]);
}
executeContextFill();
Expand Down

0 comments on commit 490a271

Please sign in to comment.