Skip to content

Instantly share code, notes, and snippets.

@lehni

lehni/index.html

Last active August 10, 2022 11:29
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save lehni/9aa7d593235f04a3915ac4cef92def02 to your computer and use it in GitHub Desktop.
Save lehni/9aa7d593235f04a3915ac4cef92def02 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!--
Copyright (c) 2014-2017, Jan Bösenberg & Jürg Lehni
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<meta charset="UTF-8">
<title>Paper.js Bézier Offsetting</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/paperjs/paper.js/prebuilt/module/dist/paper-full.js"></script>
<script type="text/javascript" src="offset.js"></script>
<script type="text/paperscript" canvas="canvas">
paper.install(window); // For offset.js
var inner = true;
var outer = true;
var fullySelected = false;
var reportCount = false;
var path;
var offsetPaths = [];
var overlays = [];
// Create initial curve.
path = new Path({
segments: [ // A
{ point: { x: 350, y: 360 }, handleOut: { x: -50, y: 150 } },
{ point: { x: 450, y: 110 }, handleIn: { x: -400, y: 0 }, handleOut: { x: -150, y: 300 } },
{ point: { x: 650, y: 400 }, handleIn: { x: -50, y: 0 }, handleOut: { x: 50, y: -150 } },
{ point: { x: 100, y: 280 }, handleIn: { x: 300, y: -100 } }
],
closed: false,
selectedColor: 'black',
strokeJoin: 'round',
strokeCap: 'round',
fullySelected: true
});
window.path = path; // for debugging.
function drawCircle(center, color) {
overlays.push(new Shape.Circle({
center: center,
radius: 4,
strokeColor: color || 'red',
strokeScaling: false
}));
}
function updatePath() {
// remove previous objects from project
offsetPaths.forEach(function(path) {
path.remove();
});
overlays.forEach(function(item) {
item.remove();
});
offsetPaths = [];
overlays = [];
var offset = $('#slider-offset').val(),
outerPath = outer && OffsetUtils.offsetPath(path, offset, true),
innerPath = inner && OffsetUtils.offsetPath(path, -offset, true),
selected = fullySelected ? 'fullySelected' : 'selected',
startTime = Date.now();
if (outerPath) {
outerPath.insertBelow(path);
offsetPaths.push(outerPath);
outerPath.strokeColor = outerPath.selectedColor = '#00aaff';
outerPath.strokeScaling = false;
outerPath[selected] = true;
if (reportCount)
console.log('outer', outerPath.segments.length);
}
if (innerPath) {
innerPath.insertBelow(path);
offsetPaths.push(innerPath);
innerPath.strokeColor = innerPath.selectedColor = '#ffaa00';
innerPath.strokeScaling = false;
innerPath[selected] = true;
if (reportCount)
console.log('inner', innerPath.segments.length);
}
if (true) {
var res = OffsetUtils.joinOffsets(outerPath.clone(), innerPath.clone(),
path, offset);
res.remove();
if (false) {
var intersection = res.getIntersections();
console.log('intersection', intersection.length);
intersection.forEach(function(loc) {
overlays.push(new Shape.Circle({
center: loc.point,
radius: 4,
strokeColor: loc.hasOverlap() ? 'orange' : loc.isCrossing() ? 'red' : 'green',
strokeScaling: false
}));
});
}
if (true) {
res = res.unite();
// OffsetUtils.cleanupPath(res);
}
res.insertBelow(innerPath);
res.fillColor = 'yellow';
res.strokeColor = res.selectedColor = 'black';
offsetPaths.push(res);
}
var time = Date.now() - startTime;
if (time > 40) {
// reportPath('Time: ' + time);
}
updateCircles();
}
function reportPath(title) {
console.log(title);
console.log(path.exportJSON({ precision: 16 }));
}
function updateCircles() {
overlays.forEach(function(item) {
item.scaling = 1 / view.zoom;
});
}
function getBlobURL(content, type) {
return URL.createObjectURL(new Blob([content], {
type: type
}));
}
function getTimeStamp() {
var parts = new Date().toJSON().toString().replace(/[-:]/g, '').match(
/^20(.*)T(.*)\.\d*Z$/);
return parts[1] + '_' + parts[2];
}
updatePath();
$('#slider-offset').on('input', function() {
updatePath();
});
$('#select-join').on('input', function() {
path.strokeJoin = this.value;
updatePath();
});
$('#select-cap').on('input', function() {
path.strokeCap = this.value;
updatePath();
});
$('#export-svg').click(function() {
var svg = project.exportSVG({ asString: true });
this.href = getBlobURL(svg, 'image/svg+xml');
this.download = 'Export_' + getTimeStamp() + '.svg';
});
var panning = false,
lastPoint,
hit;
var tool = new Tool().on({
keydown: function(event) {
// zooming and panning
var key = event.key;
if (/[+-=]/.test(key)) {
var factor = 1.25;
view.zoom *= key === '-' ? 1 / factor : factor;
updateCircles();
return false;
} else if (/^(left|right|up|down)$/.test(key)) {
var step = 10 / view.zoom;
view.scrollBy(new Point(
{ left: step, right: -step }[key] || 0,
{ up: step, down: -step }[key] || 0
));
return false;
} else if (key === 'space') {
panning = true;
lastPoint = null;
return false;
}
},
keyup: function(event) {
if (event.key === 'space') {
panning = false;
lastPoint = null;
}
},
mousedown: function(event) {
if (!panning) {
hit = project.hitTest(event.point, {
tolerance: 10,
segments: true,
handles: true
});
}
},
mousedrag: function(event) {
if (panning) {
// In order to have coordinate changes not mess up the dragging,
// we need to convert coordinates to view space, and then back to
// project space after the view space has changed.
var point = view.projectToView(event.point);
if (lastPoint) {
view.scrollBy(view.viewToProject(lastPoint) - event.point);
}
lastPoint = point;
} else {
var name = {
'segment': 'point',
'handle-in': 'handleIn',
'handle-out': 'handleOut'
}[hit && hit.type];
if (name) {
hit.segment[name] += event.delta;
updatePath();
}
}
}
});
// Zoom
$('#canvas').on('wheel', function(event) {
var e = event.originalEvent,
point = view.viewToProject(DomEvent.getPoint(e)),
delta = e.deltaY || 0,
scale = 1 + delta / 100;
view.scale(scale, point);
updateCircles();
return false;
});
</script>
</head>
<body>
<h1>Paper.js Bézier Offsetting</h1>
<div class="canvas">
<canvas id="canvas" resize></canvas>
</div>
<div class="options">
<div class="option">
<label>Offset Distance:
<input id="slider-offset" type="range" min="1" max="100" value="31">
</label>
</div>
<div class="option">
<label>Stroke Join:
<select id="select-join">
<option value="round" selected>Round</option>
<option value="miter">Miter</option>
<option value="bevel">Bevel</option>
</select>
</label>
</div>
<div class="option">
<label>Stroke Cap:
<select id="select-cap">
<option value="round" selected>Round</option>
<option value="square">Square</option>
<option value="butt">Butt</option>
</select>
</label>
</div>
<div class="option">
<a id="export-svg" target="_blank" title="Export SVG" href="#">Export to SVG</a>
</div>
<div class="description">
<p>Zoom in and out with the scroll wheel or&nbsp;+&nbsp;and&nbsp;-&nbsp;keys.</p>
<p>Pan the view with the mouse while holding the space-bar, or by using the arrow keys.</p>
</div>
</div>
</body>
</html>
Raw
offset.js
/*
Copyright (c) 2014-2017, Jan Bösenberg & Jürg Lehni
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
var OffsetUtils = new function() {
var errorThreshold = 0.1,
epsilon = 1e-12;
geomEpsilon = 1e-8,
abs = Math.abs,
enforeArcs = false;
function offsetPath(path, offset, dontMerge) {
var result = new Path({ insert: false }),
curves = path.getCurves(),
strokeJoin = path.getStrokeJoin(),
miterLimit = path.getMiterLimit();
for (var i = 0, l = curves.length; i < l; i++) {
var curve = curves[i];
if (curve.hasLength(geomEpsilon)) {
var segments = getOffsetSegments(curve, offset);
if (!result.isEmpty()) {
connect(result, segments.shift(), curve.segment1,
offset, strokeJoin, miterLimit, true);
}
result.addSegments(segments);
}
}
if (path.isClosed() && !result.isEmpty()) {
connect(result, result.firstSegment, path.firstSegment,
offset, strokeJoin, miterLimit);
if (dontMerge) {
result.setClosed(true);
} else {
result.closePath();
}
}
return result;
}
function connect(path, dest, originSegment, offset, type, miterLimit,
addLine) {
function fixHandles(seg) {
var handleIn = seg.handleIn,
handleOut = seg.handleOut;
if (handleIn.length < handleOut.length) {
seg.handleIn = handleIn.project(handleOut);
} else {
seg.handleOut = handleOut.project(handleIn);
}
}
function addPoint(point) {
if (!point.equals(path.lastSegment.point)) {
path.add(point);
}
}
var center = originSegment.point,
start = path.lastSegment,
pt1 = start.point,
pt2 = dest.point,
connected = false;
if (!pt1.isClose(pt2, geomEpsilon)) {
if (enforeArcs
// decide if the join is inside or outside the stroke
// by checking on which side of the line connecting pt1
// and pt2 the center lies.
|| new Line(pt1, pt2).getSignedDistance(center)
* offset <= geomEpsilon) {
// Calculate the through point based on the vectors from center
// to pt1 / pt2
var radius = abs(offset);
switch (type) {
case 'round':
// Try adding the vectors together to get the average vector
// which can be normalized to radius length to get the
// through point except if the two vectors have 180° between
// them, in which case we can rotate one of them by 90°.
var v1 = pt1.subtract(center),
v2 = pt2.subtract(center),
v = v1.add(v2),
through = v.getLength() < geomEpsilon
? v2.rotate(90).add(center)
: center.add(v.normalize(radius));
path.arcTo(through, pt2);
break;
case 'miter':
Path._addBevelJoin(originSegment, 'miter', radius, 4,
null, null, addPoint);
break;
case 'square':
Path._addSquareCap(originSegment, 'square', radius,
null, null, addPoint);
break;
default: // 'bevel' / 'butt'
path.lineTo(pt2);
}
connected = true;
} else if (addLine) {
path.lineTo(pt2);
connected = true;
}
if (connected) {
fixHandles(start);
var last = path.lastSegment;
fixHandles(last);
// Adjust handleOut, except for when connecting back to the
// beginning on closed paths.
if (dest !== path.firstSegment) {
last.handleOut = dest.handleOut;
}
}
}
return connected;
}
function joinOffsets(outerPath, innerPath, originPath, offset) {
outerPath.closed = innerPath.closed = false;
var path = outerPath,
open = !originPath.closed,
strokeCap = originPath.strokeCap;
path.reverse();
if (open) {
connect(path, innerPath.firstSegment, originPath.firstSegment,
offset, strokeCap);
}
path.join(innerPath);
if (open) {
connect(path, path.firstSegment, originPath.lastSegment,
offset, strokeCap);
}
path.closePath();
return path;
}
function cleanupPath(path) {
path.children.forEach(function(child) {
if (Math.abs(child.area) < errorThreshold)
child.remove();
});
}
/**
* Creates an offset for the specified curve and returns the segments of
* that offset path.
*
* @param {Curve} curve the curve to be offset
* @param {Number} offset the offset distance
* @returns {Segment[]} an array of segments describing the offset path
*/
function getOffsetSegments(curve, offset) {
if (curve.isStraight()) {
var n = curve.getNormalAtTime(0.5).multiply(offset),
p1 = curve.point1.add(n),
p2 = curve.point2.add(n);
return [new Segment(p1), new Segment(p2)];
} else {
var curves = splitCurveForOffseting(curve),
segments = [];
for (var i = 0, l = curves.length; i < l; i++) {
var offsetCurves = getOffsetCurves(curves[i], offset, 0),
prevSegment;
for (var j = 0, m = offsetCurves.length; j < m; j++) {
var curve = offsetCurves[j],
segment = curve.segment1;
if (prevSegment) {
prevSegment.handleOut = segment.handleOut.project(
prevSegment.handleIn);
} else {
segments.push(segment);
}
segments.push(prevSegment = curve.segment2);
}
}
return segments;
}
}
function getOffsetCurves(curve, offset) {
var radius = abs(offset);
function getOffsetPoint(v, t) {
return Curve.getPoint(v, t).add(
Curve.getNormal(v, t).multiply(offset));
}
/**
* Approach for Curve Offsetting based on:
* "A New Shape Control and Classification for Cubic Bézier Curves"
* Shi-Nine Yang and Ming-Liang Huang
*/
function offsetAndSubdivide(curve, curves) {
var v = curve.getValues(),
ps = [getOffsetPoint(v, 0), getOffsetPoint(v, 1)],
ts = [Curve.getTangent(v, 0), Curve.getTangent(v, 1)],
pt = getOffsetPoint(v, 0.5),
div = ts[0].cross(ts[1]) * 3 / 4,
d = pt.add(pt).subtract(ps[0].add(ps[1])),
a = d.cross(ts[1]) / div,
b = d.cross(ts[0]) / div,
hs = [ts[0].multiply(a), ts[1].multiply(-b)];
// If the two handles end up pointing into opposite directions,
// reset the shorter one to avoid tiny loops at singularities,
// and make sure the other handle does not cross the tangent.
if (a < 0 && b > 0 || a > 0 && b < 0) {
var flip = abs(a) > abs(b),
i1 = flip ? 0 : 1, // index of the longer handle
i2 = i1 ^ 1, // index of the shorter handle
p = ps[i1],
h = hs[i1],
cross = new Line(p, h, true).intersect(
new Line(ps[i2], ts[i2], true), true);
// Reset the shorter handle.
hs[i2] = null;
// See if the longer handle crosses the other tangent, and if so
// scale it to avoid crossing and hence producing tiny loops.
if (cross) {
var nh = cross.subtract(p),
scale = nh.dot(h) / h.dot(h);
if (0 < scale && scale < 1) {
hs[i1] = nh;
}
}
}
// Now create the offset curve, sample the maximum error, and keep
// subdividing if it is too large.
var offsetCurve = new Curve(ps[0], hs[0], hs[1], ps[1]),
error = getOffsetError(v, offsetCurve.getValues(), radius);
if (error > errorThreshold
// If the whole curve is shorter than the error, ignore
// offsetting errors and stop iterating now. This simple
// measure along with checks of a and b above fixes all
// singularity issues.
&& offsetCurve.getLength() > errorThreshold) {
var curve2 = curve.divideAtTime(getAverageTangentTime(v));
offsetAndSubdivide(curve, curves);
offsetAndSubdivide(curve2, curves);
} else {
curves.push(offsetCurve);
}
return curves;
}
return offsetAndSubdivide(curve, []);
}
function getOffsetError(cv, ov, radius) {
var count = 16,
error = 0;
for (var i = 1; i < count; i++) {
var t = i / count,
p = Curve.getPoint(cv, t),
n = Curve.getNormal(cv, t),
roots = Curve.getCurveLineIntersections(ov,
p.x, p.y, n.x, n.y),
dist = 2 * radius;
for (var j = 0, l = roots.length; j < l; j++) {
var d = Curve.getPoint(ov, roots[j]).getDistance(p);
if (d < dist)
dist = d;
}
var err = abs(radius - dist);
if (err > error)
error = err;
}
return error;
}
/**
* Split curve into sections that can then be treated individually by an
* offset algorithm.
*/
function splitCurveForOffseting(curve) {
var curves = [curve.clone()]; // Clone so path is not modified.
if (curve.isStraight())
return curves;
function splitAtRoots(index, roots, noHandles) {
for (var i = 0, prevT, l = roots && roots.length; i < l; i++) {
var t = roots[i];
var curve = curves[index].divideAtTime(
// Renormalize curve-time for multiple roots:
i ? (t - prevT) / (1 - prevT) : t);
prevT = t;
if (curve) {
curves.splice(++index, 0, curve);
}
}
}
// Recursively splits the specified curve if the angle between the two
// handles is too large (we use 60° as a threshold).
function splitLargeAngles(index, recursion) {
var curve = curves[index],
v = curve.getValues(),
n1 = Curve.getNormal(v, 0),
n2 = Curve.getNormal(v, 1).negate(),
cos = n1.dot(n2);
if (cos > -0.5 && ++recursion < 4) {
curves.splice(index + 1, 0,
curve.divideAtTime(getAverageTangentTime(v)));
splitLargeAngles(index + 1, recursion);
splitLargeAngles(index, recursion);
}
}
// Split curves at cusps and inflection points.
var info = curve.classify(),
roots = info.roots;
if (roots && info.type !== 'loop') {
splitAtRoots(0, roots);
}
// Split sub-curves at peaks.
var getPeaks = Curve.getPeaks;
for (var i = curves.length - 1; i >= 0; i--) {
splitAtRoots(i, getPeaks(curves[i].getValues()));
}
// Split sub-curves with too large angle between handles.
for (var i = curves.length - 1; i >= 0; i--) {
splitLargeAngles(i, 0);
}
return curves;
}
/**
* Returns the first curve-time where the curve has its tangent in the same
* direction as the average of the tangents at its beginning and end.
*/
function getAverageTangentTime(v) {
var tan = Curve.getTangent(v, 0).add(
Curve.getTangent(v, 0.5)).add(
Curve.getTangent(v, 1)),
tx = tan.x,
ty = tan.y,
flip = abs(ty) < abs(tx),
s = flip ? ty / tx : tx / ty,
ia = flip ? 1 : 0, // the abscissa index
io = ia ^ 1, // the ordinate index
a0 = v[ia + 0], o0 = v[io + 0],
a1 = v[ia + 2], o1 = v[io + 2],
a2 = v[ia + 4], o2 = v[io + 4],
a3 = v[ia + 6], o3 = v[io + 6],
aA = -a0 + 3 * a1 - 3 * a2 + a3,
aB = 3 * a0 - 6 * a1 + 3 * a2,
aC = -3 * a0 + 3 * a1,
oA = -o0 + 3 * o1 - 3 * o2 + o3,
oB = 3 * o0 - 6 * o1 + 3 * o2,
oC = -3 * o0 + 3 * o1,
roots = [],
epsilon = Numerical.CURVETIME_EPSILON,
count = Numerical.solveQuadratic(
3 * (aA - s * oA),
2 * (aB - s * oB),
aC - s * oC, roots,
epsilon, 1 - epsilon);
// Fall back to 0.5, so we always have a place to split...
return count > 0 ? roots[0] : 0.5;
}
return {
offsetPath: offsetPath,
joinOffsets: joinOffsets,
cleanupPath: cleanupPath
};
};
Raw
style.css
html,
body {
width: 100%;
height: 100%;
background-color: #fff;
color: #333;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
padding: 0;
}
.canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
canvas[resize] {
width: 100%;
height: 100%;
}
h1,
.options {
position: absolute;
z-index: 1;
background: #fff;
padding: 10px;
border-radius: 10px;
}
.options {
display: table;
font-size: 16px;
line-height: 20px;
width: 320px;
right: 10px;
top: 10px;
}
.option {
display: table-row;
margin-bottom: 20px;
}
.option label,
.option input {
}
.option input[type="range"] {
position: relative;
width: 100%;
}
.description {
font-size: 12px;
line-height: 16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment