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

.

Browse Source
This commit is contained in:
Preet Shihn
2018-03-11 18:43:52 -07:00
parent 71d8de1bad
commit 3dddc39779
4 changed files with 42 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
dist/rough.js vendored
View File

@@ -651,12 +651,8 @@ class PathFitter {
class RoughRenderer {
line(x1, y1, x2, y2, o) {
let o1 = this._line(x1, y1, x2, y2, o, true, false);
let o2 = this._line(x1, y1, x2, y2, o, true, true);
return {
type: 'path',
ops: o1.concat(o2)
};
let ops = this._doubleLine(x1, y1, x2, y2, o);
return { type: 'path', ops };
}
linearPath(points, close, o) {
@@ -664,14 +660,10 @@ class RoughRenderer {
if (len > 2) {
let ops = [];
for (let i = 0; i < (len - 1); i++) {
let o1 = this._line(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o, true, false);
let o2 = this._line(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o));
}
if (close) {
let o1 = this._line(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o, true, false);
let o2 = this._line(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o));
}
return { type: 'path', ops };
} else if (len === 2) {
@@ -731,10 +723,8 @@ class RoughRenderer {
let ops = o1.concat(o2);
if (closed) {
if (roughClosure) {
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o, true, false));
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o, true, true));
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o, true, false));
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o, true, true));
ops = ops.concat(this._doubleLine(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o));
ops = ops.concat(this._doubleLine(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o));
} else {
ops.push({ op: 'lineTo', data: [cx, cy] });
ops.push({ op: 'lineTo', data: [cx + rx * Math.cos(strt), cy + ry * Math.sin(strt)] });
@@ -822,9 +812,7 @@ class RoughRenderer {
if (i < (lines.length - 1)) {
let p1 = lines[i];
let p2 = lines[i + 1];
const o1 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, false);
const o2 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(p1[0], p1[1], p2[0], p2[1], o));
}
}
}
@@ -860,9 +848,7 @@ class RoughRenderer {
halfLen = Math.sqrt((rx * rx) - (cx - xPos) * (cx - xPos));
let p1 = this._affine(xPos, cy - halfLen, cx, cy, sinAnglePrime, cosAnglePrime, aspectRatio);
let p2 = this._affine(xPos, cy + halfLen, cx, cy, sinAnglePrime, cosAnglePrime, aspectRatio);
const o1 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, false);
const o2 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(p1[0], p1[1], p2[0], p2[1], o));
}
return { type: 'path', ops };
}
@@ -944,10 +930,8 @@ class RoughRenderer {
x += path.x;
y += path.y;
}
const o1 = this._line(path.x, path.y, x, y, o, true, false);
const o2 = this._line(path.x, path.y, x, y, o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, x, y, o));
path.setPosition(x, y);
ops = ops.concat(o1, o2);
}
break;
}
@@ -959,10 +943,8 @@ class RoughRenderer {
if (delta) {
x += path.x;
}
const o1 = this._line(path.x, path.y, x, path.y, o, true, false);
const o2 = this._line(path.x, path.y, x, path.y, o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, x, path.y, o));
path.setPosition(x, path.y);
ops = ops.concat(o1, o2);
}
break;
}
@@ -974,20 +956,16 @@ class RoughRenderer {
if (delta) {
y += path.y;
}
const o1 = this._line(path.x, path.y, path.x, y, o, true, false);
const o2 = this._line(path.x, path.y, path.x, y, o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, path.x, y, o));
path.setPosition(path.x, y);
ops = ops.concat(o1, o2);
}
break;
}
case 'Z':
case 'z': {
if (path.first) {
const o1 = this._line(path.x, path.y, path.first[0], path.first[1], o, true, false);
const o2 = this._line(path.x, path.y, path.first[0], path.first[1], o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, path.first[0], path.first[1], o));
path.setPosition(path.first[0], path.first[1]);
ops = ops.concat(o1, o2);
path.first = null;
}
break;
@@ -1147,10 +1125,8 @@ class RoughRenderer {
break;
}
if (rx == 0 || ry == 0) {
const o1 = this._line(path.x, path.y, x, y, true, false);
const o2 = this._line(path.x, path.y, x, y, true, false);
ops = ops.concat(this._doubleLine(path.x, path.y, x, y, o));
path.setPosition(x, y);
ops = ops.concat(o1, o2);
} else {
let ro = o.maxRandomnessOffset || 0;
for (let i = 0; i < 1; i++) {
@@ -1196,6 +1172,12 @@ class RoughRenderer {
];
}
_doubleLine(x1, y1, x2, y2, o) {
const o1 = this._line(x1, y1, x2, y2, o, true, false);
const o2 = this._line(x1, y1, x2, y2, o, true, true);
return o1.concat(o2);
}
_line(x1, y1, x2, y2, o, move, overlay) {
const lengthSq = Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2);
let offset = o.maxRandomnessOffset || 0;
@@ -1281,9 +1263,7 @@ class RoughRenderer {
points[2][0], points[2][1]]
});
} else if (len === 2) {
let o1 = this._line(points[0][0], points[0][1], points[1][0], points[1][1], o, true, false);
let o2 = this._line(points[0][0], points[0][1], points[1][0], points[1][1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(points[0][0], points[0][1], points[1][0], points[1][1], o));
}
return ops;
}

2
dist/rough.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
examples/2.0/test2.html
View File

@@ -24,7 +24,7 @@
const rough = new RoughCanvas(document.getElementById('canvas'));
await rough.path('M400 100 h 90 v 90 h -90z', {
stroke: 'red',
strokeWidth: '2',
strokeWidth: '3',
fill: 'rgba(0,0,255,0.2)',
fillStyle: 'solid'
});

