paperjs-offset/demo/paperjs-offset.min.js

An offset function for paperjs path.

!function(S){"use strict";function p(e,t,n,r){var o=e.curve===t,i=t.getNormalAtTime(o?0:1).multiply(r),a=e.point.add(i),s=new S.Segment(a),c=o?"handleOut":"handleIn";return s[c]=e[c].add(n.subtract(i).divide(2)),s}function T(e,t){return e.x*t.y-e.y*t.x}function m(e,t,n,r,o,i){var a,s,c,u,f,l,d,h,p,m,g,v,w,P,b=new S.Curve(e[0],e[1]),k=new S.Curve(t[0],t[1]),C=b.getIntersections(k),y=e[1].point.getDistance(t[0].point);if(n.isSmooth())t[0].handleOut=t[0].handleOut.project(n.handleOut),t[0].handleIn=e[1].handleIn.project(n.handleIn),t[0].point=e[1].point.add(t[0].point).divide(2),e.pop();else if(0===C.length)if(y>.1*Math.abs(o))switch(r){case"miter":var A=(d=b.point2,h=b.point2.add(b.getTangentAtTime(1)),p=k.point1,m=k.point1.add(k.getTangentAtTime(0)),g=d.subtract(h),v=p.subtract(m),w=T(d,h),P=T(p,m),new S.Point(w*v.x-g.x*P,w*v.y-g.y*P).divide(T(g,v)));Math.max(A.getDistance(b.point2),A.getDistance(k.point1))<Math.abs(o)*i&&e.push(new S.Segment(A));break;case"round":var M=(a=e[1],s=t[0],c=n.point,u=o,f=a.point.subtract(c).add(s.point.subtract(c)).normalize(Math.abs(u)).add(c),l=new S.Path.Arc({from:a.point,to:s.point,through:f,insert:!1}),a.handleOut=l.firstSegment.handleOut,s.handleIn=l.lastSegment.handleIn,3===l.segments.length?l.segments[1]:null);M&&e.push(M)}else t[0].handleIn=e[1].handleIn,e.pop();else{var O=b.divideAt(C[0]);if(O){A=O.segment1;var I=k.divideAt(k.getIntersections(b)[0]);A.handleOut=I?I.segment1.handleOut:t[0].handleOut,e.pop(),t[0]=A}else t[0].handleIn=e[1].handleIn,e.pop()}}function g(e){return 1===e.children.length&&(e=e.children[0]).remove(),e}function v(e,t){if(void 0===t&&(t=.01),e.closed){var n=Math.abs(e.area*t);if(e.clockwise||e.reverse(),(e=e.unite(e,{insert:!1}))instanceof S.CompoundPath&&(e.children.filter(function(e){return Math.abs(e.area)<n}).forEach(function(e){return e.remove()}),1===e.children.length))return g(e)}return e}function w(e,t){var n=(e.segments[0].location.offset+e.segments[Math.max(1,Math.floor(e.segments.length/2))].location.offset)/3;return t.getNearestLocation(e.getPointAt(n)).offset<t.getNearestLocation(e.getPointAt(2*n)).offset}function P(e,t){var n;((n=e)instanceof S.CompoundPath?n.children.map(function(e){return e.segments}).flat():n.segments).slice().forEach(function(e){t.contains(e.point)||e.remove()})}function h(e,t,n,r){var o,i,a,s,c;s=t,(c=(a=e).clone({insert:!1})).reduce({}),a.clockwise||(c.reverse(),s=-s),t=(o=[c,s])[1];for(var u=(i=o[0]).curves.slice().map(function(e){return function e(t,n){var r=new S.Curve(t.segment1.handleOut.add(t.segment1.point),new S.Point(0,0),new S.Point(0,0),t.segment2.handleIn.add(t.segment2.point)).getNormalAtTime(.5).multiply(n),o=p(t.segment1,t,r,n),i=p(t.segment2,t,r,n),a=new S.Curve(o,i);if(0===a.getIntersections(a).length){var s=Math.min(Math.abs(n)/10,1),c=a.getPointAtTime(.5).getDistance(t.getPointAtTime(.5));if(Math.abs(c-Math.abs(n))>s){var u=t.divideAtTime(.5);if(null!=u)return e(t,n).concat(e(u,n))}}return[o,i]}(e,t)}).flat(),f=[],l=0;l<u.length;l+=2)f.push(u.slice(l,l+2));var d=function(e,t,n,r,o){for(var i=n.segments,a=e[0].slice(),s=0;s<e.length-1;++s)m(e[s],e[s+1],i[s+1],t,r,o);return n.closed&&(m(e[e.length-1],a,i[0],t,r,o),e[0][0]=a[0]),e}(f,n,i,t,r).flat(),h=function(t){if(t.closed){var e=t.unite(t,{insert:!1});if(e instanceof S.CompoundPath)return e.children.filter(function(e){return!(1<e.segments.length)||!w(e,t)}).forEach(function(e){return e.remove()}),g(e)}return t}(new S.Path({segments:d,insert:!1,closed:e.closed}));return h.reduce({}),i.closed&&(i.clockwise&&t<0||!i.clockwise&&0<t)&&P(h,e),i.clockwise!==e.clockwise&&h.reverse(),v(h)}function b(e,t,n){var r=e.point.add(t.point).divide(2),o=t.point.subtract(e.point).rotate(-90,new S.Point(0,0)).normalize(n),i=r.add(o);return new S.Path.Arc({from:e.point,to:t.point,through:i,insert:!1}).segments}function l(e,t,n,r,o){var i=h(e,t=e.clockwise?t:-t,n,o),a=h(e,-t,n,o);if(e.closed)return i.subtract(a,{insert:!1});var s=a,c=new Array;a instanceof S.CompoundPath&&((c=a.children.filter(function(e){return e.closed})).forEach(function(e){return e.remove()}),s=a.children[0]),s.reverse();var u=function(e,t,n,r){if(e instanceof S.CompoundPath){var o=e.children.map(function(e){return{c:e,a:Math.abs(e.area)}});e=(o=o.sort(function(e,t){return t.a-e.a}))[0].c}var i=e.segments.slice(),a=t.segments.slice();switch(r){case"round":var s=b(a[a.length-1],i[0],n),c=b(i[i.length-1],a[0],n),u=new S.Path({segments:s.concat(i,c,a),closed:!0,insert:!1});return u.reduce({}),u;default:return new S.Path({segments:i.concat(a),closed:!0,insert:!1})}}(i,s,t,r);if(0<c.length)for(var f=0,l=c;f<l.length;f++){var d=l[f];u=u.subtract(d,{insert:!1})}return u}function d(e){return e.closed?e.unite(e,{insert:!1}):e}S=S&&Object.prototype.hasOwnProperty.call(S,"default")?S.default:S;var e,n=(t.offset=function(e,t,n){var r=function(n,r,o,i){var e=d(n),t=e;if(e instanceof S.Path)t=h(e,r,o,i);else{var a=e.children.map(function(e){if(1<e.segments.length){w(e,n)||e.reverse();var t=h(e,r,o,i);return(t=v(t)).clockwise!==e.clockwise&&t.reverse(),t instanceof S.CompoundPath?(t.applyMatrix=!0,t.children):t}return null}).flat().filter(function(e){return!!e});t=new S.CompoundPath({children:a,insert:!1})}return t.copyAttributes(e,!1),t.remove(),t}(e,t,(n=n||{}).join||"miter",n.limit||10);return void 0===n.insert&&(n.insert=!0),n.insert&&(e.parent||S.project.activeLayer).addChild(r),r},t.offsetStroke=function(e,t,n){var r,o,i,a,s,c,u,f=(r=e,o=t,i=(n=n||{}).join||"miter",a=n.cap||"butt",s=n.limit||10,c=d(r),(u=(u=c)instanceof S.Path?l(c,o,i,a,s):c.children.flatMap(function(e){return l(e,o,i,a,s)}).reduce(function(e,t){return e.unite(t,{insert:!1})})).strokeWidth=0,u.fillColor=c.strokeColor,u.shadowBlur=c.shadowBlur,u.shadowColor=c.shadowColor,u.shadowOffset=c.shadowOffset,u);return void 0===n.insert&&(n.insert=!0),n.insert&&(e.parent||S.project.activeLayer).addChild(f),f},t);function t(){}(e=S).Path.prototype.offset=function(e,t){return n.offset(this,e,t)},e.Path.prototype.offsetStroke=function(e,t){return n.offsetStroke(this,e,t)},e.CompoundPath.prototype.offset=function(e,t){return n.offset(this,e,t)},e.CompoundPath.prototype.offsetStroke=function(e,t){return n.offsetStroke(this,e,t)},window.PaperOffset={offset:n.offset,offsetStroke:n.offsetStroke}}(paper);