Skip to content

Commit

Permalink
Merge pull request #52 from pshihn/pathGen
Browse files Browse the repository at this point in the history 
added path-gen to generators
  • Loading branch information
@pshihn
pshihn committed Apr 12, 2018
2 parents 411666e + 2ce46e1 commit 6876ac4
Show file tree
Hide file tree
Showing 7 changed files with 285 additions and 60 deletions.
113 changes: 94 additions & 19 deletions dist/rough.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1524,6 +1524,99 @@ class RoughGenerator {
return this._drawable('path', paths, o);
}

toPaths(drawable) {
const sets = drawable.sets || [];
const o = drawable.options || this.defaultOptions;
const paths = [];
for (const drawing of sets) {
let path = null;
switch (drawing.type) {
case 'path':
path = {
d: this.opsToPath(drawing),
stroke: o.stroke,
strokeWidth: o.strokeWidth,
fill: 'none'
};
break;
case 'fillPath':
path = {
d: this.opsToPath(drawing),
stroke: 'none',
strokeWidth: 0,
fill: o.fill
};
break;
case 'fillSketch':
path = this._fillSketch(drawing, o);
break;
case 'path2Dfill':
path = {
d: drawing.path,
stroke: 'none',
strokeWidth: 0,
fill: o.fill
};
break;
case 'path2Dpattern': {
const size = drawing.size;
const pattern = {
x: 0, y: 0, width: 1, height: 1,
viewBox: `0 0 ${Math.round(size[0])} ${Math.round(size[1])}`,
patternUnits: 'objectBoundingBox',
path: this._fillSketch(drawing, o)
};
path = {
d: drawing.path,
stroke: 'none',
strokeWidth: 0,
pattern: pattern
};
break;
}
}
if (path) {
paths.push(path);
}
}
return paths;
}

_fillSketch(drawing, o) {
let fweight = o.fillWeight;
if (fweight < 0) {
fweight = o.strokeWidth / 2;
}
return {
d: this.opsToPath(drawing),
stroke: o.fill,
strokeWidth: fweight,
fill: 'none'
};
}

opsToPath(drawing) {
let path = '';
for (let item of drawing.ops) {
const data = item.data;
switch (item.op) {
case 'move':
path += `M${data[0]} ${data[1]} `;
break;
case 'bcurveTo':
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
break;
case 'qcurveTo':
path += `Q${data[0]} ${data[1]}, ${data[2]} ${data[3]} `;
break;
case 'lineTo':
path += `L${data[0]} ${data[1]} `;
break;
}
}
return path.trim();
}

