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

curve layer

Browse Source
This commit is contained in:
Preet
2023-09-25 16:15:03 -07:00
parent 70dc8f1007
commit 5ef726ab80
2 changed files with 82 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/generator.ts
View File

@@ -132,15 +132,15 @@ export class RoughGenerator {
const paths: OpSet[] = [];
const outline = curve(points, o);
if (o.fill && o.fill !== NOS && points.length >= 3) {
const bcurve = curveToBezier(points);
const polyPoints = pointsOnBezierCurves(bcurve, 10, (1 + o.roughness) / 2);
if (o.fillStyle === 'solid') {
const shape: OpSet = {
const fillShape = curve(points, { ...o, disableMultiStroke: true });
paths.push({
type: 'fillPath',
ops: this._mergedShape(this._splicePath(outline.ops)),
};
paths.push(shape);
ops: this._mergedShape(fillShape.ops),
});
} else {
const bcurve = curveToBezier(points);
const polyPoints = pointsOnBezierCurves(bcurve, 10, (1 + o.roughness) / 2);
paths.push(patternFillPolygons([polyPoints], o));
}
}

76
visual-tests/canvas/curve3.html Normal file
View File

@@ -0,0 +1,76 @@
<!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');
const ops = { fill: 'red', fillStyle: 'solid', roughness: 1.2 };
rc.curve([
[10, 10],
[200, 10],
[100, 100],
[100, 50],
[300, 100],
[60, 200]
], ops);
ctx.translate(0, 210);
rc.curve([
[10, 10],
[200, 10],
[100, 100],
[100, 50],
[300, 100],
[60, 200]
], ops);
ctx.translate(0, 210);
rc.curve([
[10, 10],
[200, 10],
[100, 100],
[100, 50],
[300, 100],
[60, 200]
], ops);
ctx.translate(300, 0);
ctx.translate(0, -210);
rc.curve([
[10, 10],
[200, 10],
[100, 100],
[100, 50],
[300, 100],
[60, 200]
], ops);
ctx.translate(0, -210);
rc.curve([
[10, 10],
[200, 10],
[100, 100],
[100, 50],
[300, 100],
[60, 200]
], ops);
</script>
</body>
</html>