diff --git a/dist/rough.2.0.js b/dist/rough.2.0.js index 4a0c962..73e8fff 100644 --- a/dist/rough.2.0.js +++ b/dist/rough.2.0.js @@ -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; } diff --git a/examples/2.0/test.html b/examples/2.0/test.html index 010ef1f..9c72576 100644 --- a/examples/2.0/test.html +++ b/examples/2.0/test.html @@ -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 + }); })(); diff --git a/src2/canvas.js b/src2/canvas.js index 26e613a..e29a9ec 100644 --- a/src2/canvas.js +++ b/src2/canvas.js @@ -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; } diff --git a/src2/core/renderer.js b/src2/core/renderer.js index d4e94b9..6359637 100644 --- a/src2/core/renderer.js +++ b/src2/core/renderer.js @@ -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 = [];