Create a gist now

Instantly share code, notes, and snippets.

Paper.js – Rounded corners in plain JavaScript
// Rounds the corners of a path in Paper.js
// Demo: http://sketch.paperjs.org/#S/lVRNj5swEP0rIy4LDSEQqRey0R52VamHqivtoYeQgxcmixXHRsawrVb8944NBfLRw3IA+c2b92bGNh+eZCf0Uu/liCYvvdDLVWHXLdNQG3ptQeI7PDNT+sEmkxbXrOBN/YsXpqRwEhOcydUKHjUyg8BcRl2yCgFb1H/goMnEUZgsQNU5F8IyTYlzsUweGpkbriQo+c3m+JQvTfCRSaDH1hNpPKkWXS0W69OpDP8HlRjVXPY5Ua4aaVbrOFgkwZeZyWbSmvUWvdDaH3zsk5MG6hRaju9RvwinaKW4NHUKydcZ2JskhMbxFby25DlcG62O+KiEIpe7V8Hy410f7YLzGjV1UrgNsEA4CFpSZwc/zmziVfQKBxpQU5lx24lvJ2rEDqtysxrWUS14jn5sFTNzFiLqbu/gg9K+FeEExSEI+oz5AuUbDZZi9yDos1gMrr1v3uhnO69Zyo7vIzfDzUST+Ntc82ABCWy3ZPgAMaTggOvkSmN7I3lJyfeU93BZrItYteUtNVvKEwrDSG2sfjlVeGF8gzrWM1BHxX/+22Ebh/go87+43RVWFPMjOh7E9MLYCYXnxJJunsCfjUknymrdi3fBZ13Gdm66fJfpxLgw6cYzlgtVY0GNGt2gi2k0jZbucNrDTT+jV/qjHPvL5qW7ffcX
// -- Translated from PaperScript to plain JavaScript. Originally by Alex Blackwood.
// -- http://stackoverflow.com/questions/25936566/paper-js-achieving-smoother-edges-with-closed-paths
function roundCorners(path,radius) {
var segments = path.segments.slice(0);
path.removeSegments();
for(var i = 0, l = segments.length; i < l; i++) {
var curPoint = segments[i].point;
var nextPoint = segments[i + 1 == l ? 0 : i + 1].point;
var prevPoint = segments[i - 1 < 0 ? segments.length - 1 : i - 1].point;
var nextDelta = curPoint.subtract(nextPoint);
var prevDelta = curPoint.subtract(prevPoint);
nextDelta.length = radius;
prevDelta.length = radius;
path.add(
new paper.Segment(
curPoint.subtract(prevDelta),
null,
prevDelta.divide(2)
)
);
path.add(
new paper.Segment(
curPoint.subtract(nextDelta),
nextDelta.divide(2),
null
)
);
}
path.closed = true;
return path;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment