github/rough
1
1
Fork 0
mirror of https://github.com/rough-stuff/rough.git synced 2026-01-14 08:57:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

curves through points

Browse Source
This commit is contained in:
Preet Shihn
2018-03-05 13:58:19 -08:00
parent 6d8ff0ef29
commit 498ebfa180
4 changed files with 89 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
dist/rough.2.0.js vendored
View File

@@ -243,6 +243,12 @@ class RoughRenderer {
return this.polygon(points, o);
}
curve(points, o) {
let o1 = this._curveWithOffset(points, 1 * (1 + o.roughness * 0.2), o);
let o2 = this._curveWithOffset(points, 1.5 * (1 + o.roughness * 0.22), o);
return { type: 'path', ops: o1.concat(o2) };
}
ellipse(x, y, width, height, o) {
const increment = (Math.PI * 2) / o.curveStepCount;
let rx = Math.abs(width / 2);
@@ -553,6 +559,31 @@ class RoughRenderer {
return this._curve(points, null, o);
}
_curveWithOffset(points, offset, o) {
const ps = [];
ps.push([
points[0][0] + this._getOffset(-offset, offset, o),
points[0][1] + this._getOffset(-offset, offset, o),
]);
ps.push([
points[0][0] + this._getOffset(-offset, offset, o),
points[0][1] + this._getOffset(-offset, offset, o),
]);
for (let i = 1; i < points.length; i++) {
ps.push([
points[i][0] + this._getOffset(-offset, offset, o),
points[i][1] + this._getOffset(-offset, offset, o),
]);
if (i === (points.length - 1)) {
ps.push([
points[i][0] + this._getOffset(-offset, offset, o),
points[i][1] + this._getOffset(-offset, offset, o),
]);
}
}
return this._curve(ps, null, o);
}
_arc(increment, cx, cy, rx, ry, strt, stp, offset, o) {
const radOffset = strt + this._getOffset(-0.1, 0.1, o);
const points = [];
@@ -714,10 +745,15 @@ class RoughCanvas {
this._draw(this.ctx, drawing, o);
}
curve(points) {
// TODO:
async curve(points, options) {
let o = this._options(options);
let lib = await this.lib();
let drawing = await lib.curve(points, o);
this._draw(this.ctx, drawing, o);
}
// private
_options(options) {
return options ? Object.assign({}, this.defaultOptions, options) : this.defaultOptions;
}

13
examples/2.0/test.html
View File

@@ -66,6 +66,19 @@
stroke: 'blue', strokeWidth: 2,
fill: 'rgba(255,0,255,0.4)'
});
// draw sine curve
let points = [];
for (let i = 0; i < 20; i++) {
// 4pi - 400px
let x = (400 / 20) * i + 10;
let xdeg = (Math.PI / 100) * x;
let y = Math.round(Math.sin(xdeg) * 90) + 500;
points.push([x, y]);
}
await rough.curve(points, {
roughness: 1.2, stroke: 'red', strokeWidth: 3
});
})();
</script>
</body>

9
src2/canvas.js
View File

@@ -124,10 +124,15 @@ export default class RoughCanvas {
this._draw(this.ctx, drawing, o);
}
curve(points) {
// TODO:
async curve(points, options) {
let o = this._options(options);
let lib = await this.lib();
let drawing = await lib.curve(points, o);
this._draw(this.ctx, drawing, o);
}
// private
_options(options) {
return options ? Object.assign({}, this.defaultOptions, options) : this.defaultOptions;
}

31
src2/core/renderer.js
View File

@@ -42,6 +42,12 @@ export class RoughRenderer {
return this.polygon(points, o);
}
curve(points, o) {
let o1 = this._curveWithOffset(points, 1 * (1 + o.roughness * 0.2), o);
let o2 = this._curveWithOffset(points, 1.5 * (1 + o.roughness * 0.22), o);
return { type: 'path', ops: o1.concat(o2) };
}
ellipse(x, y, width, height, o) {
const increment = (Math.PI * 2) / o.curveStepCount;
let rx = Math.abs(width / 2);
@@ -353,6 +359,31 @@ export class RoughRenderer {
return this._curve(points, null, o);
}
_curveWithOffset(points, offset, o) {
const ps = [];
ps.push([
points[0][0] + this._getOffset(-offset, offset, o),
points[0][1] + this._getOffset(-offset, offset, o),
]);
ps.push([
points[0][0] + this._getOffset(-offset, offset, o),
points[0][1] + this._getOffset(-offset, offset, o),
]);
for (let i = 1; i < points.length; i++) {
ps.push([
points[i][0] + this._getOffset(-offset, offset, o),
points[i][1] + this._getOffset(-offset, offset, o),
]);
if (i === (points.length - 1)) {
ps.push([
points[i][0] + this._getOffset(-offset, offset, o),
points[i][1] + this._getOffset(-offset, offset, o),
]);
}
}
return this._curve(ps, null, o);
}
_arc(increment, cx, cy, rx, ry, strt, stp, offset, o) {
const radOffset = strt + this._getOffset(-0.1, 0.1, o);
const points = [];