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

Merge pull request #218 from rough-stuff/shape-filling

Browse Source 
Shape filling
This commit is contained in:
Preet
2023-09-27 10:37:12 -07:00
committed by GitHub
parent b8040297a5 7944f1cb95
commit b08ee456a5
7 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
package-lock.json generated
View File

@@ -1,15 +1,15 @@
{
"name": "roughjs",
"version": "4.5.2",
"version": "4.6.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "roughjs",
"version": "4.5.2",
"version": "4.6.4",
"license": "MIT",
"dependencies": {
"hachure-fill": "^0.4.0",
"hachure-fill": "^0.5.2",
"path-data-parser": "^0.1.0",
"points-on-curve": "^0.2.0",
"points-on-path": "^0.2.1"
@@ -353,9 +353,9 @@
"dev": true
},
"node_modules/@types/node": {
"version": "20.6.3",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.3.tgz",
"integrity": "sha512-HksnYH4Ljr4VQgEy2lTStbCKv/P590tmPe5HqOnv9Gprffgv5WXAY+Y5Gqniu0GGqeTCUdBnzC3QSrzPkBkAMA==",
"version": "20.7.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.7.0.tgz",
"integrity": "sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg==",
"dev": true
},
"node_modules/@types/resolve": {
@@ -1242,9 +1242,9 @@
}
},
"node_modules/hachure-fill": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.4.0.tgz",
"integrity": "sha512-adAAzV4vgE5BBkeimtSPMkTARn6XFoV8vhel4C4S/B+cC7XNZGXyU3Fb2zNBz0PgYHkLLWWSL0CRSSnC+Xcw5g=="
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
"integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="
},
"node_modules/has": {
"version": "1.0.3",
@@ -2455,9 +2455,9 @@
"dev": true
},
"@types/node": {
"version": "20.6.3",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.3.tgz",
"integrity": "sha512-HksnYH4Ljr4VQgEy2lTStbCKv/P590tmPe5HqOnv9Gprffgv5WXAY+Y5Gqniu0GGqeTCUdBnzC3QSrzPkBkAMA==",
"version": "20.7.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.7.0.tgz",
"integrity": "sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg==",
"dev": true
},
"@types/resolve": {
@@ -3093,9 +3093,9 @@
}
},
"hachure-fill": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.4.0.tgz",
"integrity": "sha512-adAAzV4vgE5BBkeimtSPMkTARn6XFoV8vhel4C4S/B+cC7XNZGXyU3Fb2zNBz0PgYHkLLWWSL0CRSSnC+Xcw5g=="
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
"integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="
},
"has": {
"version": "1.0.3",

4
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "roughjs",
"version": "4.6.3",
"version": "4.6.4",
"description": "Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance.",
"main": "bundled/rough.cjs.js",
"module": "bundled/rough.esm.js",
@@ -40,7 +40,7 @@
"typescript": "^4.5.3"
},
"dependencies": {
"hachure-fill": "^0.4.0",
"hachure-fill": "^0.5.2",
"path-data-parser": "^0.1.0",
"points-on-curve": "^0.2.0",
"points-on-path": "^0.2.1"

2
src/core.ts
View File

@@ -39,6 +39,7 @@ export interface Options {
disableMultiStrokeFill?: boolean;
preserveVertices?: boolean;
fixedDecimalPlaceDigits?: number;
fillShapeRoughnessGain?: number;
}
export interface ResolvedOptions extends Options {
@@ -62,6 +63,7 @@ export interface ResolvedOptions extends Options {
disableMultiStroke: boolean;
disableMultiStrokeFill: boolean;
preserveVertices: boolean;
fillShapeRoughnessGain: number;
}
export declare type OpType = 'move' | 'bcurveTo' | 'lineTo';

8
src/fillers/scan-line-hachure.ts
View File

@@ -9,5 +9,11 @@ export function polygonHachureLines(polygonList: Point[][], o: ResolvedOptions):
gap = o.strokeWidth * 4;
}
gap = Math.max(gap, 0.1);
return hachureLines(polygonList, gap, angle);
let skipOffset = 1;
if (o.roughness >= 1) {
if ((o.randomizer?.next() || Math.random()) > 0.7) {
skipOffset = gap;
}
}
return hachureLines(polygonList, gap, angle, skipOffset || 1);
}

5
src/generator.ts
View File

@@ -31,6 +31,7 @@ export class RoughGenerator {
disableMultiStroke: false,
disableMultiStrokeFill: false,
preserveVertices: false,
fillShapeRoughnessGain: 0.8,
};
constructor(config?: Config) {
@@ -133,7 +134,7 @@ export class RoughGenerator {
const outline = curve(points, o);
if (o.fill && o.fill !== NOS && points.length >= 3) {
if (o.fillStyle === 'solid') {
const fillShape = curve(points, { ...o, disableMultiStroke: true });
const fillShape = curve(points, { ...o, disableMultiStroke: true, roughness: o.roughness ? (o.roughness + o.fillShapeRoughnessGain) : 0 });
paths.push({
type: 'fillPath',
ops: this._mergedShape(fillShape.ops),
@@ -185,7 +186,7 @@ export class RoughGenerator {
if (hasFill) {
if (o.fillStyle === 'solid') {
if (sets.length === 1) {
const fillShape = svgPath(d, { ...o, disableMultiStroke: true });
const fillShape = svgPath(d, { ...o, disableMultiStroke: true, roughness: o.roughness ? (o.roughness + o.fillShapeRoughnessGain) : 0 });
paths.push({
type: 'fillPath',
ops: this._mergedShape(fillShape.ops),

2
visual-tests/canvas/curve3.html
View File

@@ -16,7 +16,7 @@
const rc = rough.canvas(canvas);
const ctx = canvas.getContext('2d');
const ops = { fill: 'red', fillStyle: 'solid', roughness: 1.2 };
const ops = { fill: 'red', fillStyle: 'solid', roughness: 1 };
rc.curve([
[10, 10],

5
visual-tests/canvas/path7.html
View File

@@ -20,8 +20,9 @@
const ops = {
preserveVertices: true,
fill: 'red',
fillStyle: 'solid',
roughness: roughness,
fillStyle: 'hachure',
hachureGap: 6,
roughness: roughness
}
const ctx = rc.ctx;