Skip to content

Instantly share code, notes, and snippets.

@mapsmania

mapsmania/index.html

Last active March 14, 2018 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mapsmania/aa12ffecbb36fb1f9b431f4a30e18a17 to your computer and use it in GitHub Desktop.
Save mapsmania/aa12ffecbb36fb1f9b431f4a30e18a17 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet with leaflet-roughcanvas
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hand-drawn</title>
<link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet">
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="leaflet-roughcanvas.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
}
#mapid {
position:fixed; top:0; bottom:0; height: 100%; width:100%;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid', {
renderer: L.Canvas.roughCanvas(),
}).setView([51.50621826506825,-0.07488727569580078], 16);
L.tileLayer('https://a.tiles.mapbox.com/v4/examples.a4c252ab/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic3RhbWVuIiwiYSI6IlpkZEtuS1EifQ.jiH_c9ShtBwtqH9RdG40mw').addTo(mymap);
// create a red polygon from an array of LatLng points
var latlngs = [[51.50775416680264, -0.07797718048095703], [51.50719323477933, -0.07559537887573242], [51.50712645669751, -0.07456541061401367], [51.50878252424312, -0.07450103759765625], [51.5090896914441, -0.07559537887573242], [51.50900956106957, -0.07718324661254881], [51.50775416680264, -0.07797718048095703]];
var polygon = L.polygon(latlngs, {
// renderer: L.Canvas.roughCanvas(),
fillColor: 'red',
fillStyle: 'hachure',
fillWeight: 1,
hachureAngle: -41,
hachureGap: 3
}).addTo(mymap);
var latlngs2 = [[51.508288381356955,-0.07323503494262695], [51.506886054792616, -0.07355690002441406], [51.506512093752725, -0.0709390640258789],
[51.506739141893, -0.07076740264892578], [51.50695283322676, -0.07016658782958984], [51.50649873794456, -0.06975889205932617],
[51.50683263197484, -0.06844997406005858], [51.50795449799454, -0.06943702697753906], [51.50776752224283, -0.07089614868164062],
[51.50776752224283, -0.07134675979614258], [51.508288381356955, -0.07323503494262695]];
var polygon2 = L.polygon(latlngs2, {
// renderer: L.Canvas.roughCanvas(),
fillColor: 'blue',
fillStyle: 'hachure',
fillWeight: 1,
hachureAngle: -161,
hachureGap: 2
}).addTo(mymap);
var latlngs3 = [[51.503480224873485, -0.07965087890625], [51.50325316049429, -0.07894277572631836],
[51.504254906593374, -0.0783848762512207], [51.50441518392566, -0.07898569107055664],[51.503480224873485, -0.07965087890625]];
var polygon3 = L.polygon(latlngs3, {
// renderer: L.Canvas.roughCanvas(),
fillColor: 'green',
fillStyle: 'hachure',
fillWeight: 1,
hachureAngle: -90,
hachureGap: 2
}).addTo(mymap);
</script>
</body>
</html>
Raw
leaflet-roughcanvas.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
typeof define === 'function' && define.amd ? define(factory) :
(factory());
}(this, (function () { 'use strict';
function RoughSegmentRelation() {
return {
LEFT: 0,
RIGHT: 1,
INTERSECTS: 2,
AHEAD: 3,
BEHIND: 4,
SEPARATE: 5,
UNDEFINED: 6
};
}
class RoughSegment {
constructor(px1, py1, px2, py2) {
this.RoughSegmentRelationConst = RoughSegmentRelation();
this.px1 = px1;
this.py1 = py1;
this.px2 = px2;
this.py2 = py2;
this.xi = Number.MAX_VALUE;
this.yi = Number.MAX_VALUE;
this.a = py2 - py1;
this.b = px1 - px2;
this.c = px2 * py1 - px1 * py2;
this._undefined = ((this.a == 0) && (this.b == 0) && (this.c == 0));
}
isUndefined() {
return this._undefined;
}
compare(otherSegment) {
if (this.isUndefined() || otherSegment.isUndefined()) {
return this.RoughSegmentRelationConst.UNDEFINED;
}
var grad1 = Number.MAX_VALUE;
var grad2 = Number.MAX_VALUE;
var int1 = 0, int2 = 0;
var 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 this.RoughSegmentRelationConst.SEPARATE;
}
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 this.RoughSegmentRelationConst.INTERSECTS;
}
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 this.RoughSegmentRelationConst.INTERSECTS;
}
return this.RoughSegmentRelationConst.SEPARATE;
}
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 this.RoughSegmentRelationConst.SEPARATE;
}
if (Math.abs(otherSegment.a) < 0.00001) {
if ((otherSegment.px1 - this.xi) * (this.xi - otherSegment.px2) < -0.00001) {
return this.RoughSegmentRelationConst.SEPARATE;
}
return this.RoughSegmentRelationConst.INTERSECTS;
}
return this.RoughSegmentRelationConst.INTERSECTS;
}
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 this.RoughSegmentRelationConst.SEPARATE;
}
if (Math.abs(a) < 0.00001) {
if ((this.px1 - this.xi) * (this.xi - this.px2) < -0.00001) {
return this.RoughSegmentRelationConst.SEPARATE;
}
return this.RoughSegmentRelationConst.INTERSECTS;
}
return this.RoughSegmentRelationConst.INTERSECTS;
}
if (grad1 == grad2) {
if (int1 != int2) {
return this.RoughSegmentRelationConst.SEPARATE;
}
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 this.RoughSegmentRelationConst.INTERSECTS;
}
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 this.RoughSegmentRelationConst.INTERSECTS;
}
return this.RoughSegmentRelationConst.SEPARATE;
}
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 this.RoughSegmentRelationConst.SEPARATE;
}
return this.RoughSegmentRelationConst.INTERSECTS;
}
getLength() {
return this._getLength(this.px1, this.py1, this.px2, this.py2);
}
_getLength(x1, y1, x2, y2) {
var dx = x2 - x1;
var dy = y2 - y1;
return Math.sqrt(dx * dx + dy * dy);
}
}
class RoughHachureIterator {
constructor(top, bottom, left, right, gap, sinAngle, cosAngle, tanAngle) {
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 RoughSegment(left, bottom, left, top);
this.sRight = new RoughSegment(right, bottom, right, top);
}
}
getNextLine() {
if (Math.abs(this.sinAngle) < 0.0001) {
if (this.pos < this.right) {
let 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) {
let 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;
}
}
let s = new RoughSegment(xLower, yLower, xUpper, yUpper);
if (s.compare(this.sLeft) == RoughSegmentRelation().INTERSECTS) {
xLower = s.xi;
yLower = s.yi;
}
if (s.compare(this.sRight) == RoughSegmentRelation().INTERSECTS) {
xUpper = s.xi;
yUpper = s.yi;
}
if (this.tanAngle > 0) {
xLower = this.right - (xLower - this.left);
xUpper = this.right - (xUpper - this.left);
}
let line = [xLower, yLower, xUpper, yUpper];
this.pos += this.hGap;
return line;
}
}
return null;
}
}
class PathToken {
constructor(type, text) {
this.type = type;
this.text = text;
}
isType(type) {
return this.type === type;
}
}
class ParsedPath {
constructor(d) {
this.PARAMS = {
A: ["rx", "ry", "x-axis-rotation", "large-arc-flag", "sweep-flag", "x", "y"],
a: ["rx", "ry", "x-axis-rotation", "large-arc-flag", "sweep-flag", "x", "y"],
C: ["x1", "y1", "x2", "y2", "x", "y"],
c: ["x1", "y1", "x2", "y2", "x", "y"],
H: ["x"],
h: ["x"],
L: ["x", "y"],
l: ["x", "y"],
M: ["x", "y"],
m: ["x", "y"],
Q: ["x1", "y1", "x", "y"],
q: ["x1", "y1", "x", "y"],
S: ["x2", "y2", "x", "y"],
s: ["x2", "y2", "x", "y"],
T: ["x", "y"],
t: ["x", "y"],
V: ["y"],
v: ["y"],
Z: [],
z: []
};
this.COMMAND = 0;
this.NUMBER = 1;
this.EOD = 2;
this.segments = [];
this.d = d || "";
this.parseData(d);
this.processPoints();
}
loadFromSegments(segments) {
this.segments = segments;
this.processPoints();
}
processPoints() {
let first = null, currentPoint = [0, 0];
for (let i = 0; i < this.segments.length; i++) {
let 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;
}
}
}
get closed() {
if (typeof this._closed === 'undefined') {
this._closed = false;
for (let s of this.segments) {
if (s.key.toLowerCase() === 'z') {
this._closed = true;
}
}
}
return this._closed;
}
parseData(d) {
var tokens = this.tokenize(d);
var index = 0;
var token = tokens[index];
var mode = "BOD";
this.segments = new Array();
while (!token.isType(this.EOD)) {
var param_length;
var params = new Array();
if (mode == "BOD") {
if (token.text == "M" || token.text == "m") {
index++;
param_length = this.PARAMS[token.text].length;
mode = token.text;
} else {
return this.parseData('M0,0' + d);
}
} else {
if (token.isType(this.NUMBER)) {
param_length = this.PARAMS[mode].length;
} else {
index++;
param_length = this.PARAMS[token.text].length;
mode = token.text;
}
}
if ((index + param_length) < tokens.length) {
for (var i = index; i < index + param_length; i++) {
var number = tokens[i];
if (number.isType(this.NUMBER)) {
params[params.length] = number.text;
}
else {
console.error("Parameter type is not a number: " + mode + "," + number.text);
return;
}
}
var segment;
if (this.PARAMS[mode]) {
segment = { key: mode, data: params };
} else {
console.error("Unsupported segment type: " + mode);
return;
}
this.segments.push(segment);
index += param_length;
token = tokens[index];
if (mode == "M") mode = "L";
if (mode == "m") mode = "l";
} else {
console.error("Path data ended before all parameters were found");
}
}
}
tokenize(d) {
var 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] = new PathToken(this.COMMAND, RegExp.$1);
d = d.substr(RegExp.$1.length);
} else if (d.match(/^(([-+]?[0-9]+(\.[0-9]*)?|[-+]?\.[0-9]+)([eE][-+]?[0-9]+)?)/)) {
tokens[tokens.length] = new PathToken(this.NUMBER, parseFloat(RegExp.$1));
d = d.substr(RegExp.$1.length);
} else {
console.error("Unrecognized segment command: " + d);
return null;
}
}
tokens[tokens.length] = new PathToken(this.EOD, null);
return tokens;
}
}
class RoughPath {
constructor(d) {
this.d = d;
this.parsed = new ParsedPath(d);
this._position = [0, 0];
this.bezierReflectionPoint = null;
this.quadReflectionPoint = null;
this._first = null;
}
get segments() {
return this.parsed.segments;
}
get closed() {
return this.parsed.closed;
}
get linearPoints() {
if (!this._linearPoints) {
const lp = [];
let points = [];
for (let s of this.parsed.segments) {
let 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];
}
}
class RoughArcConverter {
// 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
constructor(from, to, radii, angle, largeArcFlag, sweepFlag) {
const radPerDeg = Math.PI / 180;
this._segIndex = 0;
this._numSegs = 0;
if (from[0] == to[0] && from[1] == to[1]) {
return;
}
this._rx = Math.abs(radii[0]);
this._ry = Math.abs(radii[1]);
this._sinPhi = Math.sin(angle * radPerDeg);
this._cosPhi = Math.cos(angle * radPerDeg);
var x1dash = this._cosPhi * (from[0] - to[0]) / 2.0 + this._sinPhi * (from[1] - to[1]) / 2.0;
var y1dash = -this._sinPhi * (from[0] - to[0]) / 2.0 + this._cosPhi * (from[1] - to[1]) / 2.0;
var root;
var numerator = this._rx * this._rx * this._ry * this._ry - this._rx * this._rx * y1dash * y1dash - this._ry * this._ry * x1dash * x1dash;
if (numerator < 0) {
let s = Math.sqrt(1 - (numerator / (this._rx * this._rx * this._ry * this._ry)));
this._rx = s;
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));
}
let cxdash = root * this._rx * y1dash / this._ry;
let 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);
this._from = from;
}
getNextSegment() {
var cp1, cp2, to;
if (this._segIndex == this._numSegs) {
return null;
}
let cosTheta1 = Math.cos(this._theta);
let sinTheta1 = Math.sin(this._theta);
let theta2 = this._theta + this._delta;
let cosTheta2 = Math.cos(theta2);
let sinTheta2 = Math.sin(theta2);
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]
];
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)
];
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) {
let ta = Math.atan2(uy, ux);
let 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) {
let outSets = [];
for (const set of this.sets) {
let 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++) {
let 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;
}
let points = set.slice(0);
while (points.length > count) {
let minArea = -1;
let minIndex = -1;
for (let i = 1; i < (points.length - 1); i++) {
let a = this.distance(points[i - 1], points[i]);
let b = this.distance(points[i], points[i + 1]);
let c = this.distance(points[i - 1], points[i + 1]);
let s = (a + b + c) / 2.0;
let 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 RoughRenderer {
line(x1, y1, x2, y2, o) {
let 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);
}
}
polygon(points, o) {
return this.linearPath(points, true, o);
}
rectangle(x, y, width, height, o) {
let points = [
[x, y], [x + width, y], [x + width, y + height], [x, y + height]
];
return this.polygon(points, o);
}
curve(points, o) {
let o1 = this._curveWithOffset(points, 1 * (1 + o.roughness * 0.2), o);
let 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);
let o1 = this._ellipse(increment, x, y, rx, ry, 1, increment * this._getOffset(0.1, this._getOffset(0.4, 1, o), o), o);
let 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) {
let cx = x;
let 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;
}
let ellipseInc = (Math.PI * 2) / o.curveStepCount;
let arcInc = Math.min(ellipseInc / 2, (stp - strt) / 2);
let o1 = this._arc(arcInc, cx, cy, rx, ry, strt, stp, 1, o);
let 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 };
}
hachureFillArc(x, y, width, height, start, stop, o) {
let cx = x;
let 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;
}
let increment = (stp - strt) / o.curveStepCount;
let xc = [], yc = [];
for (let angle = strt; angle <= stp; angle = angle + increment) {
xc.push(cx + rx * Math.cos(angle));
yc.push(cy + ry * Math.sin(angle));
}
xc.push(cx + rx * Math.cos(stp));
yc.push(cy + ry * Math.sin(stp));
xc.push(cx);
yc.push(cy);
return this.hachureFillShape(xc, yc, o);
}
solidFillShape(xCoords, yCoords, o) {
let ops = [];
if (xCoords && yCoords && xCoords.length && yCoords.length && xCoords.length === yCoords.length) {
let offset = o.maxRandomnessOffset || 0;
const len = xCoords.length;
if (len > 2) {
ops.push({ op: 'move', data: [xCoords[0] + this._getOffset(-offset, offset, o), yCoords[0] + this._getOffset(-offset, offset, o)] });
for (var i = 1; i < len; i++) {
ops.push({ op: 'lineTo', data: [xCoords[i] + this._getOffset(-offset, offset, o), yCoords[i] + this._getOffset(-offset, offset, o)] });
}
}
}
return { type: 'fillPath', ops };
}
hachureFillShape(xCoords, yCoords, o) {
let ops = [];
if (xCoords && yCoords && xCoords.length && yCoords.length) {
let left = xCoords[0];
let right = xCoords[0];
let top = yCoords[0];
let bottom = yCoords[0];
for (let i = 1; i < xCoords.length; i++) {
left = Math.min(left, xCoords[i]);
right = Math.max(right, xCoords[i]);
top = Math.min(top, yCoords[i]);
bottom = Math.max(bottom, yCoords[i]);
}
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 RoughHachureIterator(top - 1, bottom + 1, left - 1, right + 1, gap, sinAngle, cosAngle, tanAngle);
let rectCoords;
while ((rectCoords = it.getNextLine()) != null) {
let lines = this._getIntersectingLines(rectCoords, xCoords, yCoords);
for (let i = 0; i < lines.length; i++) {
if (i < (lines.length - 1)) {
let p1 = lines[i];
let p2 = lines[i + 1];
ops = ops.concat(this._doubleLine(p1[0], p1[1], p2[0], p2[1], o));
}
}
}
}
return { type: 'path', ops };
}
hachureFillEllipse(cx, cy, width, height, o) {
let ops = [];
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);
let 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;
let hachureAngle = (angle % 180) * radPerDeg;
let tanAngle = Math.tan(hachureAngle);
let aspectRatio = ry / rx;
let hyp = Math.sqrt(aspectRatio * tanAngle * aspectRatio * tanAngle + 1);
let sinAnglePrime = aspectRatio * tanAngle / hyp;
let cosAnglePrime = 1 / hyp;
let 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 (var xPos = cx - rx + gapPrime; xPos < cx + rx; xPos += gapPrime) {
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);
ops = ops.concat(this._doubleLine(p1[0], p1[1], p2[0], p2[1], o));
}
return { type: 'path', ops };
}
svgPath(path, o) {
path = (path || '').replace(/\n/g, " ").replace(/(-)/g, " -").replace(/(-\s)/g, "-").replace("/(\s\s)/g", " ");
let p = new RoughPath(path);
if (o.simplification) {
let fitter = new PathFitter(p.linearPoints, p.closed);
let d = fitter.fit(o.simplification);
p = new RoughPath(d);
}
let ops = [];
let segments = p.segments || [];
for (let i = 0; i < segments.length; i++) {
let s = segments[i];
let prev = i > 0 ? segments[i - 1] : null;
let opList = this._processSegment(p, s, prev, o);
if (opList && opList.length) {
ops = ops.concat(opList);
}
}
return { type: 'path', ops };
}
// privates
_bezierTo(x1, y1, x2, y2, x, y, path, o) {
let ops = [];
let ros = [o.maxRandomnessOffset || 1, (o.maxRandomnessOffset || 1) + 0.5];
let f = null;
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': {
let 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;
}
let 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': {
let 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;
}
let 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;
let prevKey = prevSeg ? prevSeg.key : "";
var ref = null;
if (prevKey == 'c' || prevKey == 'C' || prevKey == 's' || prevKey == 'S') {
ref = path.bezierReflectionPoint;
}
if (ref) {
x1 = ref[0];
y1 = ref[1];
}
let 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;
}
let offset1 = 1 * (1 + o.roughness * 0.2);
let 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;
let prevKey = prevSeg ? prevSeg.key : "";
var ref = null;
if (prevKey == 'q' || prevKey == 'Q' || prevKey == 't' || prevKey == 'T') {
ref = path.quadReflectionPoint;
}
if (ref) {
x1 = ref[0];
y1 = ref[1];
}
let offset1 = 1 * (1 + o.roughness * 0.2);
let 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) {
let rx = +seg.data[0];
let ry = +seg.data[1];
let angle = +seg.data[2];
let largeArcFlag = +seg.data[3];
let 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 {
let ro = o.maxRandomnessOffset || 0;
for (let i = 0; i < 1; i++) {
let arcConverter = new RoughArcConverter(
[path.x, path.y],
[x, y],
[rx, ry],
angle,
largeArcFlag ? true : false,
sweepFlag ? true : false
);
let segment = arcConverter.getNextSegment();
while (segment) {
let 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;
}
_getOffset(min, max, ops) {
return ops.roughness * ((Math.random() * (max - min)) + min);
}
_affine(x, y, cx, cy, sinAnglePrime, cosAnglePrime, R) {
var A = -cx * cosAnglePrime - cy * sinAnglePrime + cx;
var B = R * (cx * sinAnglePrime - cy * cosAnglePrime) + cy;
var C = cosAnglePrime;
var D = sinAnglePrime;
var E = -R * sinAnglePrime;
var F = R * cosAnglePrime;
return [
A + C * x + D * y,
B + E * x + F * y
];
}
_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 * (x2) / 200;
midDispX = this._getOffset(-midDispX, midDispX, o);
midDispY = this._getOffset(-midDispY, midDispY, o);
let 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) {
let ro = o.maxRandomnessOffset;
// TODO: more roughness here?
ops.push({ ops: '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);
}
_getIntersectingLines(lineCoords, xCoords, yCoords) {
let intersections = [];
var s1 = new RoughSegment(lineCoords[0], lineCoords[1], lineCoords[2], lineCoords[3]);
for (var i = 0; i < xCoords.length; i++) {
let s2 = new RoughSegment(xCoords[i], yCoords[i], xCoords[(i + 1) % xCoords.length], yCoords[(i + 1) % xCoords.length]);
if (s1.compare(s2) == RoughSegmentRelation().INTERSECTS) {
intersections.push([s1.xi, s1.yi]);
}
}
return intersections;
}
}
self._roughScript = self.document && self.document.currentScript && self.document.currentScript.src;
class RoughCanvas {
constructor(canvas, config) {
this.config = config || {};
this.canvas = canvas;
this.ctx = this.canvas.getContext("2d");
this.defaultOptions = {
maxRandomnessOffset: 2,
roughness: 1,
bowing: 1,
stroke: '#000',
strokeWidth: 1,
curveTightness: 0,
curveStepCount: 9,
fill: null,
fillStyle: 'hachure',
fillWeight: -1,
hachureAngle: -41,
hachureGap: -1
};
if (this.config.options) {
this.defaultOptions = this._options(this.config.options);
}
}
static createRenderer() {
return new RoughRenderer();
}
async lib() {
if (!this._renderer) {
if (window.workly && (!this.config.noWorker)) {
const tos = Function.prototype.toString;
const worklySource = this.config.worklyURL || 'https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js';
const rendererSource = this.config.roughURL || self._roughScript;
if (rendererSource && worklySource) {
let code = `importScripts('${worklySource}', '${rendererSource}');\nworkly.expose(self.rough.createRenderer());`;
let ourl = URL.createObjectURL(new Blob([code]));
this._renderer = workly.proxy(ourl);
} else {
this._renderer = new RoughRenderer();
}
} else {
this._renderer = new RoughRenderer();
}
}
return this._renderer;
}
async line(x1, y1, x2, y2, options) {
let o = this._options(options);
let lib = await this.lib();
let drawing = await lib.line(x1, y1, x2, y2, o);
this._draw(this.ctx, drawing, o);
}
async rectangle(x, y, width, height, options) {
let o = this._options(options);
let lib = await this.lib();
if (o.fill) {
let ctx = this.ctx;
const xc = [x, x + width, x + width, x];
const yc = [y, y, y + height, y + height];
if (o.fillStyle === 'solid') {
let fillShape = await lib.solidFillShape(xc, yc, o);
this._fill(ctx, fillShape, o);
} else {
let fillShape = await lib.hachureFillShape(xc, yc, o);
this._fillSketch(ctx, fillShape, o);
}
}
let drawing = await lib.rectangle(x, y, width, height, o);
this._draw(this.ctx, drawing, o);
}
async ellipse(x, y, width, height, options) {
let o = this._options(options);
let lib = await this.lib();
if (o.fill) {
if (o.fillStyle === 'solid') {
let fillShape = await lib.ellipse(x, y, width, height, o);
this._fill(this.ctx, fillShape, o);
} else {
let fillShape = await lib.hachureFillEllipse(x, y, width, height, o);
this._fillSketch(this.ctx, fillShape, o);
}
}
let drawing = await lib.ellipse(x, y, width, height, o);
this._draw(this.ctx, drawing, o);
}
async circle(x, y, radius, options) {
return await this.ellipse(x, y, radius, radius, options);
}
async linearPath(points, options) {
let o = this._options(options);
let lib = await this.lib();
let drawing = await lib.linearPath(points, false, o);
this._draw(this.ctx, drawing, o);
}
async polygon(points, options) {
let o = this._options(options);
let lib = await this.lib();
if (o.fill) {
let xc = [], yc = [];
for (let p of points) {
xc.push(p[0]);
yc.push(p[1]);
}
if (o.fillStyle === 'solid') {
let fillShape = await lib.solidFillShape(xc, yc, o);
this._fill(this.ctx, fillShape, o);
} else {
let fillShape = await lib.hachureFillShape(xc, yc, o);
this._fillSketch(this.ctx, fillShape, o);
}
}
let drawing = await lib.linearPath(points, true, o);
this._draw(this.ctx, drawing, o);
}
async arc(x, y, width, height, start, stop, closed, options) {
let o = this._options(options);
let lib = await this.lib();
if (closed && o.fill) {
if (o.fillStyle === 'solid') {
let fillShape = await lib.arc(x, y, width, height, start, stop, true, false, o);
this._fill(this.ctx, fillShape, o);
} else {
let fillShape = await lib.hachureFillArc(x, y, width, height, start, stop, o);
this._fillSketch(this.ctx, fillShape, o);
}
}
let drawing = await lib.arc(x, y, width, height, start, stop, closed, true, o);
this._draw(this.ctx, drawing, o);
}
async curve(points, options) {
let o = this._options(options);
let lib = await this.lib();
let drawing = await lib.curve(points, o);
this._draw(this.ctx, drawing, o);
}
async path(d, options) {
if (!d) {
return;
}
let o = this._options(options);
let lib = await this.lib();
if (o.fill) {
if (o.fillStyle === 'solid') {
this.ctx.save();
this.ctx.fillStyle = o.fill;
let p2d = new Path2D(d);
this.ctx.fill(p2d);
this.ctx.restore();
} else {
let size = [0, 0];
try {
const ns = "http://www.w3.org/2000/svg";
let svg = document.createElementNS(ns, "svg");
svg.setAttribute("width", "0");
svg.setAttribute("height", "0");
let pathNode = document.createElementNS(ns, "path");
pathNode.setAttribute('d', d);
svg.appendChild(pathNode);
document.body.appendChild(svg);
let bb = pathNode.getBBox();
if (bb) {
size[0] = bb.width || 0;
size[1] = bb.height || 0;
}
document.body.removeChild(svg);
} catch (err) { }
if (!(size[0] * size[1])) {
size = [this.canvas.width || 100, this.canvas.height || 100];
}
size[0] = Math.min(size[0] * 4, this.canvas.width);
size[1] = Math.min(size[1] * 4, this.canvas.height);
let xc = [0, size[0], size[0], 0];
let yc = [0, 0, size[1], size[1]];
let fillShape = await lib.hachureFillShape(xc, yc, o);
let hcanvas = document.createElement('canvas');
hcanvas.width = size[0];
hcanvas.height = size[1];
this._fillSketch(hcanvas.getContext("2d"), fillShape, o);
this.ctx.save();
this.ctx.fillStyle = this.ctx.createPattern(hcanvas, 'repeat');
let p2d = new Path2D(d);
this.ctx.fill(p2d);
this.ctx.restore();
}
}
let drawing = await lib.svgPath(d, o);
this._draw(this.ctx, drawing, o);
}
// private
_options(options) {
return options ? Object.assign({}, this.defaultOptions, options) : this.defaultOptions;
}
_draw(ctx, drawing, o) {
ctx.save();
ctx.strokeStyle = o.stroke;
ctx.lineWidth = o.strokeWidth;
this._drawToContext(ctx, drawing);
ctx.restore();
}
_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();
}
_fill(ctx, drawing, o) {
ctx.save();
ctx.fillStyle = o.fill;
drawing.type = 'fillPath';
this._drawToContext(ctx, drawing, o);
ctx.restore();
}
_drawToContext(ctx, drawing) {
if (drawing.type === 'path' || drawing.type === 'fillPath') {
ctx.beginPath();
for (let 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();
}
}
}
}
var rough = {
canvas(canvas, config) {
return new RoughCanvas(canvas, config);
},
createRenderer() {
return RoughCanvas.createRenderer();
}
};
var RoughCanvas$1 = L.Canvas.extend({
_initContainer: function () {
L.Canvas.prototype._initContainer.call(this);
this._rc = rough.canvas(this._container);
},
_updatePoly: function (layer, closed) {
if (!this._drawing) { return; }
var parts = layer._parts,
len = parts.length,
ctx = this._ctx;
if (!len) { return; }
this._drawnLayers[layer._leaflet_id] = layer;
//------------------------ rough sketch begin
var svgPathStr = L.SVG.pointsToPath(parts, closed);
console.log(closed);
var options = layer.options;
var pathOption = {};
pathOption.roughness = options.roughness || 1;
pathOption.bowing = options.bowing || 1;
pathOption.stroke = options.strokeColor || '#000000';
pathOption.strokeWidth = options.strokeWidth || 1;
if (closed) {
pathOption.fill = options.fillColor || options.color;
pathOption.fillStyle = options.fillStyle || '';
pathOption.fillWeight = options.fillWeight || '';
pathOption.hachureAngle = options.hachureAngle || -41;
pathOption.hachureGap = options.hachureGap || 4;
// pathOption.simplification = options.simplification || 1;
}
pathOption.curveStepCount = options.curveStepCount || 9;
console.log(pathOption);
this._rc.path(svgPathStr, pathOption);
// //----------------------------- rough sketch end
},
});
L.Canvas.RoughCanvas = RoughCanvas$1;
L.Canvas.roughCanvas = () => {
return new RoughCanvas$1()
};
})));
//# sourceMappingURL=leaflet-roughcanvas.js.map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment