github/rough
1
1
Fork 0
mirror of https://github.com/rough-stuff/rough.git synced 2026-04-22 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix dot rendering when roughness < 1

Browse Source
This commit is contained in:
Preet
2021-11-04 13:56:34 -07:00
parent fafb44b18e
commit 9feb0a408a
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/fillers/dot-filler.ts
View File

@@ -11,7 +11,7 @@ export class DotFiller implements PatternFiller {
}
fillPolygon(points: Point[], o: ResolvedOptions): OpSet {
o = Object.assign({}, o, { curveStepCount: 4, hachureAngle: 0, roughness: 1 });
o = Object.assign({}, o, { hachureAngle: 0 });
const lines = polygonHachureLines(points, o);
return this.dotsOnLines(lines, o);
}
@@ -38,8 +38,8 @@ export class DotFiller implements PatternFiller {
for (let i = 0; i < count; i++) {
const y = minY + offset + (i * gap);
const cx = this.helper.randOffsetWithRange(x - ro, x + ro, o);
const cy = this.helper.randOffsetWithRange(y - ro, y + ro, o);
const cx = (x - ro) + Math.random() * 2 * ro;
const cy = (y - ro) + Math.random() * 2 * ro;
const el = this.helper.ellipse(cx, cy, fweight, fweight, o);
ops.push(...el.ops);
}

15
visual-tests/canvas/rectangle.html
View File

@@ -15,6 +15,19 @@
const canvas = document.querySelector('canvas');
const rc = rough.canvas(canvas);
// const ctx = canvas.getContext('2d');
// ctx.scale(20, 20);
// rc.rectangle(5, 5, 5, 5, {
// fill: 'red', roughness: 0.1,
// strokeWidth: 0.1,
// fillWeight: 0.05,
// hachureGap: 0.5,
// fillStyle: 'dots',
// curveFitting: 1,
// curveTightness: 0.7
// });
rc.rectangle(10, 10, 80, 80);
rc.rectangle(110, 10, 80, 80, { fill: 'red' });
rc.rectangle(210, 10, 80, 80, { fill: 'pink', fillStyle: 'solid' });
@@ -22,7 +35,7 @@
rc.rectangle(410, 10, 80, 80, { fill: 'red', fillStyle: 'zigzag', hachureGap: 8 });
rc.rectangle(510, 10, 80, 80, { fill: 'red', fillStyle: 'dots' });
rc.rectangle(10, 110, 80, 80, { roughness: 2 });
rc.rectangle(10, 110, 80, 80, { roughness: 0 });
rc.rectangle(110, 110, 80, 80, { fill: 'red', stroke: 'blue', hachureAngle: 0, strokeWidth: 3 });
rc.rectangle(210, 110, 80, 80, { fill: 'pink', fillWeight: 5, hachureGap: 10, hachureAngle: 90 });