_computePathSize(d) {
let size = [0, 0];
if (self.document) {
Expand Down Expand Up @@ -2083,25 +2176,7 @@ class RoughSVG {
}

_opsToPath(drawing) {
let path = '';
for (let item of drawing.ops) {
const data = item.data;
switch (item.op) {
case 'move':
path += `M${data[0]} ${data[1]} `;
break;
case 'bcurveTo':
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
break;
case 'qcurveTo':
path += `Q${data[0]} ${data[1]}, ${data[2]} ${data[3]} `;
break;
case 'lineTo':
path += `L${data[0]} ${data[1]} `;
break;
}
}
return path.trim();
return this.gen.opsToPath(drawing);
}
}

Expand Down
2 changes: 1 addition & 1 deletion dist/rough.min.js
View file

Large diffs are not rendered by default.

113 changes: 94 additions & 19 deletions dist/rough.umd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1527,6 +1527,99 @@ class RoughGenerator {
return this._drawable('path', paths, o);
}

toPaths(drawable) {
const sets = drawable.sets || [];
const o = drawable.options || this.defaultOptions;
const paths = [];
for (const drawing of sets) {
let path = null;
switch (drawing.type) {
case 'path':
path = {
d: this.opsToPath(drawing),
stroke: o.stroke,
strokeWidth: o.strokeWidth,
fill: 'none'
};
break;
case 'fillPath':
path = {
d: this.opsToPath(drawing),
stroke: 'none',
strokeWidth: 0,
fill: o.fill
};
break;
case 'fillSketch':
path = this._fillSketch(drawing, o);
break;
case 'path2Dfill':
path = {
d: drawing.path,
stroke: 'none',
strokeWidth: 0,
fill: o.fill
};
break;
case 'path2Dpattern': {
const size = drawing.size;
const pattern = {
x: 0, y: 0, width: 1, height: 1,
viewBox: `0 0 ${Math.round(size[0])} ${Math.round(size[1])}`,
patternUnits: 'objectBoundingBox',
path: this._fillSketch(drawing, o)
};
path = {
d: drawing.path,
stroke: 'none',
strokeWidth: 0,
pattern: pattern
};
break;
}
}
if (path) {
paths.push(path);
}
}
return paths;
}

_fillSketch(drawing, o) {
let fweight = o.fillWeight;
if (fweight < 0) {
fweight = o.strokeWidth / 2;
}
return {
d: this.opsToPath(drawing),
stroke: o.fill,
strokeWidth: fweight,
fill: 'none'
};
}

opsToPath(drawing) {
let path = '';
for (let item of drawing.ops) {
const data = item.data;
switch (item.op) {
case 'move':
path += `M${data[0]} ${data[1]} `;
break;
case 'bcurveTo':
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
break;
case 'qcurveTo':
path += `Q${data[0]} ${data[1]}, ${data[2]} ${data[3]} `;
break;
case 'lineTo':
path += `L${data[0]} ${data[1]} `;
break;
}
}
return path.trim();
}

_computePathSize(d) {
let size = [0, 0];
if (self.document) {
Expand Down Expand Up @@ -2086,25 +2179,7 @@ class RoughSVG {
}

_opsToPath(drawing) {
let path = '';
for (let item of drawing.ops) {
const data = item.data;
switch (item.op) {
case 'move':
path += `M${data[0]} ${data[1]} `;
break;
case 'bcurveTo':
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
break;
case 'qcurveTo':
path += `Q${data[0]} ${data[1]}, ${data[2]} ${data[3]} `;
break;
case 'lineTo':
path += `L${data[0]} ${data[1]} `;
break;
}
}
return path.trim();
return this.gen.opsToPath(drawing);
}
}

Expand Down
2 changes: 1 addition & 1 deletion dist/rough.umd.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "roughjs",
"version": "2.1.0",
"version": "2.1.1",
"description": "Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance.",
"main": "dist/rough.umd.js",
"jsnext:main": "src/index.js",
Expand Down
93 changes: 93 additions & 0 deletions src/generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,99 @@ export class RoughGenerator {
return this._drawable('path', paths, o);
}

toPaths(drawable) {
const sets = drawable.sets || [];
const o = drawable.options || this.defaultOptions;
const paths = [];
for (const drawing of sets) {
let path = null;
switch (drawing.type) {
case 'path':
path = {
d: this.opsToPath(drawing),
stroke: o.stroke,
strokeWidth: o.strokeWidth,
fill: 'none'
};
break;
case 'fillPath':
path = {
d: this.opsToPath(drawing),
stroke: 'none',
strokeWidth: 0,
fill: o.fill
};
break;
case 'fillSketch':
path = this._fillSketch(drawing, o);
break;
case 'path2Dfill':
path = {
d: drawing.path,
stroke: 'none',
strokeWidth: 0,
fill: o.fill
};
break;
case 'path2Dpattern': {
const size = drawing.size;
const pattern = {
x: 0, y: 0, width: 1, height: 1,
viewBox: `0 0 ${Math.round(size[0])} ${Math.round(size[1])}`,
patternUnits: 'objectBoundingBox',
path: this._fillSketch(drawing, o)
};
path = {
d: drawing.path,
stroke: 'none',
strokeWidth: 0,
pattern: pattern
};
break;
}
}
if (path) {
paths.push(path);
}
}
return paths;
}

_fillSketch(drawing, o) {
let fweight = o.fillWeight;
if (fweight < 0) {
fweight = o.strokeWidth / 2;
}
return {
d: this.opsToPath(drawing),
stroke: o.fill,
strokeWidth: fweight,
fill: 'none'
};
}

opsToPath(drawing) {
let path = '';
for (let item of drawing.ops) {
const data = item.data;
switch (item.op) {
case 'move':
path += `M${data[0]} ${data[1]} `;
break;
case 'bcurveTo':
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
break;
case 'qcurveTo':
path += `Q${data[0]} ${data[1]}, ${data[2]} ${data[3]} `;
break;
case 'lineTo':
path += `L${data[0]} ${data[1]} `;
break;
}
}
return path.trim();
}

_computePathSize(d) {
let size = [0, 0];
if (self.document) {
Expand Down
20 changes: 1 addition & 19 deletions src/svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,25 +154,7 @@ export class RoughSVG {
}

_opsToPath(drawing) {
let path = '';
for (let item of drawing.ops) {
const data = item.data;
switch (item.op) {
case 'move':
path += `M${data[0]} ${data[1]} `;
break;
case 'bcurveTo':
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
break;
case 'qcurveTo':
path += `Q${data[0]} ${data[1]}, ${data[2]} ${data[3]} `;
break;
case 'lineTo':
path += `L${data[0]} ${data[1]} `;
break;
}
}
return path.trim();
return this.gen.opsToPath(drawing);
}
}

Expand Down

0 comments on commit 6876ac4

Please sign in to comment.