60
src/renderer.js
View File

@@ -4,12 +4,8 @@ import { RoughPath, RoughArcConverter, PathFitter } from './path.js';
export class RoughRenderer {
line(x1, y1, x2, y2, o) {
let o1 = this._line(x1, y1, x2, y2, o, true, false);
let o2 = this._line(x1, y1, x2, y2, o, true, true);
return {
type: 'path',
ops: o1.concat(o2)
};
let ops = this._doubleLine(x1, y1, x2, y2, o);
return { type: 'path', ops };
}
linearPath(points, close, o) {
@@ -17,14 +13,10 @@ export class RoughRenderer {
if (len > 2) {
let ops = [];
for (let i = 0; i < (len - 1); i++) {
let o1 = this._line(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o, true, false);
let o2 = this._line(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o));
}
if (close) {
let o1 = this._line(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o, true, false);
let o2 = this._line(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o));
}
return { type: 'path', ops };
} else if (len === 2) {
@@ -84,10 +76,8 @@ export class RoughRenderer {
let ops = o1.concat(o2);
if (closed) {
if (roughClosure) {
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o, true, false));
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o, true, true));
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o, true, false));
ops = ops.concat(this._line(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o, true, true));
ops = ops.concat(this._doubleLine(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o));
ops = ops.concat(this._doubleLine(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o));
} else {
ops.push({ op: 'lineTo', data: [cx, cy] });
ops.push({ op: 'lineTo', data: [cx + rx * Math.cos(strt), cy + ry * Math.sin(strt)] });
@@ -176,9 +166,7 @@ export class RoughRenderer {
if (i < (lines.length - 1)) {
let p1 = lines[i];
let p2 = lines[i + 1];
const o1 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, false);
const o2 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(p1[0], p1[1], p2[0], p2[1], o));
}
}
}
@@ -214,9 +202,7 @@ export class RoughRenderer {
halfLen = Math.sqrt((rx * rx) - (cx - xPos) * (cx - xPos));
let p1 = this._affine(xPos, cy - halfLen, cx, cy, sinAnglePrime, cosAnglePrime, aspectRatio);
let p2 = this._affine(xPos, cy + halfLen, cx, cy, sinAnglePrime, cosAnglePrime, aspectRatio);
const o1 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, false);
const o2 = this._line(p1[0], p1[1], p2[0], p2[1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(p1[0], p1[1], p2[0], p2[1], o));
}
return { type: 'path', ops };
}
@@ -298,10 +284,8 @@ export class RoughRenderer {
x += path.x;
y += path.y;
}
const o1 = this._line(path.x, path.y, x, y, o, true, false);
const o2 = this._line(path.x, path.y, x, y, o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, x, y, o));
path.setPosition(x, y);
ops = ops.concat(o1, o2);
}
break;
}
@@ -313,10 +297,8 @@ export class RoughRenderer {
if (delta) {
x += path.x;
}
const o1 = this._line(path.x, path.y, x, path.y, o, true, false);
const o2 = this._line(path.x, path.y, x, path.y, o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, x, path.y, o));
path.setPosition(x, path.y);
ops = ops.concat(o1, o2);
}
break;
}
@@ -328,20 +310,16 @@ export class RoughRenderer {
if (delta) {
y += path.y;
}
const o1 = this._line(path.x, path.y, path.x, y, o, true, false);
const o2 = this._line(path.x, path.y, path.x, y, o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, path.x, y, o));
path.setPosition(path.x, y);
ops = ops.concat(o1, o2);
}
break;
}
case 'Z':
case 'z': {
if (path.first) {
const o1 = this._line(path.x, path.y, path.first[0], path.first[1], o, true, false);
const o2 = this._line(path.x, path.y, path.first[0], path.first[1], o, true, true);
ops = ops.concat(this._doubleLine(path.x, path.y, path.first[0], path.first[1], o));
path.setPosition(path.first[0], path.first[1]);
ops = ops.concat(o1, o2);
path.first = null;
}
break;
@@ -501,10 +479,8 @@ export class RoughRenderer {
break;
}
if (rx == 0 || ry == 0) {
const o1 = this._line(path.x, path.y, x, y, true, false);
const o2 = this._line(path.x, path.y, x, y, true, false);
ops = ops.concat(this._doubleLine(path.x, path.y, x, y, o));
path.setPosition(x, y);
ops = ops.concat(o1, o2);
} else {
let final = null;
let ro = o.maxRandomnessOffset || 0;
@@ -551,6 +527,12 @@ export class RoughRenderer {
];
}
_doubleLine(x1, y1, x2, y2, o) {
const o1 = this._line(x1, y1, x2, y2, o, true, false);
const o2 = this._line(x1, y1, x2, y2, o, true, true);
return o1.concat(o2);
}
_line(x1, y1, x2, y2, o, move, overlay) {
const lengthSq = Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2);
let offset = o.maxRandomnessOffset || 0;
@@ -636,9 +618,7 @@ export class RoughRenderer {
points[2][0], points[2][1]]
});
} else if (len === 2) {
let o1 = this._line(points[0][0], points[0][1], points[1][0], points[1][1], o, true, false);
let o2 = this._line(points[0][0], points[0][1], points[1][0], points[1][1], o, true, true);
ops = ops.concat(o1, o2);
ops = ops.concat(this._doubleLine(points[0][0], points[0][1], points[1][0], points[1][1], o));
}
return ops;
}