UNPKG

svg.pathmorphing2.js

Version:

Another plugin for the svg.js library to enable path morphing / animation

1 lines 6.44 kB
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("svg.js"),require("svg.point.js")):"function"==typeof define&&define.amd?define(["svg","svg.point"],e):"object"==typeof exports?exports.SVG=e(require("svg.js"),require("svg.point.js")):t.SVG=e(t.SVG,t.SVG)}(this,function(t,e){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){var r=n(1),o=n(2);t.exports=r,r.extend(r.PathArray,{equalCommands:function(t){var e,n,o;for(t=new r.PathArray(t),o=this.value.length===t.value.length,e=0,n=this.value.length;o&&e<n;e++)o=this.value[e][0]===t.value[e][0];return o}}),r.utils.makePathsMorphable=function(t,e){var n,r,s,a,i,l,h,u,c,p,f,g,m,v,y;for(n=o.cubicSuperPath(t),a=o.cubicSuperPath(e),r=o.positions(n),i=o.positions(a),s=[],l=[],h=0,u=r.length,c=0,p=i.length;h<u&&c<p;)Math.abs(r[h]-i[c])<1e-6?(h++,c++):r[h]>i[c]?s.push(i[c++]):l.push(r[h++]);for(s=s.concat(i.slice(c)),l=l.concat(r.slice(h)),o.splitAtPositions(n,r,s),o.splitAtPositions(a,i,l),f=n,n=[],m=f[h=0],g=a,a=[],v=g[c=0];m&&v;)n.push(m),a.push(v),u=m.length,p=v.length,u>p?(y=m[p-1],m=m.splice(p),m.unshift(y),v=g[++c]):u<p?(y=v[u-1],v=v.splice(u),v.unshift(y),m=f[++h]):(m=f[++h],v=g[++c]);return[o.uncubicSuperPath(n),o.uncubicSuperPath(a)]},r.extend(r.PathArray,{morph:function(t){var e;return this.destination=new r.PathArray(t),this.equalCommands(this.destination)?(this.sourceMorphable=this,this.destinationMorphable=this.destination):(e=r.utils.makePathsMorphable(this.value,this.destination),this.sourceMorphable=e[0],this.destinationMorphable=e[1]),this},at:function(t){if(0!==t&&this.destination&&this.sourceMorphable&&this.destinationMorphable){if(1===t)return this.destination;var e,n,o,s,a=this.sourceMorphable.value,i=this.destinationMorphable.value,l=[],h=new r.PathArray;for(e=0,n=a.length;e<n;e++){for(l[e]=[a[e][0]],o=1,s=a[e].length;o<s;o++)l[e][o]=a[e][o]+(i[e][o]-a[e][o])*t;"A"===l[e][0]&&(l[e][4]=+(0!=l[e][4]),l[e][5]=+(0!=l[e][5]))}return h.value=l,h}return this}})},function(e,n){e.exports=t},function(t,e,n){function r(t,e){var n,r,o,s,a,l,h,u,c,p,f,g,m,v,y,P,b,M,x,d,w,A,S=Math.abs(e[0]),k=Math.abs(e[1]),q=e[2]%360,j=e[3],C=e[4],V=e[5],G=e[6],L=t,I=new i.Point(V,G);if(0===S||0===k||L.x===I.x&&L.y===I.y)return[[L,L.clone(),L.clone()],[I,I.clone(),I.clone()]];for(n=L.minus(I).divide(2).transform((new i.Matrix).rotate(q)),r=n.x*n.x/(S*S)+n.y*n.y/(k*k),r>1&&(r=Math.sqrt(r),S*=r,k*=r),o=(new i.Matrix).rotate(q).scale(1/S,1/k).rotate(-q),L=L.transform(o),I=I.transform(o),s=[I.x-L.x,I.y-L.y],l=s[0]*s[0]+s[1]*s[1],a=Math.sqrt(l),s[0]/=a,s[1]/=a,h=l<4?Math.sqrt(1-l/4):0,j===C&&(h*=-1),u=new i.Point((I.x+L.x)/2+h*-s[1],(I.y+L.y)/2+h*s[0]),c=L.minus(u),p=I.minus(u),f=Math.acos(c.x/c.norm()),c.y<0&&(f*=-1),g=Math.acos(p.x/p.norm()),p.y<0&&(g*=-1),C&&f>g&&(g+=2*Math.PI),!C&&f<g&&(g-=2*Math.PI),v=Math.ceil(2*Math.abs(f-g)/Math.PI),P=[],b=f,m=(g-f)/v,y=4*Math.tan(m/4)/3,w=0;w<=v;w++)x=Math.cos(b),M=Math.sin(b),d=u.plus(x,M),P[w]=[d.plus(+y*M,-y*x),d,d.plus(-y*M,+y*x)],b+=m;for(P[0][0]=P[0][1].clone(),P[P.length-1][2]=P[P.length-1][1].clone(),o=(new i.Matrix).rotate(q).scale(S,k).rotate(-q),w=0,A=P.length;w<A;w++)P[w][0]=P[w][0].transform(o),P[w][1]=P[w][1].transform(o),P[w][2]=P[w][2].transform(o);return P}function o(t,e,n){t=[t[0].clone(),t[1].clone(),t[2].clone()],e=[e[0].clone(),e[1].clone(),e[2].clone()];var r=t[1].morph(t[2]).at(n),o=t[2].morph(e[0]).at(n),s=e[0].morph(e[1]).at(n),a=r.morph(o).at(n),i=o.morph(s).at(n),l=a.morph(i).at(n);return[[t[0],t[1],r],[a,l,i],[s,e[1],e[2]]]}function s(t,e){var n=document.createElementNS(i.ns,"path"),r=["M",t[1].toArray(),"C",t[2].toArray(),e[0].toArray(),e[1].toArray()].join(" ");return n.setAttribute("d",r),n.getTotalLength()}function a(t,e,n){for(var r=1,a=r,i=s(t,e),l=n*i,h=i-l,u=o(t,e,r),c=4096;Math.abs(h)>.001&&c--;)a/=2,r+=h<0?a:-a,u=o(t,e,r),i=s(u[0],u[1]),h=i-l;return u}var i=n(3);e.cubicSuperPath=function(t){t=new i.PathArray(t);var e,n,o,s,a,l,h,u,c,p=[],f=null,g=null,m=null,v=null,y=null;for(e=0,n=t.value.length;e<n;e++)switch(s=y,y=t.value[e][0],o=t.value[e].slice(1),y){case"M":m&&f.push([v,m,m.clone()]),f=[],p.push(f),g=new i.Point(o),m=g.clone(),v=g.clone();break;case"L":f.push([v,m,m.clone()]),m=new i.Point(o),v=m.clone();break;case"H":f.push([v,m,m.clone()]),m=new i.Point(o[0],m.y),v=m.clone();break;case"V":f.push([v,m,m.clone()]),m=new i.Point(m.x,o[0]),v=m.clone();break;case"C":f.push([v,m,new i.Point(o.slice(0,2))]),m=new i.Point(o.slice(4,6)),v=new i.Point(o.slice(2,4));break;case"S":"C"===s||"S"===s?f.push([v,m,m.times(2).minus(v)]):f.push([v,m,m.clone()]),m=new i.Point(o.slice(2,4)),v=new i.Point(o.slice(0,2));break;case"Q":a=m,l=new i.Point(o.slice(0,2)),h=new i.Point(o.slice(2,4)),f.push([v,a,a.times(1/3).plus(l.times(2/3))]),m=h,v=l.times(2/3).plus(h.times(1/3));break;case"T":a=m,l="Q"===s||"T"===s?a.times(2).minus(l):a,h=new i.Point(o.slice(0,2)),f.push([v,a,a.times(1/3).plus(l.times(2/3))]),m=h,v=l.times(2/3).plus(h.times(1/3));break;case"A":u=r(m,o),u[0][0]=v,c=u.pop(),m=c[1],v=c[0],Array.prototype.push.apply(f,u);break;case"Z":f.push([v,m,m.clone()]),m.x!=g.x&&m.y!=g.y?(m=g,v=g.clone()):(m=null,v=null)}return m&&f.push([v,m,m.clone()]),p},e.uncubicSuperPath=function(t){var e,n,r,o,s,a=[],l=new i.PathArray;for(e=0,n=t.length;e<n;e++)if(s=t[e],s.length)for(a.push(["M"].concat(s[0][1].toArray())),r=1,o=s.length;r<o;r++)a.push(["C"].concat(s[r-1][2].toArray(),s[r][0].toArray(),s[r][1].toArray()));return l.value=a,l},e.segSplit=o,e.segLength=s,e.lengths=function(t){var e,n,r,o,a,i,l,h=0,u=[];for(o=0,a=t.length;o<a;o++)for(e=t[o],n=[],u[o]=n,i=1,l=e.length;i<l;i++)r=s(e[i-1],e[i]),n[i-1]=r,h+=r;return u.total=h,u},e.segSplitAtLengthRatio=a,e.positions=function(t){var n,r,o,s,a=e.lengths(t),i=a.total,l=0,h=[];for(n=0,r=a.length;n<r;n++)for(o=0,s=a[n].length;o<s;o++)l+=a[n][o]/i,h.push(l);return h},e.splitAtPositions=function(t,e,n){var r,o,s,i,l,h,u,c,p,f,g,m=0,v=0,y=0,P=n.length;for(c=0,p=t.length;c<p&&y<P;c++)if(r=t[c],!(r.length<2)){if(n[y]<e[m+r.length-2])for(v=m,o=[],t[c]=o,h=e[v-1]||0,o.push(r[0]),f=1,g=r.length;f<g;f++){for(u=h,h=e[v++],s=r[f];y<P&&n[y]<h;)i=(n[y]-u)/(h-u),l=a(o[o.length-1],s,i),o[o.length-1]=l[0],o.push(l[1]),s=l[2],u=n[y++];o.push(s)}m+=r.length-1}}},function(t,n){t.exports=e}])});