mirror of
https://github.com/rough-stuff/rough.git
synced 2026-01-14 17:07:58 -05:00
2369 lines
96 KiB
JavaScript
2369 lines
96 KiB
JavaScript
var rough = (function () {
|
|
'use strict';
|
|
|
|
function isType(token, type) {
|
|
return token.type === type;
|
|
}
|
|
const PARAMS = {
|
|
A: 7,
|
|
a: 7,
|
|
C: 6,
|
|
c: 6,
|
|
H: 1,
|
|
h: 1,
|
|
L: 2,
|
|
l: 2,
|
|
M: 2,
|
|
m: 2,
|
|
Q: 4,
|
|
q: 4,
|
|
S: 4,
|
|
s: 4,
|
|
T: 4,
|
|
t: 2,
|
|
V: 1,
|
|
v: 1,
|
|
Z: 0,
|
|
z: 0
|
|
};
|
|
class ParsedPath {
|
|
constructor(d) {
|
|
this.COMMAND = 0;
|
|
this.NUMBER = 1;
|
|
this.EOD = 2;
|
|
this.segments = [];
|
|
this.parseData(d);
|
|
this.processPoints();
|
|
}
|
|
tokenize(d) {
|
|
const tokens = new Array();
|
|
while (d !== '') {
|
|
if (d.match(/^([ \t\r\n,]+)/)) {
|
|
d = d.substr(RegExp.$1.length);
|
|
}
|
|
else if (d.match(/^([aAcChHlLmMqQsStTvVzZ])/)) {
|
|
tokens[tokens.length] = { type: this.COMMAND, text: RegExp.$1 };
|
|
d = d.substr(RegExp.$1.length);
|
|
}
|
|
else if (d.match(/^(([-+]?[0-9]+(\.[0-9]*)?|[-+]?\.[0-9]+)([eE][-+]?[0-9]+)?)/)) {
|
|
tokens[tokens.length] = { type: this.NUMBER, text: `${parseFloat(RegExp.$1)}` };
|
|
d = d.substr(RegExp.$1.length);
|
|
}
|
|
else {
|
|
console.error('Unrecognized segment command: ' + d);
|
|
return [];
|
|
}
|
|
}
|
|
tokens[tokens.length] = { type: this.EOD, text: '' };
|
|
return tokens;
|
|
}
|
|
parseData(d) {
|
|
const tokens = this.tokenize(d);
|
|
let index = 0;
|
|
let token = tokens[index];
|
|
let mode = 'BOD';
|
|
this.segments = new Array();
|
|
while (!isType(token, this.EOD)) {
|
|
let param_length;
|
|
const params = new Array();
|
|
if (mode === 'BOD') {
|
|
if (token.text === 'M' || token.text === 'm') {
|
|
index++;
|
|
param_length = PARAMS[token.text];
|
|
mode = token.text;
|
|
}
|
|
else {
|
|
this.parseData('M0,0' + d);
|
|
return;
|
|
}
|
|
}
|
|
else {
|
|
if (isType(token, this.NUMBER)) {
|
|
param_length = PARAMS[mode];
|
|
}
|
|
else {
|
|
index++;
|
|
param_length = PARAMS[token.text];
|
|
mode = token.text;
|
|
}
|
|
}
|
|
if ((index + param_length) < tokens.length) {
|
|
for (let i = index; i < index + param_length; i++) {
|
|
const numbeToken = tokens[i];
|
|
if (isType(numbeToken, this.NUMBER)) {
|
|
params[params.length] = +numbeToken.text;
|
|
}
|
|
else {
|
|
console.error('Parameter type is not a number: ' + mode + ',' + numbeToken.text);
|
|
return;
|
|
}
|
|
}
|
|
if (typeof PARAMS[mode] === 'number') {
|
|
const segment = { key: mode, data: params };
|
|
this.segments.push(segment);
|
|
index += param_length;
|
|
token = tokens[index];
|
|
if (mode === 'M')
|
|
mode = 'L';
|
|
if (mode === 'm')
|
|
mode = 'l';
|
|
}
|
|
else {
|
|
console.error('Unsupported segment type: ' + mode);
|
|
return;
|
|
}
|
|
}
|
|
else {
|
|
console.error('Path data ended before all parameters were found');
|
|
}
|
|
}
|
|
}
|
|
get closed() {
|
|
if (typeof this._closed === 'undefined') {
|
|
this._closed = false;
|
|
for (const s of this.segments) {
|
|
if (s.key.toLowerCase() === 'z') {
|
|
this._closed = true;
|
|
}
|
|
}
|
|
}
|
|
return this._closed;
|
|
}
|
|
processPoints() {
|
|
let first = null;
|
|
let currentPoint = [0, 0];
|
|
for (let i = 0; i < this.segments.length; i++) {
|
|
const s = this.segments[i];
|
|
switch (s.key) {
|
|
case 'M':
|
|
case 'L':
|
|
case 'T':
|
|
s.point = [s.data[0], s.data[1]];
|
|
break;
|
|
case 'm':
|
|
case 'l':
|
|
case 't':
|
|
s.point = [s.data[0] + currentPoint[0], s.data[1] + currentPoint[1]];
|
|
break;
|
|
case 'H':
|
|
s.point = [s.data[0], currentPoint[1]];
|
|
break;
|
|
case 'h':
|
|
s.point = [s.data[0] + currentPoint[0], currentPoint[1]];
|
|
break;
|
|
case 'V':
|
|
s.point = [currentPoint[0], s.data[0]];
|
|
break;
|
|
case 'v':
|
|
s.point = [currentPoint[0], s.data[0] + currentPoint[1]];
|
|
break;
|
|
case 'z':
|
|
case 'Z':
|
|
if (first) {
|
|
s.point = [first[0], first[1]];
|
|
}
|
|
break;
|
|
case 'C':
|
|
s.point = [s.data[4], s.data[5]];
|
|
break;
|
|
case 'c':
|
|
s.point = [s.data[4] + currentPoint[0], s.data[5] + currentPoint[1]];
|
|
break;
|
|
case 'S':
|
|
s.point = [s.data[2], s.data[3]];
|
|
break;
|
|
case 's':
|
|
s.point = [s.data[2] + currentPoint[0], s.data[3] + currentPoint[1]];
|
|
break;
|
|
case 'Q':
|
|
s.point = [s.data[2], s.data[3]];
|
|
break;
|
|
case 'q':
|
|
s.point = [s.data[2] + currentPoint[0], s.data[3] + currentPoint[1]];
|
|
break;
|
|
case 'A':
|
|
s.point = [s.data[5], s.data[6]];
|
|
break;
|
|
case 'a':
|
|
s.point = [s.data[5] + currentPoint[0], s.data[6] + currentPoint[1]];
|
|
break;
|
|
}
|
|
if (s.key === 'm' || s.key === 'M') {
|
|
first = null;
|
|
}
|
|
if (s.point) {
|
|
currentPoint = s.point;
|
|
if (!first) {
|
|
first = s.point;
|
|
}
|
|
}
|
|
if (s.key === 'z' || s.key === 'Z') {
|
|
first = null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
class RoughPath {
|
|
constructor(d) {
|
|
this._position = [0, 0];
|
|
this._first = null;
|
|
this.bezierReflectionPoint = null;
|
|
this.quadReflectionPoint = null;
|
|
this.parsed = new ParsedPath(d);
|
|
}
|
|
get segments() {
|
|
return this.parsed.segments;
|
|
}
|
|
get closed() {
|
|
return this.parsed.closed;
|
|
}
|
|
get linearPoints() {
|
|
if (!this._linearPoints) {
|
|
const lp = [];
|
|
let points = [];
|
|
for (const s of this.parsed.segments) {
|
|
const key = s.key.toLowerCase();
|
|
if (key === 'm' || key === 'z') {
|
|
if (points.length) {
|
|
lp.push(points);
|
|
points = [];
|
|
}
|
|
if (key === 'z') {
|
|
continue;
|
|
}
|
|
}
|
|
if (s.point) {
|
|
points.push(s.point);
|
|
}
|
|
}
|
|
if (points.length) {
|
|
lp.push(points);
|
|
points = [];
|
|
}
|
|
this._linearPoints = lp;
|
|
}
|
|
return this._linearPoints;
|
|
}
|
|
get first() {
|
|
return this._first;
|
|
}
|
|
set first(v) {
|
|
this._first = v;
|
|
}
|
|
setPosition(x, y) {
|
|
this._position = [x, y];
|
|
if (!this._first) {
|
|
this._first = [x, y];
|
|
}
|
|
}
|
|
get position() {
|
|
return this._position;
|
|
}
|
|
get x() {
|
|
return this._position[0];
|
|
}
|
|
get y() {
|
|
return this._position[1];
|
|
}
|
|
}
|
|
// Algorithm as described in https://www.w3.org/TR/SVG/implnote.html
|
|
// Code adapted from nsSVGPathDataParser.cpp in Mozilla
|
|
// https://hg.mozilla.org/mozilla-central/file/17156fbebbc8/content/svg/content/src/nsSVGPathDataParser.cpp#l887
|
|
class RoughArcConverter {
|
|
constructor(from, to, radii, angle, largeArcFlag, sweepFlag) {
|
|
this._segIndex = 0;
|
|
this._numSegs = 0;
|
|
this._rx = 0;
|
|
this._ry = 0;
|
|
this._sinPhi = 0;
|
|
this._cosPhi = 0;
|
|
this._C = [0, 0];
|
|
this._theta = 0;
|
|
this._delta = 0;
|
|
this._T = 0;
|
|
this._from = from;
|
|
if (from[0] === to[0] && from[1] === to[1]) {
|
|
return;
|
|
}
|
|
const radPerDeg = Math.PI / 180;
|
|
this._rx = Math.abs(radii[0]);
|
|
this._ry = Math.abs(radii[1]);
|
|
this._sinPhi = Math.sin(angle * radPerDeg);
|
|
this._cosPhi = Math.cos(angle * radPerDeg);
|
|
const x1dash = this._cosPhi * (from[0] - to[0]) / 2.0 + this._sinPhi * (from[1] - to[1]) / 2.0;
|
|
const y1dash = -this._sinPhi * (from[0] - to[0]) / 2.0 + this._cosPhi * (from[1] - to[1]) / 2.0;
|
|
let root = 0;
|
|
const numerator = this._rx * this._rx * this._ry * this._ry - this._rx * this._rx * y1dash * y1dash - this._ry * this._ry * x1dash * x1dash;
|
|
if (numerator < 0) {
|
|
const s = Math.sqrt(1 - (numerator / (this._rx * this._rx * this._ry * this._ry)));
|
|
this._rx = this._rx * s;
|
|
this._ry = this._ry * s;
|
|
root = 0;
|
|
}
|
|
else {
|
|
root = (largeArcFlag === sweepFlag ? -1.0 : 1.0) *
|
|
Math.sqrt(numerator / (this._rx * this._rx * y1dash * y1dash + this._ry * this._ry * x1dash * x1dash));
|
|
}
|
|
const cxdash = root * this._rx * y1dash / this._ry;
|
|
const cydash = -root * this._ry * x1dash / this._rx;
|
|
this._C = [0, 0];
|
|
this._C[0] = this._cosPhi * cxdash - this._sinPhi * cydash + (from[0] + to[0]) / 2.0;
|
|
this._C[1] = this._sinPhi * cxdash + this._cosPhi * cydash + (from[1] + to[1]) / 2.0;
|
|
this._theta = this.calculateVectorAngle(1.0, 0.0, (x1dash - cxdash) / this._rx, (y1dash - cydash) / this._ry);
|
|
let dtheta = this.calculateVectorAngle((x1dash - cxdash) / this._rx, (y1dash - cydash) / this._ry, (-x1dash - cxdash) / this._rx, (-y1dash - cydash) / this._ry);
|
|
if ((!sweepFlag) && (dtheta > 0)) {
|
|
dtheta -= 2 * Math.PI;
|
|
}
|
|
else if (sweepFlag && (dtheta < 0)) {
|
|
dtheta += 2 * Math.PI;
|
|
}
|
|
this._numSegs = Math.ceil(Math.abs(dtheta / (Math.PI / 2)));
|
|
this._delta = dtheta / this._numSegs;
|
|
this._T = (8 / 3) * Math.sin(this._delta / 4) * Math.sin(this._delta / 4) / Math.sin(this._delta / 2);
|
|
}
|
|
getNextSegment() {
|
|
if (this._segIndex === this._numSegs) {
|
|
return null;
|
|
}
|
|
const cosTheta1 = Math.cos(this._theta);
|
|
const sinTheta1 = Math.sin(this._theta);
|
|
const theta2 = this._theta + this._delta;
|
|
const cosTheta2 = Math.cos(theta2);
|
|
const sinTheta2 = Math.sin(theta2);
|
|
const to = [
|
|
this._cosPhi * this._rx * cosTheta2 - this._sinPhi * this._ry * sinTheta2 + this._C[0],
|
|
this._sinPhi * this._rx * cosTheta2 + this._cosPhi * this._ry * sinTheta2 + this._C[1]
|
|
];
|
|
const cp1 = [
|
|
this._from[0] + this._T * (-this._cosPhi * this._rx * sinTheta1 - this._sinPhi * this._ry * cosTheta1),
|
|
this._from[1] + this._T * (-this._sinPhi * this._rx * sinTheta1 + this._cosPhi * this._ry * cosTheta1)
|
|
];
|
|
const cp2 = [
|
|
to[0] + this._T * (this._cosPhi * this._rx * sinTheta2 + this._sinPhi * this._ry * cosTheta2),
|
|
to[1] + this._T * (this._sinPhi * this._rx * sinTheta2 - this._cosPhi * this._ry * cosTheta2)
|
|
];
|
|
this._theta = theta2;
|
|
this._from = [to[0], to[1]];
|
|
this._segIndex++;
|
|
return {
|
|
cp1: cp1,
|
|
cp2: cp2,
|
|
to: to
|
|
};
|
|
}
|
|
calculateVectorAngle(ux, uy, vx, vy) {
|
|
const ta = Math.atan2(uy, ux);
|
|
const tb = Math.atan2(vy, vx);
|
|
if (tb >= ta)
|
|
return tb - ta;
|
|
return 2 * Math.PI - (ta - tb);
|
|
}
|
|
}
|
|
class PathFitter {
|
|
constructor(sets, closed) {
|
|
this.sets = sets;
|
|
this.closed = closed;
|
|
}
|
|
fit(simplification) {
|
|
const outSets = [];
|
|
for (const set of this.sets) {
|
|
const length = set.length;
|
|
let estLength = Math.floor(simplification * length);
|
|
if (estLength < 5) {
|
|
if (length <= 5) {
|
|
continue;
|
|
}
|
|
estLength = 5;
|
|
}
|
|
outSets.push(this.reduce(set, estLength));
|
|
}
|
|
let d = '';
|
|
for (const set of outSets) {
|
|
for (let i = 0; i < set.length; i++) {
|
|
const point = set[i];
|
|
if (i === 0) {
|
|
d += 'M' + point[0] + ',' + point[1];
|
|
}
|
|
else {
|
|
d += 'L' + point[0] + ',' + point[1];
|
|
}
|
|
}
|
|
if (this.closed) {
|
|
d += 'z ';
|
|
}
|
|
}
|
|
return d;
|
|
}
|
|
distance(p1, p2) {
|
|
return Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2));
|
|
}
|
|
reduce(set, count) {
|
|
if (set.length <= count) {
|
|
return set;
|
|
}
|
|
const points = set.slice(0);
|
|
while (points.length > count) {
|
|
let minArea = -1;
|
|
let minIndex = -1;
|
|
for (let i = 1; i < (points.length - 1); i++) {
|
|
const a = this.distance(points[i - 1], points[i]);
|
|
const b = this.distance(points[i], points[i + 1]);
|
|
const c = this.distance(points[i - 1], points[i + 1]);
|
|
const s = (a + b + c) / 2.0;
|
|
const area = Math.sqrt(s * (s - a) * (s - b) * (s - c));
|
|
if ((minArea < 0) || (area < minArea)) {
|
|
minArea = area;
|
|
minIndex = i;
|
|
}
|
|
}
|
|
if (minIndex > 0) {
|
|
points.splice(minIndex, 1);
|
|
}
|
|
else {
|
|
break;
|
|
}
|
|
}
|
|
return points;
|
|
}
|
|
}
|
|
|
|
class Segment {
|
|
constructor(p1, p2) {
|
|
this.xi = Number.MAX_VALUE;
|
|
this.yi = Number.MAX_VALUE;
|
|
this.px1 = p1[0];
|
|
this.py1 = p1[1];
|
|
this.px2 = p2[0];
|
|
this.py2 = p2[1];
|
|
this.a = this.py2 - this.py1;
|
|
this.b = this.px1 - this.px2;
|
|
this.c = this.px2 * this.py1 - this.px1 * this.py2;
|
|
this._undefined = ((this.a === 0) && (this.b === 0) && (this.c === 0));
|
|
}
|
|
isUndefined() {
|
|
return this._undefined;
|
|
}
|
|
intersects(otherSegment) {
|
|
if (this.isUndefined() || otherSegment.isUndefined()) {
|
|
return false;
|
|
}
|
|
let grad1 = Number.MAX_VALUE;
|
|
let grad2 = Number.MAX_VALUE;
|
|
let int1 = 0, int2 = 0;
|
|
const a = this.a, b = this.b, c = this.c;
|
|
if (Math.abs(b) > 0.00001) {
|
|
grad1 = -a / b;
|
|
int1 = -c / b;
|
|
}
|
|
if (Math.abs(otherSegment.b) > 0.00001) {
|
|
grad2 = -otherSegment.a / otherSegment.b;
|
|
int2 = -otherSegment.c / otherSegment.b;
|
|
}
|
|
if (grad1 === Number.MAX_VALUE) {
|
|
if (grad2 === Number.MAX_VALUE) {
|
|
if ((-c / a) !== (-otherSegment.c / otherSegment.a)) {
|
|
return false;
|
|
}
|
|
if ((this.py1 >= Math.min(otherSegment.py1, otherSegment.py2)) && (this.py1 <= Math.max(otherSegment.py1, otherSegment.py2))) {
|
|
this.xi = this.px1;
|
|
this.yi = this.py1;
|
|
return true;
|
|
}
|
|
if ((this.py2 >= Math.min(otherSegment.py1, otherSegment.py2)) && (this.py2 <= Math.max(otherSegment.py1, otherSegment.py2))) {
|
|
this.xi = this.px2;
|
|
this.yi = this.py2;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
this.xi = this.px1;
|
|
this.yi = (grad2 * this.xi + int2);
|
|
if (((this.py1 - this.yi) * (this.yi - this.py2) < -0.00001) || ((otherSegment.py1 - this.yi) * (this.yi - otherSegment.py2) < -0.00001)) {
|
|
return false;
|
|
}
|
|
if (Math.abs(otherSegment.a) < 0.00001) {
|
|
if ((otherSegment.px1 - this.xi) * (this.xi - otherSegment.px2) < -0.00001) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
return true;
|
|
}
|
|
if (grad2 === Number.MAX_VALUE) {
|
|
this.xi = otherSegment.px1;
|
|
this.yi = grad1 * this.xi + int1;
|
|
if (((otherSegment.py1 - this.yi) * (this.yi - otherSegment.py2) < -0.00001) || ((this.py1 - this.yi) * (this.yi - this.py2) < -0.00001)) {
|
|
return false;
|
|
}
|
|
if (Math.abs(a) < 0.00001) {
|
|
if ((this.px1 - this.xi) * (this.xi - this.px2) < -0.00001) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
return true;
|
|
}
|
|
if (grad1 === grad2) {
|
|
if (int1 !== int2) {
|
|
return false;
|
|
}
|
|
if ((this.px1 >= Math.min(otherSegment.px1, otherSegment.px2)) && (this.px1 <= Math.max(otherSegment.py1, otherSegment.py2))) {
|
|
this.xi = this.px1;
|
|
this.yi = this.py1;
|
|
return true;
|
|
}
|
|
if ((this.px2 >= Math.min(otherSegment.px1, otherSegment.px2)) && (this.px2 <= Math.max(otherSegment.px1, otherSegment.px2))) {
|
|
this.xi = this.px2;
|
|
this.yi = this.py2;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
this.xi = ((int2 - int1) / (grad1 - grad2));
|
|
this.yi = (grad1 * this.xi + int1);
|
|
if (((this.px1 - this.xi) * (this.xi - this.px2) < -0.00001) || ((otherSegment.px1 - this.xi) * (this.xi - otherSegment.px2) < -0.00001)) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
|
|
class HachureIterator {
|
|
constructor(top, bottom, left, right, gap, sinAngle, cosAngle, tanAngle) {
|
|
this.deltaX = 0;
|
|
this.hGap = 0;
|
|
this.top = top;
|
|
this.bottom = bottom;
|
|
this.left = left;
|
|
this.right = right;
|
|
this.gap = gap;
|
|
this.sinAngle = sinAngle;
|
|
this.tanAngle = tanAngle;
|
|
if (Math.abs(sinAngle) < 0.0001) {
|
|
this.pos = left + gap;
|
|
}
|
|
else if (Math.abs(sinAngle) > 0.9999) {
|
|
this.pos = top + gap;
|
|
}
|
|
else {
|
|
this.deltaX = (bottom - top) * Math.abs(tanAngle);
|
|
this.pos = left - Math.abs(this.deltaX);
|
|
this.hGap = Math.abs(gap / cosAngle);
|
|
this.sLeft = new Segment([left, bottom], [left, top]);
|
|
this.sRight = new Segment([right, bottom], [right, top]);
|
|
}
|
|
}
|
|
nextLine() {
|
|
if (Math.abs(this.sinAngle) < 0.0001) {
|
|
if (this.pos < this.right) {
|
|
const line = [this.pos, this.top, this.pos, this.bottom];
|
|
this.pos += this.gap;
|
|
return line;
|
|
}
|
|
}
|
|
else if (Math.abs(this.sinAngle) > 0.9999) {
|
|
if (this.pos < this.bottom) {
|
|
const line = [this.left, this.pos, this.right, this.pos];
|
|
this.pos += this.gap;
|
|
return line;
|
|
}
|
|
}
|
|
else {
|
|
let xLower = this.pos - this.deltaX / 2;
|
|
let xUpper = this.pos + this.deltaX / 2;
|
|
let yLower = this.bottom;
|
|
let yUpper = this.top;
|
|
if (this.pos < (this.right + this.deltaX)) {
|
|
while (((xLower < this.left) && (xUpper < this.left)) || ((xLower > this.right) && (xUpper > this.right))) {
|
|
this.pos += this.hGap;
|
|
xLower = this.pos - this.deltaX / 2;
|
|
xUpper = this.pos + this.deltaX / 2;
|
|
if (this.pos > (this.right + this.deltaX)) {
|
|
return null;
|
|
}
|
|
}
|
|
const s = new Segment([xLower, yLower], [xUpper, yUpper]);
|
|
if (this.sLeft && s.intersects(this.sLeft)) {
|
|
xLower = s.xi;
|
|
yLower = s.yi;
|
|
}
|
|
if (this.sRight && s.intersects(this.sRight)) {
|
|
xUpper = s.xi;
|
|
yUpper = s.yi;
|
|
}
|
|
if (this.tanAngle > 0) {
|
|
xLower = this.right - (xLower - this.left);
|
|
xUpper = this.right - (xUpper - this.left);
|
|
}
|
|
const line = [xLower, yLower, xUpper, yUpper];
|
|
this.pos += this.hGap;
|
|
return line;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function lineLength(line) {
|
|
const p1 = line[0];
|
|
const p2 = line[1];
|
|
return Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2));
|
|
}
|
|
function getIntersectingLines(line, points) {
|
|
const intersections = [];
|
|
const s1 = new Segment([line[0], line[1]], [line[2], line[3]]);
|
|
for (let i = 0; i < points.length; i++) {
|
|
const s2 = new Segment(points[i], points[(i + 1) % points.length]);
|
|
if (s1.intersects(s2)) {
|
|
intersections.push([s1.xi, s1.yi]);
|
|
}
|
|
}
|
|
return intersections;
|
|
}
|
|
function affine(x, y, cx, cy, sinAnglePrime, cosAnglePrime, R) {
|
|
const A = -cx * cosAnglePrime - cy * sinAnglePrime + cx;
|
|
const B = R * (cx * sinAnglePrime - cy * cosAnglePrime) + cy;
|
|
const C = cosAnglePrime;
|
|
const D = sinAnglePrime;
|
|
const E = -R * sinAnglePrime;
|
|
const F = R * cosAnglePrime;
|
|
return [
|
|
A + C * x + D * y,
|
|
B + E * x + F * y
|
|
];
|
|
}
|
|
function hachureLinesForPolygon(points, o) {
|
|
const ret = [];
|
|
if (points && points.length) {
|
|
let left = points[0][0];
|
|
let right = points[0][0];
|
|
let top = points[0][1];
|
|
let bottom = points[0][1];
|
|
for (let i = 1; i < points.length; i++) {
|
|
left = Math.min(left, points[i][0]);
|
|
right = Math.max(right, points[i][0]);
|
|
top = Math.min(top, points[i][1]);
|
|
bottom = Math.max(bottom, points[i][1]);
|
|
}
|
|
const angle = o.hachureAngle;
|
|
let gap = o.hachureGap;
|
|
if (gap < 0) {
|
|
gap = o.strokeWidth * 4;
|
|
}
|
|
gap = Math.max(gap, 0.1);
|
|
const radPerDeg = Math.PI / 180;
|
|
const hachureAngle = (angle % 180) * radPerDeg;
|
|
const cosAngle = Math.cos(hachureAngle);
|
|
const sinAngle = Math.sin(hachureAngle);
|
|
const tanAngle = Math.tan(hachureAngle);
|
|
const it = new HachureIterator(top - 1, bottom + 1, left - 1, right + 1, gap, sinAngle, cosAngle, tanAngle);
|
|
let rect;
|
|
while ((rect = it.nextLine()) != null) {
|
|
const lines = getIntersectingLines(rect, points);
|
|
for (let i = 0; i < lines.length; i++) {
|
|
if (i < (lines.length - 1)) {
|
|
const p1 = lines[i];
|
|
const p2 = lines[i + 1];
|
|
ret.push([p1, p2]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return ret;
|
|
}
|
|
function hachureLinesForEllipse(cx, cy, width, height, o, renderer) {
|
|
const ret = [];
|
|
let rx = Math.abs(width / 2);
|
|
let ry = Math.abs(height / 2);
|
|
rx += renderer.getOffset(-rx * 0.05, rx * 0.05, o);
|
|
ry += renderer.getOffset(-ry * 0.05, ry * 0.05, o);
|
|
const angle = o.hachureAngle;
|
|
let gap = o.hachureGap;
|
|
if (gap <= 0) {
|
|
gap = o.strokeWidth * 4;
|
|
}
|
|
let fweight = o.fillWeight;
|
|
if (fweight < 0) {
|
|
fweight = o.strokeWidth / 2;
|
|
}
|
|
const radPerDeg = Math.PI / 180;
|
|
const hachureAngle = (angle % 180) * radPerDeg;
|
|
const tanAngle = Math.tan(hachureAngle);
|
|
const aspectRatio = ry / rx;
|
|
const hyp = Math.sqrt(aspectRatio * tanAngle * aspectRatio * tanAngle + 1);
|
|
const sinAnglePrime = aspectRatio * tanAngle / hyp;
|
|
const cosAnglePrime = 1 / hyp;
|
|
const gapPrime = gap / ((rx * ry / Math.sqrt((ry * cosAnglePrime) * (ry * cosAnglePrime) + (rx * sinAnglePrime) * (rx * sinAnglePrime))) / rx);
|
|
let halfLen = Math.sqrt((rx * rx) - (cx - rx + gapPrime) * (cx - rx + gapPrime));
|
|
for (let xPos = cx - rx + gapPrime; xPos < cx + rx; xPos += gapPrime) {
|
|
halfLen = Math.sqrt((rx * rx) - (cx - xPos) * (cx - xPos));
|
|
const p1 = affine(xPos, cy - halfLen, cx, cy, sinAnglePrime, cosAnglePrime, aspectRatio);
|
|
const p2 = affine(xPos, cy + halfLen, cx, cy, sinAnglePrime, cosAnglePrime, aspectRatio);
|
|
ret.push([p1, p2]);
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
class HachureFiller {
|
|
constructor(renderer) {
|
|
this.renderer = renderer;
|
|
}
|
|
fillPolygon(points, o) {
|
|
return this._fillPolygon(points, o);
|
|
}
|
|
fillEllipse(cx, cy, width, height, o) {
|
|
return this._fillEllipse(cx, cy, width, height, o);
|
|
}
|
|
_fillPolygon(points, o, connectEnds = false) {
|
|
const lines = hachureLinesForPolygon(points, o);
|
|
const ops = this.renderLines(lines, o, connectEnds);
|
|
return { type: 'fillSketch', ops };
|
|
}
|
|
_fillEllipse(cx, cy, width, height, o, connectEnds = false) {
|
|
const lines = hachureLinesForEllipse(cx, cy, width, height, o, this.renderer);
|
|
const ops = this.renderLines(lines, o, connectEnds);
|
|
return { type: 'fillSketch', ops };
|
|
}
|
|
renderLines(lines, o, connectEnds) {
|
|
let ops = [];
|
|
let prevPoint = null;
|
|
for (const line of lines) {
|
|
ops = ops.concat(this.renderer.doubleLine(line[0][0], line[0][1], line[1][0], line[1][1], o));
|
|
if (connectEnds && prevPoint) {
|
|
ops = ops.concat(this.renderer.doubleLine(prevPoint[0], prevPoint[1], line[0][0], line[0][1], o));
|
|
}
|
|
prevPoint = line[1];
|
|
}
|
|
return ops;
|
|
}
|
|
}
|
|
|
|
class ZigZagFiller extends HachureFiller {
|
|
fillPolygon(points, o) {
|
|
return this._fillPolygon(points, o, true);
|
|
}
|
|
fillEllipse(cx, cy, width, height, o) {
|
|
return this._fillEllipse(cx, cy, width, height, o, true);
|
|
}
|
|
}
|
|
|
|
class HatchFiller extends HachureFiller {
|
|
fillPolygon(points, o) {
|
|
const set = this._fillPolygon(points, o);
|
|
const o2 = Object.assign({}, o, { hachureAngle: o.hachureAngle + 90 });
|
|
const set2 = this._fillPolygon(points, o2);
|
|
set.ops = set.ops.concat(set2.ops);
|
|
return set;
|
|
}
|
|
fillEllipse(cx, cy, width, height, o) {
|
|
const set = this._fillEllipse(cx, cy, width, height, o);
|
|
const o2 = Object.assign({}, o, { hachureAngle: o.hachureAngle + 90 });
|
|
const set2 = this._fillEllipse(cx, cy, width, height, o2);
|
|
set.ops = set.ops.concat(set2.ops);
|
|
return set;
|
|
}
|
|
}
|
|
|
|
class DotFiller {
|
|
constructor(renderer) {
|
|
this.renderer = renderer;
|
|
}
|
|
fillPolygon(points, o) {
|
|
o = Object.assign({}, o, { curveStepCount: 4, hachureAngle: 0 });
|
|
const lines = hachureLinesForPolygon(points, o);
|
|
return this.dotsOnLines(lines, o);
|
|
}
|
|
fillEllipse(cx, cy, width, height, o) {
|
|
o = Object.assign({}, o, { curveStepCount: 4, hachureAngle: 0 });
|
|
const lines = hachureLinesForEllipse(cx, cy, width, height, o, this.renderer);
|
|
return this.dotsOnLines(lines, o);
|
|
}
|
|
dotsOnLines(lines, o) {
|
|
let ops = [];
|
|
let gap = o.hachureGap;
|
|
if (gap < 0) {
|
|
gap = o.strokeWidth * 4;
|
|
}
|
|
gap = Math.max(gap, 0.1);
|
|
let fweight = o.fillWeight;
|
|
if (fweight < 0) {
|
|
fweight = o.strokeWidth / 2;
|
|
}
|
|
for (const line of lines) {
|
|
const length = lineLength(line);
|
|
const dl = length / gap;
|
|
const count = Math.ceil(dl) - 1;
|
|
const alpha = Math.atan((line[1][1] - line[0][1]) / (line[1][0] - line[0][0]));
|
|
for (let i = 0; i < count; i++) {
|
|
const l = gap * (i + 1);
|
|
const dy = l * Math.sin(alpha);
|
|
const dx = l * Math.cos(alpha);
|
|
const c = [line[0][0] - dx, line[0][1] + dy];
|
|
const cx = this.renderer.getOffset(c[0] - gap / 4, c[0] + gap / 4, o);
|
|
const cy = this.renderer.getOffset(c[1] - gap / 4, c[1] + gap / 4, o);
|
|
const ellipse = this.renderer.ellipse(cx, cy, fweight, fweight, o);
|
|
ops = ops.concat(ellipse.ops);
|
|
}
|
|
}
|
|
return { type: 'fillSketch', ops };
|
|
}
|
|
}
|
|
|
|
const fillers = {};
|
|
function getFiller(renderer, o) {
|
|
let fillerName = o.fillStyle || 'hachure';
|
|
if (!fillers[fillerName]) {
|
|
switch (fillerName) {
|
|
case 'zigzag':
|
|
if (!fillers[fillerName]) {
|
|
fillers[fillerName] = new ZigZagFiller(renderer);
|
|
}
|
|
break;
|
|
case 'cross-hatch':
|
|
if (!fillers[fillerName]) {
|
|
fillers[fillerName] = new HatchFiller(renderer);
|
|
}
|
|
break;
|
|
case 'dots':
|
|
if (!fillers[fillerName]) {
|
|
fillers[fillerName] = new DotFiller(renderer);
|
|
}
|
|
break;
|
|
case 'hachure':
|
|
default:
|
|
fillerName = 'hachure';
|
|
if (!fillers[fillerName]) {
|
|
fillers[fillerName] = new HachureFiller(renderer);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
return fillers[fillerName];
|
|
}
|
|
|
|
class RoughRenderer {
|
|
line(x1, y1, x2, y2, o) {
|
|
const ops = this.doubleLine(x1, y1, x2, y2, o);
|
|
return { type: 'path', ops };
|
|
}
|
|
linearPath(points, close, o) {
|
|
const len = (points || []).length;
|
|
if (len > 2) {
|
|
let ops = [];
|
|
for (let i = 0; i < (len - 1); i++) {
|
|
ops = ops.concat(this.doubleLine(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o));
|
|
}
|
|
if (close) {
|
|
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) {
|
|
return this.line(points[0][0], points[0][1], points[1][0], points[1][1], o);
|
|
}
|
|
return { type: 'path', ops: [] };
|
|
}
|
|
polygon(points, o) {
|
|
return this.linearPath(points, true, o);
|
|
}
|
|
rectangle(x, y, width, height, o) {
|
|
const points = [
|
|
[x, y], [x + width, y], [x + width, y + height], [x, y + height]
|
|
];
|
|
return this.polygon(points, o);
|
|
}
|
|
curve(points, o) {
|
|
const o1 = this._curveWithOffset(points, 1 * (1 + o.roughness * 0.2), o);
|
|
const o2 = this._curveWithOffset(points, 1.5 * (1 + o.roughness * 0.22), o);
|
|
return { type: 'path', ops: o1.concat(o2) };
|
|
}
|
|
ellipse(x, y, width, height, o) {
|
|
const increment = (Math.PI * 2) / o.curveStepCount;
|
|
let rx = Math.abs(width / 2);
|
|
let ry = Math.abs(height / 2);
|
|
rx += this.getOffset(-rx * 0.05, rx * 0.05, o);
|
|
ry += this.getOffset(-ry * 0.05, ry * 0.05, o);
|
|
const o1 = this._ellipse(increment, x, y, rx, ry, 1, increment * this.getOffset(0.1, this.getOffset(0.4, 1, o), o), o);
|
|
const o2 = this._ellipse(increment, x, y, rx, ry, 1.5, 0, o);
|
|
return { type: 'path', ops: o1.concat(o2) };
|
|
}
|
|
arc(x, y, width, height, start, stop, closed, roughClosure, o) {
|
|
const cx = x;
|
|
const cy = y;
|
|
let rx = Math.abs(width / 2);
|
|
let ry = Math.abs(height / 2);
|
|
rx += this.getOffset(-rx * 0.01, rx * 0.01, o);
|
|
ry += this.getOffset(-ry * 0.01, ry * 0.01, o);
|
|
let strt = start;
|
|
let stp = stop;
|
|
while (strt < 0) {
|
|
strt += Math.PI * 2;
|
|
stp += Math.PI * 2;
|
|
}
|
|
if ((stp - strt) > (Math.PI * 2)) {
|
|
strt = 0;
|
|
stp = Math.PI * 2;
|
|
}
|
|
const ellipseInc = (Math.PI * 2) / o.curveStepCount;
|
|
const arcInc = Math.min(ellipseInc / 2, (stp - strt) / 2);
|
|
const o1 = this._arc(arcInc, cx, cy, rx, ry, strt, stp, 1, o);
|
|
const o2 = this._arc(arcInc, cx, cy, rx, ry, strt, stp, 1.5, o);
|
|
let ops = o1.concat(o2);
|
|
if (closed) {
|
|
if (roughClosure) {
|
|
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)] });
|
|
}
|
|
}
|
|
return { type: 'path', ops };
|
|
}
|
|
svgPath(path, o) {
|
|
path = (path || '').replace(/\n/g, ' ').replace(/(-\s)/g, '-').replace('/(\s\s)/g', ' ');
|
|
let p = new RoughPath(path);
|
|
if (o.simplification) {
|
|
const fitter = new PathFitter(p.linearPoints, p.closed);
|
|
const d = fitter.fit(o.simplification);
|
|
p = new RoughPath(d);
|
|
}
|
|
let ops = [];
|
|
const segments = p.segments || [];
|
|
for (let i = 0; i < segments.length; i++) {
|
|
const s = segments[i];
|
|
const prev = i > 0 ? segments[i - 1] : null;
|
|
const opList = this._processSegment(p, s, prev, o);
|
|
if (opList && opList.length) {
|
|
ops = ops.concat(opList);
|
|
}
|
|
}
|
|
return { type: 'path', ops };
|
|
}
|
|
solidFillPolygon(points, o) {
|
|
const ops = [];
|
|
if (points.length) {
|
|
const offset = o.maxRandomnessOffset || 0;
|
|
const len = points.length;
|
|
if (len > 2) {
|
|
ops.push({ op: 'move', data: [points[0][0] + this.getOffset(-offset, offset, o), points[0][1] + this.getOffset(-offset, offset, o)] });
|
|
for (let i = 1; i < len; i++) {
|
|
ops.push({ op: 'lineTo', data: [points[i][0] + this.getOffset(-offset, offset, o), points[i][1] + this.getOffset(-offset, offset, o)] });
|
|
}
|
|
}
|
|
}
|
|
return { type: 'fillPath', ops };
|
|
}
|
|
patternFillPolygon(points, o) {
|
|
const filler = getFiller(this, o);
|
|
return filler.fillPolygon(points, o);
|
|
}
|
|
patternFillEllipse(cx, cy, width, height, o) {
|
|
const filler = getFiller(this, o);
|
|
return filler.fillEllipse(cx, cy, width, height, o);
|
|
}
|
|
patternFillArc(x, y, width, height, start, stop, o) {
|
|
const cx = x;
|
|
const cy = y;
|
|
let rx = Math.abs(width / 2);
|
|
let ry = Math.abs(height / 2);
|
|
rx += this.getOffset(-rx * 0.01, rx * 0.01, o);
|
|
ry += this.getOffset(-ry * 0.01, ry * 0.01, o);
|
|
let strt = start;
|
|
let stp = stop;
|
|
while (strt < 0) {
|
|
strt += Math.PI * 2;
|
|
stp += Math.PI * 2;
|
|
}
|
|
if ((stp - strt) > (Math.PI * 2)) {
|
|
strt = 0;
|
|
stp = Math.PI * 2;
|
|
}
|
|
const increment = (stp - strt) / o.curveStepCount;
|
|
const points = [];
|
|
for (let angle = strt; angle <= stp; angle = angle + increment) {
|
|
points.push([cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)]);
|
|
}
|
|
points.push([cx + rx * Math.cos(stp), cy + ry * Math.sin(stp)]);
|
|
points.push([cx, cy]);
|
|
return this.patternFillPolygon(points, o);
|
|
}
|
|
///
|
|
getOffset(min, max, ops) {
|
|
return ops.roughness * ((Math.random() * (max - min)) + min);
|
|
}
|
|
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;
|
|
if ((offset * offset * 100) > lengthSq) {
|
|
offset = Math.sqrt(lengthSq) / 10;
|
|
}
|
|
const halfOffset = offset / 2;
|
|
const divergePoint = 0.2 + Math.random() * 0.2;
|
|
let midDispX = o.bowing * o.maxRandomnessOffset * (y2 - y1) / 200;
|
|
let midDispY = o.bowing * o.maxRandomnessOffset * (x1 - x2) / 200;
|
|
midDispX = this.getOffset(-midDispX, midDispX, o);
|
|
midDispY = this.getOffset(-midDispY, midDispY, o);
|
|
const ops = [];
|
|
if (move) {
|
|
if (overlay) {
|
|
ops.push({
|
|
op: 'move', data: [
|
|
x1 + this.getOffset(-halfOffset, halfOffset, o),
|
|
y1 + this.getOffset(-halfOffset, halfOffset, o)
|
|
]
|
|
});
|
|
}
|
|
else {
|
|
ops.push({
|
|
op: 'move', data: [
|
|
x1 + this.getOffset(-offset, offset, o),
|
|
y1 + this.getOffset(-offset, offset, o)
|
|
]
|
|
});
|
|
}
|
|
}
|
|
if (overlay) {
|
|
ops.push({
|
|
op: 'bcurveTo', data: [
|
|
midDispX + x1 + (x2 - x1) * divergePoint + this.getOffset(-halfOffset, halfOffset, o),
|
|
midDispY + y1 + (y2 - y1) * divergePoint + this.getOffset(-halfOffset, halfOffset, o),
|
|
midDispX + x1 + 2 * (x2 - x1) * divergePoint + this.getOffset(-halfOffset, halfOffset, o),
|
|
midDispY + y1 + 2 * (y2 - y1) * divergePoint + this.getOffset(-halfOffset, halfOffset, o),
|
|
x2 + this.getOffset(-halfOffset, halfOffset, o),
|
|
y2 + this.getOffset(-halfOffset, halfOffset, o)
|
|
]
|
|
});
|
|
}
|
|
else {
|
|
ops.push({
|
|
op: 'bcurveTo', data: [
|
|
midDispX + x1 + (x2 - x1) * divergePoint + this.getOffset(-offset, offset, o),
|
|
midDispY + y1 + (y2 - y1) * divergePoint + this.getOffset(-offset, offset, o),
|
|
midDispX + x1 + 2 * (x2 - x1) * divergePoint + this.getOffset(-offset, offset, o),
|
|
midDispY + y1 + 2 * (y2 - y1) * divergePoint + this.getOffset(-offset, offset, o),
|
|
x2 + this.getOffset(-offset, offset, o),
|
|
y2 + this.getOffset(-offset, offset, o)
|
|
]
|
|
});
|
|
}
|
|
return ops;
|
|
}
|
|
_curve(points, closePoint, o) {
|
|
const len = points.length;
|
|
let ops = [];
|
|
if (len > 3) {
|
|
const b = [];
|
|
const s = 1 - o.curveTightness;
|
|
ops.push({ op: 'move', data: [points[1][0], points[1][1]] });
|
|
for (let i = 1; (i + 2) < len; i++) {
|
|
const cachedVertArray = points[i];
|
|
b[0] = [cachedVertArray[0], cachedVertArray[1]];
|
|
b[1] = [cachedVertArray[0] + (s * points[i + 1][0] - s * points[i - 1][0]) / 6, cachedVertArray[1] + (s * points[i + 1][1] - s * points[i - 1][1]) / 6];
|
|
b[2] = [points[i + 1][0] + (s * points[i][0] - s * points[i + 2][0]) / 6, points[i + 1][1] + (s * points[i][1] - s * points[i + 2][1]) / 6];
|
|
b[3] = [points[i + 1][0], points[i + 1][1]];
|
|
ops.push({ op: 'bcurveTo', data: [b[1][0], b[1][1], b[2][0], b[2][1], b[3][0], b[3][1]] });
|
|
}
|
|
if (closePoint && closePoint.length === 2) {
|
|
const ro = o.maxRandomnessOffset;
|
|
ops.push({ op: 'lineTo', data: [closePoint[0] + this.getOffset(-ro, ro, o), closePoint[1] + +this.getOffset(-ro, ro, o)] });
|
|
}
|
|
}
|
|
else if (len === 3) {
|
|
ops.push({ op: 'move', data: [points[1][0], points[1][1]] });
|
|
ops.push({
|
|
op: 'bcurveTo', data: [
|
|
points[1][0], points[1][1],
|
|
points[2][0], points[2][1],
|
|
points[2][0], points[2][1]
|
|
]
|
|
});
|
|
}
|
|
else if (len === 2) {
|
|
ops = ops.concat(this.doubleLine(points[0][0], points[0][1], points[1][0], points[1][1], o));
|
|
}
|
|
return ops;
|
|
}
|
|
_ellipse(increment, cx, cy, rx, ry, offset, overlap, o) {
|
|
const radOffset = this.getOffset(-0.5, 0.5, o) - (Math.PI / 2);
|
|
const points = [];
|
|
points.push([
|
|
this.getOffset(-offset, offset, o) + cx + 0.9 * rx * Math.cos(radOffset - increment),
|
|
this.getOffset(-offset, offset, o) + cy + 0.9 * ry * Math.sin(radOffset - increment)
|
|
]);
|
|
for (let angle = radOffset; angle < (Math.PI * 2 + radOffset - 0.01); angle = angle + increment) {
|
|
points.push([
|
|
this.getOffset(-offset, offset, o) + cx + rx * Math.cos(angle),
|
|
this.getOffset(-offset, offset, o) + cy + ry * Math.sin(angle)
|
|
]);
|
|
}
|
|
points.push([
|
|
this.getOffset(-offset, offset, o) + cx + rx * Math.cos(radOffset + Math.PI * 2 + overlap * 0.5),
|
|
this.getOffset(-offset, offset, o) + cy + ry * Math.sin(radOffset + Math.PI * 2 + overlap * 0.5)
|
|
]);
|
|
points.push([
|
|
this.getOffset(-offset, offset, o) + cx + 0.98 * rx * Math.cos(radOffset + overlap),
|
|
this.getOffset(-offset, offset, o) + cy + 0.98 * ry * Math.sin(radOffset + overlap)
|
|
]);
|
|
points.push([
|
|
this.getOffset(-offset, offset, o) + cx + 0.9 * rx * Math.cos(radOffset + overlap * 0.5),
|
|
this.getOffset(-offset, offset, o) + cy + 0.9 * ry * Math.sin(radOffset + overlap * 0.5)
|
|
]);
|
|
return this._curve(points, null, o);
|
|
}
|
|
_curveWithOffset(points, offset, o) {
|
|
const ps = [];
|
|
ps.push([
|
|
points[0][0] + this.getOffset(-offset, offset, o),
|
|
points[0][1] + this.getOffset(-offset, offset, o),
|
|
]);
|
|
ps.push([
|
|
points[0][0] + this.getOffset(-offset, offset, o),
|
|
points[0][1] + this.getOffset(-offset, offset, o),
|
|
]);
|
|
for (let i = 1; i < points.length; i++) {
|
|
ps.push([
|
|
points[i][0] + this.getOffset(-offset, offset, o),
|
|
points[i][1] + this.getOffset(-offset, offset, o),
|
|
]);
|
|
if (i === (points.length - 1)) {
|
|
ps.push([
|
|
points[i][0] + this.getOffset(-offset, offset, o),
|
|
points[i][1] + this.getOffset(-offset, offset, o),
|
|
]);
|
|
}
|
|
}
|
|
return this._curve(ps, null, o);
|
|
}
|
|
_arc(increment, cx, cy, rx, ry, strt, stp, offset, o) {
|
|
const radOffset = strt + this.getOffset(-0.1, 0.1, o);
|
|
const points = [];
|
|
points.push([
|
|
this.getOffset(-offset, offset, o) + cx + 0.9 * rx * Math.cos(radOffset - increment),
|
|
this.getOffset(-offset, offset, o) + cy + 0.9 * ry * Math.sin(radOffset - increment)
|
|
]);
|
|
for (let angle = radOffset; angle <= stp; angle = angle + increment) {
|
|
points.push([
|
|
this.getOffset(-offset, offset, o) + cx + rx * Math.cos(angle),
|
|
this.getOffset(-offset, offset, o) + cy + ry * Math.sin(angle)
|
|
]);
|
|
}
|
|
points.push([
|
|
cx + rx * Math.cos(stp),
|
|
cy + ry * Math.sin(stp)
|
|
]);
|
|
points.push([
|
|
cx + rx * Math.cos(stp),
|
|
cy + ry * Math.sin(stp)
|
|
]);
|
|
return this._curve(points, null, o);
|
|
}
|
|
_bezierTo(x1, y1, x2, y2, x, y, path, o) {
|
|
const ops = [];
|
|
const ros = [o.maxRandomnessOffset || 1, (o.maxRandomnessOffset || 1) + 0.5];
|
|
let f = [0, 0];
|
|
for (let i = 0; i < 2; i++) {
|
|
if (i === 0) {
|
|
ops.push({ op: 'move', data: [path.x, path.y] });
|
|
}
|
|
else {
|
|
ops.push({ op: 'move', data: [path.x + this.getOffset(-ros[0], ros[0], o), path.y + this.getOffset(-ros[0], ros[0], o)] });
|
|
}
|
|
f = [x + this.getOffset(-ros[i], ros[i], o), y + this.getOffset(-ros[i], ros[i], o)];
|
|
ops.push({
|
|
op: 'bcurveTo', data: [
|
|
x1 + this.getOffset(-ros[i], ros[i], o), y1 + this.getOffset(-ros[i], ros[i], o),
|
|
x2 + this.getOffset(-ros[i], ros[i], o), y2 + this.getOffset(-ros[i], ros[i], o),
|
|
f[0], f[1]
|
|
]
|
|
});
|
|
}
|
|
path.setPosition(f[0], f[1]);
|
|
return ops;
|
|
}
|
|
_processSegment(path, seg, prevSeg, o) {
|
|
let ops = [];
|
|
switch (seg.key) {
|
|
case 'M':
|
|
case 'm': {
|
|
const delta = seg.key === 'm';
|
|
if (seg.data.length >= 2) {
|
|
let x = +seg.data[0];
|
|
let y = +seg.data[1];
|
|
if (delta) {
|
|
x += path.x;
|
|
y += path.y;
|
|
}
|
|
const ro = 1 * (o.maxRandomnessOffset || 0);
|
|
x = x + this.getOffset(-ro, ro, o);
|
|
y = y + this.getOffset(-ro, ro, o);
|
|
path.setPosition(x, y);
|
|
ops.push({ op: 'move', data: [x, y] });
|
|
}
|
|
break;
|
|
}
|
|
case 'L':
|
|
case 'l': {
|
|
const delta = seg.key === 'l';
|
|
if (seg.data.length >= 2) {
|
|
let x = +seg.data[0];
|
|
let y = +seg.data[1];
|
|
if (delta) {
|
|
x += path.x;
|
|
y += path.y;
|
|
}
|
|
ops = ops.concat(this.doubleLine(path.x, path.y, x, y, o));
|
|
path.setPosition(x, y);
|
|
}
|
|
break;
|
|
}
|
|
case 'H':
|
|
case 'h': {
|
|
const delta = seg.key === 'h';
|
|
if (seg.data.length) {
|
|
let x = +seg.data[0];
|
|
if (delta) {
|
|
x += path.x;
|
|
}
|
|
ops = ops.concat(this.doubleLine(path.x, path.y, x, path.y, o));
|
|
path.setPosition(x, path.y);
|
|
}
|
|
break;
|
|
}
|
|
case 'V':
|
|
case 'v': {
|
|
const delta = seg.key === 'v';
|
|
if (seg.data.length) {
|
|
let y = +seg.data[0];
|
|
if (delta) {
|
|
y += path.y;
|
|
}
|
|
ops = ops.concat(this.doubleLine(path.x, path.y, path.x, y, o));
|
|
path.setPosition(path.x, y);
|
|
}
|
|
break;
|
|
}
|
|
case 'Z':
|
|
case 'z': {
|
|
if (path.first) {
|
|
ops = ops.concat(this.doubleLine(path.x, path.y, path.first[0], path.first[1], o));
|
|
path.setPosition(path.first[0], path.first[1]);
|
|
path.first = null;
|
|
}
|
|
break;
|
|
}
|
|
case 'C':
|
|
case 'c': {
|
|
const delta = seg.key === 'c';
|
|
if (seg.data.length >= 6) {
|
|
let x1 = +seg.data[0];
|
|
let y1 = +seg.data[1];
|
|
let x2 = +seg.data[2];
|
|
let y2 = +seg.data[3];
|
|
let x = +seg.data[4];
|
|
let y = +seg.data[5];
|
|
if (delta) {
|
|
x1 += path.x;
|
|
x2 += path.x;
|
|
x += path.x;
|
|
y1 += path.y;
|
|
y2 += path.y;
|
|
y += path.y;
|
|
}
|
|
const ob = this._bezierTo(x1, y1, x2, y2, x, y, path, o);
|
|
ops = ops.concat(ob);
|
|
path.bezierReflectionPoint = [x + (x - x2), y + (y - y2)];
|
|
}
|
|
break;
|
|
}
|
|
case 'S':
|
|
case 's': {
|
|
const delta = seg.key === 's';
|
|
if (seg.data.length >= 4) {
|
|
let x2 = +seg.data[0];
|
|
let y2 = +seg.data[1];
|
|
let x = +seg.data[2];
|
|
let y = +seg.data[3];
|
|
if (delta) {
|
|
x2 += path.x;
|
|
x += path.x;
|
|
y2 += path.y;
|
|
y += path.y;
|
|
}
|
|
let x1 = x2;
|
|
let y1 = y2;
|
|
const prevKey = prevSeg ? prevSeg.key : '';
|
|
let ref = null;
|
|
if (prevKey === 'c' || prevKey === 'C' || prevKey === 's' || prevKey === 'S') {
|
|
ref = path.bezierReflectionPoint;
|
|
}
|
|
if (ref) {
|
|
x1 = ref[0];
|
|
y1 = ref[1];
|
|
}
|
|
const ob = this._bezierTo(x1, y1, x2, y2, x, y, path, o);
|
|
ops = ops.concat(ob);
|
|
path.bezierReflectionPoint = [x + (x - x2), y + (y - y2)];
|
|
}
|
|
break;
|
|
}
|
|
case 'Q':
|
|
case 'q': {
|
|
const delta = seg.key === 'q';
|
|
if (seg.data.length >= 4) {
|
|
let x1 = +seg.data[0];
|
|
let y1 = +seg.data[1];
|
|
let x = +seg.data[2];
|
|
let y = +seg.data[3];
|
|
if (delta) {
|
|
x1 += path.x;
|
|
x += path.x;
|
|
y1 += path.y;
|
|
y += path.y;
|
|
}
|
|
const offset1 = 1 * (1 + o.roughness * 0.2);
|
|
const offset2 = 1.5 * (1 + o.roughness * 0.22);
|
|
ops.push({ op: 'move', data: [path.x + this.getOffset(-offset1, offset1, o), path.y + this.getOffset(-offset1, offset1, o)] });
|
|
let f = [x + this.getOffset(-offset1, offset1, o), y + this.getOffset(-offset1, offset1, o)];
|
|
ops.push({
|
|
op: 'qcurveTo', data: [
|
|
x1 + this.getOffset(-offset1, offset1, o), y1 + this.getOffset(-offset1, offset1, o),
|
|
f[0], f[1]
|
|
]
|
|
});
|
|
ops.push({ op: 'move', data: [path.x + this.getOffset(-offset2, offset2, o), path.y + this.getOffset(-offset2, offset2, o)] });
|
|
f = [x + this.getOffset(-offset2, offset2, o), y + this.getOffset(-offset2, offset2, o)];
|
|
ops.push({
|
|
op: 'qcurveTo', data: [
|
|
x1 + this.getOffset(-offset2, offset2, o), y1 + this.getOffset(-offset2, offset2, o),
|
|
f[0], f[1]
|
|
]
|
|
});
|
|
path.setPosition(f[0], f[1]);
|
|
path.quadReflectionPoint = [x + (x - x1), y + (y - y1)];
|
|
}
|
|
break;
|
|
}
|
|
case 'T':
|
|
case 't': {
|
|
const delta = seg.key === 't';
|
|
if (seg.data.length >= 2) {
|
|
let x = +seg.data[0];
|
|
let y = +seg.data[1];
|
|
if (delta) {
|
|
x += path.x;
|
|
y += path.y;
|
|
}
|
|
let x1 = x;
|
|
let y1 = y;
|
|
const prevKey = prevSeg ? prevSeg.key : '';
|
|
let ref = null;
|
|
if (prevKey === 'q' || prevKey === 'Q' || prevKey === 't' || prevKey === 'T') {
|
|
ref = path.quadReflectionPoint;
|
|
}
|
|
if (ref) {
|
|
x1 = ref[0];
|
|
y1 = ref[1];
|
|
}
|
|
const offset1 = 1 * (1 + o.roughness * 0.2);
|
|
const offset2 = 1.5 * (1 + o.roughness * 0.22);
|
|
ops.push({ op: 'move', data: [path.x + this.getOffset(-offset1, offset1, o), path.y + this.getOffset(-offset1, offset1, o)] });
|
|
let f = [x + this.getOffset(-offset1, offset1, o), y + this.getOffset(-offset1, offset1, o)];
|
|
ops.push({
|
|
op: 'qcurveTo', data: [
|
|
x1 + this.getOffset(-offset1, offset1, o), y1 + this.getOffset(-offset1, offset1, o),
|
|
f[0], f[1]
|
|
]
|
|
});
|
|
ops.push({ op: 'move', data: [path.x + this.getOffset(-offset2, offset2, o), path.y + this.getOffset(-offset2, offset2, o)] });
|
|
f = [x + this.getOffset(-offset2, offset2, o), y + this.getOffset(-offset2, offset2, o)];
|
|
ops.push({
|
|
op: 'qcurveTo', data: [
|
|
x1 + this.getOffset(-offset2, offset2, o), y1 + this.getOffset(-offset2, offset2, o),
|
|
f[0], f[1]
|
|
]
|
|
});
|
|
path.setPosition(f[0], f[1]);
|
|
path.quadReflectionPoint = [x + (x - x1), y + (y - y1)];
|
|
}
|
|
break;
|
|
}
|
|
case 'A':
|
|
case 'a': {
|
|
const delta = seg.key === 'a';
|
|
if (seg.data.length >= 7) {
|
|
const rx = +seg.data[0];
|
|
const ry = +seg.data[1];
|
|
const angle = +seg.data[2];
|
|
const largeArcFlag = +seg.data[3];
|
|
const sweepFlag = +seg.data[4];
|
|
let x = +seg.data[5];
|
|
let y = +seg.data[6];
|
|
if (delta) {
|
|
x += path.x;
|
|
y += path.y;
|
|
}
|
|
if (x === path.x && y === path.y) {
|
|
break;
|
|
}
|
|
if (rx === 0 || ry === 0) {
|
|
ops = ops.concat(this.doubleLine(path.x, path.y, x, y, o));
|
|
path.setPosition(x, y);
|
|
}
|
|
else {
|
|
for (let i = 0; i < 1; i++) {
|
|
const arcConverter = new RoughArcConverter([path.x, path.y], [x, y], [rx, ry], angle, largeArcFlag ? true : false, sweepFlag ? true : false);
|
|
let segment = arcConverter.getNextSegment();
|
|
while (segment) {
|
|
const ob = this._bezierTo(segment.cp1[0], segment.cp1[1], segment.cp2[0], segment.cp2[1], segment.to[0], segment.to[1], path, o);
|
|
ops = ops.concat(ob);
|
|
segment = arcConverter.getNextSegment();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
return ops;
|
|
}
|
|
}
|
|
|
|
const hasSelf = typeof self !== 'undefined';
|
|
const roughScript = hasSelf && self && self.document && self.document.currentScript && self.document.currentScript.src;
|
|
function createRenderer(config) {
|
|
if (hasSelf && roughScript && self && self.workly && config.async && (!config.noWorker)) {
|
|
const worklySource = config.worklyURL || 'https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js';
|
|
if (worklySource) {
|
|
const code = `importScripts('${worklySource}', '${roughScript}');\nworkly.expose(self.rough.createRenderer());`;
|
|
const ourl = URL.createObjectURL(new Blob([code]));
|
|
return self.workly.proxy(ourl);
|
|
}
|
|
}
|
|
return new RoughRenderer();
|
|
}
|
|
|
|
const hasSelf$1 = typeof self !== 'undefined';
|
|
class RoughGenerator {
|
|
constructor(config, surface) {
|
|
this.defaultOptions = {
|
|
maxRandomnessOffset: 2,
|
|
roughness: 1,
|
|
bowing: 1,
|
|
stroke: '#000',
|
|
strokeWidth: 1,
|
|
curveTightness: 0,
|
|
curveStepCount: 9,
|
|
fillStyle: 'hachure',
|
|
fillWeight: -1,
|
|
hachureAngle: -41,
|
|
hachureGap: -1
|
|
};
|
|
this.config = config || {};
|
|
this.surface = surface;
|
|
this.renderer = createRenderer(this.config);
|
|
if (this.config.options) {
|
|
this.defaultOptions = this._options(this.config.options);
|
|
}
|
|
}
|
|
_options(options) {
|
|
return options ? Object.assign({}, this.defaultOptions, options) : this.defaultOptions;
|
|
}
|
|
_drawable(shape, sets, options) {
|
|
return { shape, sets: sets || [], options: options || this.defaultOptions };
|
|
}
|
|
get lib() {
|
|
return this.renderer;
|
|
}
|
|
getCanvasSize() {
|
|
const val = (w) => {
|
|
if (w && typeof w === 'object') {
|
|
if (w.baseVal && w.baseVal.value) {
|
|
return w.baseVal.value;
|
|
}
|
|
}
|
|
return w || 100;
|
|
};
|
|
if (this.surface) {
|
|
return [val(this.surface.width), val(this.surface.height)];
|
|
}
|
|
return [100, 100];
|
|
}
|
|
computePolygonSize(points) {
|
|
if (points.length) {
|
|
let left = points[0][0];
|
|
let right = points[0][0];
|
|
let top = points[0][1];
|
|
let bottom = points[0][1];
|
|
for (let i = 1; i < points.length; i++) {
|
|
left = Math.min(left, points[i][0]);
|
|
right = Math.max(right, points[i][0]);
|
|
top = Math.min(top, points[i][1]);
|
|
bottom = Math.max(bottom, points[i][1]);
|
|
}
|
|
return [(right - left), (bottom - top)];
|
|
}
|
|
return [0, 0];
|
|
}
|
|
polygonPath(points) {
|
|
let d = '';
|
|
if (points.length) {
|
|
d = `M${points[0][0]},${points[0][1]}`;
|
|
for (let i = 1; i < points.length; i++) {
|
|
d = `${d} L${points[i][0]},${points[i][1]}`;
|
|
}
|
|
}
|
|
return d;
|
|
}
|
|
computePathSize(d) {
|
|
let size = [0, 0];
|
|
if (hasSelf$1 && self.document) {
|
|
try {
|
|
const ns = 'http://www.w3.org/2000/svg';
|
|
const svg = self.document.createElementNS(ns, 'svg');
|
|
svg.setAttribute('width', '0');
|
|
svg.setAttribute('height', '0');
|
|
const pathNode = self.document.createElementNS(ns, 'path');
|
|
pathNode.setAttribute('d', d);
|
|
svg.appendChild(pathNode);
|
|
self.document.body.appendChild(svg);
|
|
const bb = pathNode.getBBox();
|
|
if (bb) {
|
|
size[0] = bb.width || 0;
|
|
size[1] = bb.height || 0;
|
|
}
|
|
self.document.body.removeChild(svg);
|
|
}
|
|
catch (err) { }
|
|
}
|
|
const canvasSize = this.getCanvasSize();
|
|
if (!(size[0] * size[1])) {
|
|
size = canvasSize;
|
|
}
|
|
return size;
|
|
}
|
|
line(x1, y1, x2, y2, options) {
|
|
const o = this._options(options);
|
|
return this._drawable('line', [this.lib.line(x1, y1, x2, y2, o)], o);
|
|
}
|
|
rectangle(x, y, width, height, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (o.fill) {
|
|
const points = [[x, y], [x + width, y], [x + width, y + height], [x, y + height]];
|
|
if (o.fillStyle === 'solid') {
|
|
paths.push(this.lib.solidFillPolygon(points, o));
|
|
}
|
|
else {
|
|
paths.push(this.lib.patternFillPolygon(points, o));
|
|
}
|
|
}
|
|
paths.push(this.lib.rectangle(x, y, width, height, o));
|
|
return this._drawable('rectangle', paths, o);
|
|
}
|
|
ellipse(x, y, width, height, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
const shape = this.lib.ellipse(x, y, width, height, o);
|
|
shape.type = 'fillPath';
|
|
paths.push(shape);
|
|
}
|
|
else {
|
|
paths.push(this.lib.patternFillEllipse(x, y, width, height, o));
|
|
}
|
|
}
|
|
paths.push(this.lib.ellipse(x, y, width, height, o));
|
|
return this._drawable('ellipse', paths, o);
|
|
}
|
|
circle(x, y, diameter, options) {
|
|
const ret = this.ellipse(x, y, diameter, diameter, options);
|
|
ret.shape = 'circle';
|
|
return ret;
|
|
}
|
|
linearPath(points, options) {
|
|
const o = this._options(options);
|
|
return this._drawable('linearPath', [this.lib.linearPath(points, false, o)], o);
|
|
}
|
|
arc(x, y, width, height, start, stop, closed = false, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (closed && o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
const shape = this.lib.arc(x, y, width, height, start, stop, true, false, o);
|
|
shape.type = 'fillPath';
|
|
paths.push(shape);
|
|
}
|
|
else {
|
|
paths.push(this.lib.patternFillArc(x, y, width, height, start, stop, o));
|
|
}
|
|
}
|
|
paths.push(this.lib.arc(x, y, width, height, start, stop, closed, true, o));
|
|
return this._drawable('arc', paths, o);
|
|
}
|
|
curve(points, options) {
|
|
const o = this._options(options);
|
|
return this._drawable('curve', [this.lib.curve(points, o)], o);
|
|
}
|
|
polygon(points, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
paths.push(this.lib.solidFillPolygon(points, o));
|
|
}
|
|
else {
|
|
const size = this.computePolygonSize(points);
|
|
const fillPoints = [
|
|
[0, 0],
|
|
[size[0], 0],
|
|
[size[0], size[1]],
|
|
[0, size[1]]
|
|
];
|
|
const shape = this.lib.patternFillPolygon(fillPoints, o);
|
|
shape.type = 'path2Dpattern';
|
|
shape.size = size;
|
|
shape.path = this.polygonPath(points);
|
|
paths.push(shape);
|
|
}
|
|
}
|
|
paths.push(this.lib.linearPath(points, true, o));
|
|
return this._drawable('polygon', paths, o);
|
|
}
|
|
path(d, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (!d) {
|
|
return this._drawable('path', paths, o);
|
|
}
|
|
if (o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
const shape = { type: 'path2Dfill', path: d, ops: [] };
|
|
paths.push(shape);
|
|
}
|
|
else {
|
|
const size = this.computePathSize(d);
|
|
const points = [
|
|
[0, 0],
|
|
[size[0], 0],
|
|
[size[0], size[1]],
|
|
[0, size[1]]
|
|
];
|
|
const shape = this.lib.patternFillPolygon(points, o);
|
|
shape.type = 'path2Dpattern';
|
|
shape.size = size;
|
|
shape.path = d;
|
|
paths.push(shape);
|
|
}
|
|
}
|
|
paths.push(this.lib.svgPath(d, o));
|
|
return this._drawable('path', paths, o);
|
|
}
|
|
toPaths(drawable) {
|
|
const sets = drawable.sets || [];
|
|
const o = drawable.options || this.defaultOptions;
|
|
const paths = [];
|
|
for (const drawing of sets) {
|
|
let path = null;
|
|
switch (drawing.type) {
|
|
case 'path':
|
|
path = {
|
|
d: this.opsToPath(drawing),
|
|
stroke: o.stroke,
|
|
strokeWidth: o.strokeWidth,
|
|
fill: 'none'
|
|
};
|
|
break;
|
|
case 'fillPath':
|
|
path = {
|
|
d: this.opsToPath(drawing),
|
|
stroke: 'none',
|
|
strokeWidth: 0,
|
|
fill: o.fill || 'none'
|
|
};
|
|
break;
|
|
case 'fillSketch':
|
|
path = this.fillSketch(drawing, o);
|
|
break;
|
|
case 'path2Dfill':
|
|
path = {
|
|
d: drawing.path || '',
|
|
stroke: 'none',
|
|
strokeWidth: 0,
|
|
fill: o.fill || 'none'
|
|
};
|
|
break;
|
|
case 'path2Dpattern': {
|
|
const size = drawing.size;
|
|
const pattern = {
|
|
x: 0, y: 0, width: 1, height: 1,
|
|
viewBox: `0 0 ${Math.round(size[0])} ${Math.round(size[1])}`,
|
|
patternUnits: 'objectBoundingBox',
|
|
path: this.fillSketch(drawing, o)
|
|
};
|
|
path = {
|
|
d: drawing.path,
|
|
stroke: 'none',
|
|
strokeWidth: 0,
|
|
pattern: pattern
|
|
};
|
|
break;
|
|
}
|
|
}
|
|
if (path) {
|
|
paths.push(path);
|
|
}
|
|
}
|
|
return paths;
|
|
}
|
|
fillSketch(drawing, o) {
|
|
let fweight = o.fillWeight;
|
|
if (fweight < 0) {
|
|
fweight = o.strokeWidth / 2;
|
|
}
|
|
return {
|
|
d: this.opsToPath(drawing),
|
|
stroke: o.fill || 'none',
|
|
strokeWidth: fweight,
|
|
fill: 'none'
|
|
};
|
|
}
|
|
opsToPath(drawing) {
|
|
let path = '';
|
|
for (const item of drawing.ops) {
|
|
const data = item.data;
|
|
switch (item.op) {
|
|
case 'move':
|
|
path += `M${data[0]} ${data[1]} `;
|
|
break;
|
|
case 'bcurveTo':
|
|
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
|
|
break;
|
|
case 'qcurveTo':
|
|
path += `Q${data[0]} ${data[1]}, ${data[2]} ${data[3]} `;
|
|
break;
|
|
case 'lineTo':
|
|
path += `L${data[0]} ${data[1]} `;
|
|
break;
|
|
}
|
|
}
|
|
return path.trim();
|
|
}
|
|
}
|
|
|
|
const hasDocument = typeof document !== 'undefined';
|
|
class RoughCanvas {
|
|
constructor(canvas, config) {
|
|
this.canvas = canvas;
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.gen = new RoughGenerator(config || null, this.canvas);
|
|
}
|
|
get generator() {
|
|
return this.gen;
|
|
}
|
|
static createRenderer() {
|
|
return new RoughRenderer();
|
|
}
|
|
line(x1, y1, x2, y2, options) {
|
|
const d = this.gen.line(x1, y1, x2, y2, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
rectangle(x, y, width, height, options) {
|
|
const d = this.gen.rectangle(x, y, width, height, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
ellipse(x, y, width, height, options) {
|
|
const d = this.gen.ellipse(x, y, width, height, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
circle(x, y, diameter, options) {
|
|
const d = this.gen.circle(x, y, diameter, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
linearPath(points, options) {
|
|
const d = this.gen.linearPath(points, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
polygon(points, options) {
|
|
const d = this.gen.polygon(points, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
arc(x, y, width, height, start, stop, closed = false, options) {
|
|
const d = this.gen.arc(x, y, width, height, start, stop, closed, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
curve(points, options) {
|
|
const d = this.gen.curve(points, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
path(d, options) {
|
|
const drawing = this.gen.path(d, options);
|
|
this.draw(drawing);
|
|
return drawing;
|
|
}
|
|
draw(drawable) {
|
|
const sets = drawable.sets || [];
|
|
const o = drawable.options || this.gen.defaultOptions;
|
|
const ctx = this.ctx;
|
|
for (const drawing of sets) {
|
|
switch (drawing.type) {
|
|
case 'path':
|
|
ctx.save();
|
|
ctx.strokeStyle = o.stroke;
|
|
ctx.lineWidth = o.strokeWidth;
|
|
this._drawToContext(ctx, drawing);
|
|
ctx.restore();
|
|
break;
|
|
case 'fillPath':
|
|
ctx.save();
|
|
ctx.fillStyle = o.fill || '';
|
|
this._drawToContext(ctx, drawing);
|
|
ctx.restore();
|
|
break;
|
|
case 'fillSketch':
|
|
this.fillSketch(ctx, drawing, o);
|
|
break;
|
|
case 'path2Dfill': {
|
|
this.ctx.save();
|
|
this.ctx.fillStyle = o.fill || '';
|
|
const p2d = new Path2D(drawing.path);
|
|
this.ctx.fill(p2d);
|
|
this.ctx.restore();
|
|
break;
|
|
}
|
|
case 'path2Dpattern': {
|
|
const doc = this.canvas.ownerDocument || (hasDocument && document);
|
|
if (doc) {
|
|
const size = drawing.size;
|
|
const hcanvas = doc.createElement('canvas');
|
|
const hcontext = hcanvas.getContext('2d');
|
|
const bbox = this.computeBBox(drawing.path);
|
|
if (bbox && (bbox.width || bbox.height)) {
|
|
hcanvas.width = this.canvas.width;
|
|
hcanvas.height = this.canvas.height;
|
|
hcontext.translate(bbox.x || 0, bbox.y || 0);
|
|
}
|
|
else {
|
|
hcanvas.width = size[0];
|
|
hcanvas.height = size[1];
|
|
}
|
|
this.fillSketch(hcontext, drawing, o);
|
|
this.ctx.save();
|
|
this.ctx.fillStyle = this.ctx.createPattern(hcanvas, 'repeat');
|
|
const p2d = new Path2D(drawing.path);
|
|
this.ctx.fill(p2d);
|
|
this.ctx.restore();
|
|
}
|
|
else {
|
|
console.error('Cannot render path2Dpattern. No defs/document defined.');
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
computeBBox(d) {
|
|
if (hasDocument) {
|
|
try {
|
|
const ns = 'http://www.w3.org/2000/svg';
|
|
const svg = document.createElementNS(ns, 'svg');
|
|
svg.setAttribute('width', '0');
|
|
svg.setAttribute('height', '0');
|
|
const pathNode = self.document.createElementNS(ns, 'path');
|
|
pathNode.setAttribute('d', d);
|
|
svg.appendChild(pathNode);
|
|
document.body.appendChild(svg);
|
|
const bbox = pathNode.getBBox();
|
|
document.body.removeChild(svg);
|
|
return bbox;
|
|
}
|
|
catch (err) { }
|
|
}
|
|
return null;
|
|
}
|
|
fillSketch(ctx, drawing, o) {
|
|
let fweight = o.fillWeight;
|
|
if (fweight < 0) {
|
|
fweight = o.strokeWidth / 2;
|
|
}
|
|
ctx.save();
|
|
ctx.strokeStyle = o.fill || '';
|
|
ctx.lineWidth = fweight;
|
|
this._drawToContext(ctx, drawing);
|
|
ctx.restore();
|
|
}
|
|
_drawToContext(ctx, drawing) {
|
|
ctx.beginPath();
|
|
for (const item of drawing.ops) {
|
|
const data = item.data;
|
|
switch (item.op) {
|
|
case 'move':
|
|
ctx.moveTo(data[0], data[1]);
|
|
break;
|
|
case 'bcurveTo':
|
|
ctx.bezierCurveTo(data[0], data[1], data[2], data[3], data[4], data[5]);
|
|
break;
|
|
case 'qcurveTo':
|
|
ctx.quadraticCurveTo(data[0], data[1], data[2], data[3]);
|
|
break;
|
|
case 'lineTo':
|
|
ctx.lineTo(data[0], data[1]);
|
|
break;
|
|
}
|
|
}
|
|
if (drawing.type === 'fillPath') {
|
|
ctx.fill();
|
|
}
|
|
else {
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
class RoughGeneratorAsync extends RoughGenerator {
|
|
// @ts-ignore
|
|
async line(x1, y1, x2, y2, options) {
|
|
const o = this._options(options);
|
|
return this._drawable('line', [await this.lib.line(x1, y1, x2, y2, o)], o);
|
|
}
|
|
// @ts-ignore
|
|
async rectangle(x, y, width, height, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (o.fill) {
|
|
const points = [[x, y], [x + width, y], [x + width, y + height], [x, y + height]];
|
|
if (o.fillStyle === 'solid') {
|
|
paths.push(await this.lib.solidFillPolygon(points, o));
|
|
}
|
|
else {
|
|
paths.push(await this.lib.patternFillPolygon(points, o));
|
|
}
|
|
}
|
|
paths.push(await this.lib.rectangle(x, y, width, height, o));
|
|
return this._drawable('rectangle', paths, o);
|
|
}
|
|
// @ts-ignore
|
|
async ellipse(x, y, width, height, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
const shape = await this.lib.ellipse(x, y, width, height, o);
|
|
shape.type = 'fillPath';
|
|
paths.push(shape);
|
|
}
|
|
else {
|
|
paths.push(await this.lib.patternFillEllipse(x, y, width, height, o));
|
|
}
|
|
}
|
|
paths.push(await this.lib.ellipse(x, y, width, height, o));
|
|
return this._drawable('ellipse', paths, o);
|
|
}
|
|
// @ts-ignore
|
|
async circle(x, y, diameter, options) {
|
|
const ret = await this.ellipse(x, y, diameter, diameter, options);
|
|
ret.shape = 'circle';
|
|
return ret;
|
|
}
|
|
// @ts-ignore
|
|
async linearPath(points, options) {
|
|
const o = this._options(options);
|
|
return this._drawable('linearPath', [await this.lib.linearPath(points, false, o)], o);
|
|
}
|
|
// @ts-ignore
|
|
async arc(x, y, width, height, start, stop, closed = false, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (closed && o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
const shape = await this.lib.arc(x, y, width, height, start, stop, true, false, o);
|
|
shape.type = 'fillPath';
|
|
paths.push(shape);
|
|
}
|
|
else {
|
|
paths.push(await this.lib.patternFillArc(x, y, width, height, start, stop, o));
|
|
}
|
|
}
|
|
paths.push(await this.lib.arc(x, y, width, height, start, stop, closed, true, o));
|
|
return this._drawable('arc', paths, o);
|
|
}
|
|
// @ts-ignore
|
|
async curve(points, options) {
|
|
const o = this._options(options);
|
|
return this._drawable('curve', [await this.lib.curve(points, o)], o);
|
|
}
|
|
// @ts-ignore
|
|
async polygon(points, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
paths.push(await this.lib.solidFillPolygon(points, o));
|
|
}
|
|
else {
|
|
const size = this.computePolygonSize(points);
|
|
const fillPoints = [
|
|
[0, 0],
|
|
[size[0], 0],
|
|
[size[0], size[1]],
|
|
[0, size[1]]
|
|
];
|
|
const shape = await this.lib.patternFillPolygon(fillPoints, o);
|
|
shape.type = 'path2Dpattern';
|
|
shape.size = size;
|
|
shape.path = this.polygonPath(points);
|
|
paths.push(shape);
|
|
}
|
|
}
|
|
paths.push(await this.lib.linearPath(points, true, o));
|
|
return this._drawable('polygon', paths, o);
|
|
}
|
|
// @ts-ignore
|
|
async path(d, options) {
|
|
const o = this._options(options);
|
|
const paths = [];
|
|
if (!d) {
|
|
return this._drawable('path', paths, o);
|
|
}
|
|
if (o.fill) {
|
|
if (o.fillStyle === 'solid') {
|
|
const shape = { type: 'path2Dfill', path: d, ops: [] };
|
|
paths.push(shape);
|
|
}
|
|
else {
|
|
const size = this.computePathSize(d);
|
|
const points = [
|
|
[0, 0],
|
|
[size[0], 0],
|
|
[size[0], size[1]],
|
|
[0, size[1]]
|
|
];
|
|
const shape = await this.lib.patternFillPolygon(points, o);
|
|
shape.type = 'path2Dpattern';
|
|
shape.size = size;
|
|
shape.path = d;
|
|
paths.push(shape);
|
|
}
|
|
}
|
|
paths.push(await this.lib.svgPath(d, o));
|
|
return this._drawable('path', paths, o);
|
|
}
|
|
}
|
|
|
|
class RoughCanvasAsync extends RoughCanvas {
|
|
constructor(canvas, config) {
|
|
super(canvas, config);
|
|
this.genAsync = new RoughGeneratorAsync(config || null, this.canvas);
|
|
}
|
|
// @ts-ignore
|
|
get generator() {
|
|
return this.genAsync;
|
|
}
|
|
// @ts-ignore
|
|
async line(x1, y1, x2, y2, options) {
|
|
const d = await this.genAsync.line(x1, y1, x2, y2, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async rectangle(x, y, width, height, options) {
|
|
const d = await this.genAsync.rectangle(x, y, width, height, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async ellipse(x, y, width, height, options) {
|
|
const d = await this.genAsync.ellipse(x, y, width, height, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async circle(x, y, diameter, options) {
|
|
const d = await this.genAsync.circle(x, y, diameter, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async linearPath(points, options) {
|
|
const d = await this.genAsync.linearPath(points, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async polygon(points, options) {
|
|
const d = await this.genAsync.polygon(points, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async arc(x, y, width, height, start, stop, closed = false, options) {
|
|
const d = await this.genAsync.arc(x, y, width, height, start, stop, closed, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async curve(points, options) {
|
|
const d = await this.genAsync.curve(points, options);
|
|
this.draw(d);
|
|
return d;
|
|
}
|
|
// @ts-ignore
|
|
async path(d, options) {
|
|
const drawing = await this.genAsync.path(d, options);
|
|
this.draw(drawing);
|
|
return drawing;
|
|
}
|
|
}
|
|
|
|
const hasDocument$1 = typeof document !== 'undefined';
|
|
class RoughSVG {
|
|
constructor(svg, config) {
|
|
this.svg = svg;
|
|
this.gen = new RoughGenerator(config || null, this.svg);
|
|
}
|
|
get generator() {
|
|
return this.gen;
|
|
}
|
|
static createRenderer() {
|
|
return new RoughRenderer();
|
|
}
|
|
get defs() {
|
|
const doc = this.svg.ownerDocument || (hasDocument$1 && document);
|
|
if (doc) {
|
|
if (!this._defs) {
|
|
const dnode = doc.createElementNS('http://www.w3.org/2000/svg', 'defs');
|
|
if (this.svg.firstChild) {
|
|
this.svg.insertBefore(dnode, this.svg.firstChild);
|
|
}
|
|
else {
|
|
this.svg.appendChild(dnode);
|
|
}
|
|
this._defs = dnode;
|
|
}
|
|
}
|
|
return this._defs || null;
|
|
}
|
|
line(x1, y1, x2, y2, options) {
|
|
const d = this.gen.line(x1, y1, x2, y2, options);
|
|
return this.draw(d);
|
|
}
|
|
rectangle(x, y, width, height, options) {
|
|
const d = this.gen.rectangle(x, y, width, height, options);
|
|
return this.draw(d);
|
|
}
|
|
ellipse(x, y, width, height, options) {
|
|
const d = this.gen.ellipse(x, y, width, height, options);
|
|
return this.draw(d);
|
|
}
|
|
circle(x, y, diameter, options) {
|
|
const d = this.gen.circle(x, y, diameter, options);
|
|
return this.draw(d);
|
|
}
|
|
linearPath(points, options) {
|
|
const d = this.gen.linearPath(points, options);
|
|
return this.draw(d);
|
|
}
|
|
polygon(points, options) {
|
|
const d = this.gen.polygon(points, options);
|
|
return this.draw(d);
|
|
}
|
|
arc(x, y, width, height, start, stop, closed = false, options) {
|
|
const d = this.gen.arc(x, y, width, height, start, stop, closed, options);
|
|
return this.draw(d);
|
|
}
|
|
curve(points, options) {
|
|
const d = this.gen.curve(points, options);
|
|
return this.draw(d);
|
|
}
|
|
path(d, options) {
|
|
const drawing = this.gen.path(d, options);
|
|
return this.draw(drawing);
|
|
}
|
|
draw(drawable) {
|
|
const sets = drawable.sets || [];
|
|
const o = drawable.options || this.gen.defaultOptions;
|
|
const doc = this.svg.ownerDocument || (hasDocument$1 && document);
|
|
const g = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
|
|
for (const drawing of sets) {
|
|
let path = null;
|
|
switch (drawing.type) {
|
|
case 'path': {
|
|
path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
path.setAttribute('d', this.opsToPath(drawing));
|
|
path.style.stroke = o.stroke;
|
|
path.style.strokeWidth = o.strokeWidth + '';
|
|
path.style.fill = 'none';
|
|
break;
|
|
}
|
|
case 'fillPath': {
|
|
path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
path.setAttribute('d', this.opsToPath(drawing));
|
|
path.style.stroke = 'none';
|
|
path.style.strokeWidth = '0';
|
|
path.style.fill = o.fill || null;
|
|
break;
|
|
}
|
|
case 'fillSketch': {
|
|
path = this.fillSketch(doc, drawing, o);
|
|
break;
|
|
}
|
|
case 'path2Dfill': {
|
|
path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
path.setAttribute('d', drawing.path || '');
|
|
path.style.stroke = 'none';
|
|
path.style.strokeWidth = '0';
|
|
path.style.fill = o.fill || null;
|
|
break;
|
|
}
|
|
case 'path2Dpattern': {
|
|
if (!this.defs) {
|
|
console.error('Cannot render path2Dpattern. No defs/document defined.');
|
|
}
|
|
else {
|
|
const size = drawing.size;
|
|
const pattern = doc.createElementNS('http://www.w3.org/2000/svg', 'pattern');
|
|
const id = `rough-${Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER || 999999))}`;
|
|
pattern.setAttribute('id', id);
|
|
pattern.setAttribute('x', '0');
|
|
pattern.setAttribute('y', '0');
|
|
pattern.setAttribute('width', '1');
|
|
pattern.setAttribute('height', '1');
|
|
pattern.setAttribute('height', '1');
|
|
pattern.setAttribute('viewBox', `0 0 ${Math.round(size[0])} ${Math.round(size[1])}`);
|
|
pattern.setAttribute('patternUnits', 'objectBoundingBox');
|
|
const patternPath = this.fillSketch(doc, drawing, o);
|
|
pattern.appendChild(patternPath);
|
|
this.defs.appendChild(pattern);
|
|
path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
path.setAttribute('d', drawing.path || '');
|
|
path.style.stroke = 'none';
|
|
path.style.strokeWidth = '0';
|
|
path.style.fill = `url(#${id})`;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
if (path) {
|
|
g.appendChild(path);
|
|
}
|
|
}
|
|
return g;
|
|
}
|
|
opsToPath(drawing) {
|
|
return this.gen.opsToPath(drawing);
|
|
}
|
|
fillSketch(doc, drawing, o) {
|
|
let fweight = o.fillWeight;
|
|
if (fweight < 0) {
|
|
fweight = o.strokeWidth / 2;
|
|
}
|
|
const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
path.setAttribute('d', this.opsToPath(drawing));
|
|
path.style.stroke = o.fill || null;
|
|
path.style.strokeWidth = fweight + '';
|
|
path.style.fill = 'none';
|
|
return path;
|
|
}
|
|
}
|
|
|
|
class RoughSVGAsync extends RoughSVG {
|
|
constructor(svg, config) {
|
|
super(svg, config);
|
|
this.genAsync = new RoughGeneratorAsync(config || null, this.svg);
|
|
}
|
|
// @ts-ignore
|
|
get generator() {
|
|
return this.genAsync;
|
|
}
|
|
// @ts-ignore
|
|
async line(x1, y1, x2, y2, options) {
|
|
const d = await this.genAsync.line(x1, y1, x2, y2, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async rectangle(x, y, width, height, options) {
|
|
const d = await this.genAsync.rectangle(x, y, width, height, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async ellipse(x, y, width, height, options) {
|
|
const d = await this.genAsync.ellipse(x, y, width, height, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async circle(x, y, diameter, options) {
|
|
const d = await this.genAsync.circle(x, y, diameter, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async linearPath(points, options) {
|
|
const d = await this.genAsync.linearPath(points, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async polygon(points, options) {
|
|
const d = await this.genAsync.polygon(points, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async arc(x, y, width, height, start, stop, closed = false, options) {
|
|
const d = await this.genAsync.arc(x, y, width, height, start, stop, closed, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async curve(points, options) {
|
|
const d = await this.genAsync.curve(points, options);
|
|
return this.draw(d);
|
|
}
|
|
// @ts-ignore
|
|
async path(d, options) {
|
|
const drawing = await this.genAsync.path(d, options);
|
|
return this.draw(drawing);
|
|
}
|
|
}
|
|
|
|
var rough = {
|
|
canvas(canvas, config) {
|
|
if (config && config.async) {
|
|
return new RoughCanvasAsync(canvas, config);
|
|
}
|
|
return new RoughCanvas(canvas, config);
|
|
},
|
|
svg(svg, config) {
|
|
if (config && config.async) {
|
|
return new RoughSVGAsync(svg, config);
|
|
}
|
|
return new RoughSVG(svg, config);
|
|
},
|
|
createRenderer() {
|
|
return RoughCanvas.createRenderer();
|
|
},
|
|
generator(config, surface) {
|
|
if (config && config.async) {
|
|
return new RoughGeneratorAsync(config, surface);
|
|
}
|
|
return new RoughGenerator(config, surface);
|
|
}
|
|
};
|
|
|
|
return rough;
|
|
|
|
}());
|