fix solid fills for curves

swaitw · Sep 23, 2023 · e725f5f · e725f5f
1 parent 98034d3
commit e725f5f
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roughjs",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance.",
   "main": "bundled/rough.cjs.js",
   "module": "bundled/rough.esm.js",

diff --git a/src/generator.ts b/src/generator.ts
@@ -137,7 +137,11 @@ export class RoughGenerator {
       const bcurve = curveToBezier(points);
       const polyPoints = pointsOnBezierCurves(bcurve, 10, (1 + o.roughness) / 2);
       if (o.fillStyle === 'solid') {
-        paths.push(solidFillPolygon([polyPoints], o));
+        const shape: OpSet = {
+          type: 'fillPath',
+          ops: this._mergedShape(this._splicePath(outline.ops)),
+        };
+        paths.push(shape);
       } else {
         paths.push(patternFillPolygons([polyPoints], o));
       }

diff --git a/visual-tests/canvas/curve2.html b/visual-tests/canvas/curve2.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>RoughJS Curve</title>
+</head>
+
+<body>
+  <canvas width="800" height="800"></canvas>
+
+  <script type="module">
+    import rough from '../../bin/rough.js';
+    const canvas = document.querySelector('canvas');
+    const rc = rough.canvas(canvas);
+    const ctx = canvas.getContext('2d');
+
+    rc.curve([
+      [10, 10],
+      [200, 10],
+      [100, 100],
+      [100, 50],
+      [300, 100],
+      [60, 200]
+    ], { stroke: 'black', strokeWidth: 2, fill: 'red', hachureGap: 10 });
+
+    ctx.translate(0, 210);
+    rc.curve([
+      [10, 10],
+      [200, 10],
+      [100, 100],
+      [100, 50],
+      [300, 100],
+      [60, 200]
+    ], { fill: 'red', fillStyle: 'solid', roughness: 3 });
+
+    ctx.translate(0, 210);
+    rc.curve([
+      [10, 10],
+      [200, 10],
+      [100, 100],
+      [100, 50],
+      [300, 100],
+      [60, 200]
+    ], { fill: 'red', fillStyle: 'cross-hatch', hachureGap: 8 });
+
+    ctx.translate(300, 0);
+
+
+    ctx.translate(0, -210);
+    rc.curve([
+      [10, 10],
+      [200, 10],
+      [100, 100],
+      [100, 50],
+      [300, 100],
+      [60, 200]
+    ], { fill: 'red', fillStyle: 'solid', stroke: 'none', roughness: 3 });
+
+    ctx.translate(0, -210);
+    rc.curve([
+      [10, 10],
+      [200, 10],
+      [100, 100],
+      [100, 50],
+      [300, 100],
+      [60, 200]
+    ], { stroke: 'black', strokeWidth: 2, fill: 'red', hachureGap: 10, stroke: 'none' });
+
+  </script>
+</body>
+
+</html>