From 1dacaa3842e43f15092323abe678d2bba7bc6e57 Mon Sep 17 00:00:00 2001 From: Dmitry Baranovskiy Date: Fri, 26 Aug 2011 14:05:26 +1000 Subject: [PATCH] Documentation fixes + custom attributes and getPointAtLength fix --- raphael-min.js | 2 +- raphael.core.js | 88 ++++--- raphael.js | 13 +- raphael.svg.js | 30 --- reference.html | 676 ++++++++++++++++++++++++------------------------ reference.js | 248 ++++++++++++++++++ 6 files changed, 637 insertions(+), 420 deletions(-) create mode 100644 reference.js diff --git a/raphael-min.js b/raphael-min.js index 278a7c1..88e8a57 100644 --- a/raphael-min.js +++ b/raphael-min.js @@ -5,4 +5,4 @@ // │ Copyright (c) 2008-2011 Sencha Labs (http://sencha.com) │ \\ // │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\ // └─────────────────────────────────────────────────────────────────────┘ \\ -(function(a){var b="0.3.0",c="hasOwnProperty",d=/[\.\/]/,e="*",f=function(){},g=function(a,b){return a-b},h,i,j={n:{}},k=function(a,b){var c=j,d=Array.prototype.slice.call(arguments,2),e=k.listeners(a),f=0,l=!1,m,n=[],o={},p=[],q=[];h=a,i=0;for(var r=0,s=e.length;rf*b.top){e=b.percents[w],o=b.percents[w-1]||0,q=q/b.top*(e-o),n=b.percents[w+1],j=b.anim[e];break}f&&d.attr(b.anim[b.percents[w]])}if(!!j){if(!k){for(attr in j)if(j[g](attr))if(U[g](attr)||d.paper.customAttributes[g](attr)){s[attr]=d.attr(attr),s[attr]==null&&(s[attr]=T[attr]),t[attr]=j[attr];switch(U[attr]){case C:u[attr]=(t[attr]-s[attr])/q;break;case"colour":s[attr]=a.getRGB(s[attr]);var y=a.getRGB(t[attr]);u[attr]={r:(y.r-s[attr].r)/q,g:(y.g-s[attr].g)/q,b:(y.b-s[attr].b)/q};break;case"path":var z=bG(s[attr],t[attr]),A=z[1];s[attr]=z[0],u[attr]=[];for(w=0,x=s[attr].length;wd)return d;while(cf?c=e:d=e,e=(d-c)/2+c}return e}function n(a,b){var c=o(a,b);return((l*c+k)*c+j)*c}function m(a){return((i*a+h)*a+g)*a}var g=3*b,h=3*(d-b)-g,i=1-g-h,j=3*c,k=3*(e-c)-j,l=1-j-k;return n(a,1/(200*f))}function cd(){return this.x+q+this.y+q+this.width+" × "+this.height}function cc(){return this.x+q+this.y}function bR(a,b,c,d,e,f){a!=null?(this.a=+a,this.b=+b,this.c=+c,this.d=+d,this.e=+e,this.f=+f):(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0)}function bw(a){var b=[];for(var c=0,d=a.length;d-2>c;c+=2){var e=[{x:+a[c],y:+a[c+1]},{x:+a[c],y:+a[c+1]},{x:+a[c+2],y:+a[c+3]},{x:+a[c+4],y:+a[c+5]}];d-4==c?(e[0]={x:+a[c-2],y:+a[c-1]},e[3]=e[2]):c&&(e[0]={x:+a[c-2],y:+a[c-1]}),b.push(["C",(-e[0].x+6*e[1].x+e[2].x)/6,(-e[0].y+6*e[1].y+e[2].y)/6,(e[1].x+6*e[2].x-e[3].x)/6,(e[1].y+6*e[2].y-e[3].y)/6,e[2].x,e[2].y])}return b}function bv(){return this.hex}function bt(a,b,c){function d(){var e=Array.prototype.slice.call(arguments,0),f=e.join("␀"),h=d.cache=d.cache||{},i=d.count=d.count||[];if(h[g](f)){bs(i,f);return c?c(h[f]):h[f]}i.length>=1e3&&delete h[i.shift()],i.push(f),h[f]=a[m](b,e);return c?c(h[f]):h[f]}return d}function bs(a,b){for(var c=0,d=a.length;c',bk=bj.firstChild,bk.style.behavior="url(#default#VML)";if(!bk||typeof bk.adj!="object")return a.type=p;bj=null}a.svg=!(a.vml=a.type=="VML"),a._Paper=j,a.fn=k=j.prototype=a.prototype,k.customAttributes={},a._id=0,a._oid=0,a.is=function(a,b){b=v.call(b);if(b=="finite")return!M[g](+a);if(b=="array")return a instanceof Array;return b=="null"&&a===null||b==typeof a||b=="object"&&a===Object(a)||b=="array"&&Array.isArray&&Array.isArray(a)||H.call(a).slice(8,-1).toLowerCase()==b},a.angle=function(b,c,d,e,f,g){if(f==null){var h=b-d,i=c-e;if(!h&&!i)return 0;return(180+w.atan2(-i,-h)*180/B+360)%360}return a.angle(b,c,f,g)-a.angle(d,e,f,g)},a.rad=function(a){return a%360*B/180},a.deg=function(a){return a*180/B%360},a.snapTo=function(b,c,d){d=a.is(d,"finite")?d:10;if(a.is(b,E)){var e=b.length;while(e--)if(z(b[e]-c)<=d)return b[e]}else{b=+b;var f=c%b;if(fb-d)return c-f+b}return c};var bl=a._createUUID=function(a,b){return function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(a,b).toUpperCase()}}(/[xy]/g,function(a){var b=w.random()*16|0,c=a=="x"?b:b&3|8;return c.toString(16)});a.setWindow=function(b){eve("setWindow",a,h.win,b),h.win=b,h.doc=h.win.document,initWin&&initWin(h.win)};var bm=function(b){if(a.vml){var c=/^\s+|\s+$/g,d;try{var e=new ActiveXObject("htmlfile");e.write(""),e.close(),d=e.body}catch(f){d=createPopup().document.body}var g=d.createTextRange();bm=bt(function(a){try{d.style.color=r(a).replace(c,p);var b=g.queryCommandValue("ForeColor");b=(b&255)<<16|b&65280|(b&16711680)>>>16;return"#"+("000000"+b.toString(16)).slice(-6)}catch(e){return"none"}})}else{var i=h.doc.createElement("i");i.title="Raphaël Colour Picker",i.style.display="none",h.doc.body.appendChild(i),bm=bt(function(a){i.style.color=a;return h.doc.defaultView.getComputedStyle(i,p).getPropertyValue("color")})}return bm(b)},bn=function(){return"hsb("+[this.h,this.s,this.b]+")"},bo=function(){return"hsl("+[this.h,this.s,this.l]+")"},bp=function(){return this.hex},bq=function(b,c,d){c==null&&a.is(b,"object")&&"r"in b&&"g"in b&&"b"in b&&(d=b.b,c=b.g,b=b.r);if(c==null&&a.is(b,D)){var e=a.getRGB(b);b=e.r,c=e.g,d=e.b}if(b>1||c>1||d>1)b/=255,c/=255,d/=255;return[b,c,d]},br=function(b,c,d,e){b*=255,c*=255,d*=255;var f={r:b,g:c,b:d,hex:a.rgb(b,c,d),toString:bp};a.is(e,"finite")&&(f.opacity=e);return f};a.color=function(b){var c;a.is(b,"object")&&"h"in b&&"s"in b&&"b"in b?(c=a.hsb2rgb(b),b.r=c.r,b.g=c.g,b.b=c.b,b.hex=c.hex):a.is(b,"object")&&"h"in b&&"s"in b&&"l"in b?(c=a.hsl2rgb(b),b.r=c.r,b.g=c.g,b.b=c.b,b.hex=c.hex):(a.is(b,"string")&&(b=a.getRGB(b)),a.is(b,"object")&&"r"in b&&"g"in b&&"b"in b?(c=a.rgb2hsl(b),b.h=c.h,b.s=c.s,b.l=c.l,c=a.rgb2hsb(b),b.v=c.b):(b={hex:"none"},crl.r=b.g=b.b=b.h=b.s=b.v=b.l=-1)),b.toString=bp;return b},a.hsb2rgb=function(a,b,c,d){this.is(a,"object")&&"h"in a&&"s"in a&&"b"in a&&(c=a.b,b=a.s,a=a.h,d=a.o),a*=360;var e,f,g,h,i;a=a%360/60,i=c*b,h=i*(1-z(a%2-1)),e=f=g=c-i,a=~~a,e+=[i,h,0,0,h,i][a],f+=[h,i,i,h,0,0][a],g+=[0,0,h,i,i,h][a];return br(e,f,g,d)},a.hsl2rgb=function(a,b,c,d){this.is(a,"object")&&"h"in a&&"s"in a&&"l"in a&&(c=a.l,b=a.s,a=a.h);if(a>1||b>1||c>1)a/=360,b/=100,c/=100;a*=360;var e,f,g,h,i;a=a%360/60,i=2*b*(c<.5?c:1-c),h=i*(1-z(a%2-1)),e=f=g=c-i/2,a=~~a,e+=[i,h,0,0,h,i][a],f+=[h,i,i,h,0,0][a],g+=[0,0,h,i,i,h][a];return br(e,f,g,d)},a.rgb2hsb=function(a,b,c){c=bq(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g;f=x(a,b,c),g=f-y(a,b,c),d=g==0?null:f==a?(b-c)/g:f==b?(c-a)/g+2:(a-b)/g+4,d=(d+360)%6*60/360,e=g==0?0:g/f;return{h:d,s:e,b:f,toString:bn}},a.rgb2hsl=function(a,b,c){c=bq(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g,h,i;g=x(a,b,c),h=y(a,b,c),i=g-h,d=i==0?null:g==a?(b-c)/i:g==b?(c-a)/i+2:(a-b)/i+4,d=(d+360)%6*60/360,f=(g+h)/2,e=i==0?0:f<.5?i/(2*f):i/(2-2*f);return{h:d,s:e,l:f,toString:bo}},a._path2string=function(){return this.join(",").replace(X,"$1")};var bu=a._preload=function(a,b){var c=h.doc.createElement("img");c.style.cssText="position:absolute;left:-9999em;top-9999em",c.onload=function(){b.call(this),this.onload=null,h.doc.body.removeChild(this)},c.onerror=function(){h.doc.body.removeChild(this)},h.doc.body.appendChild(c),c.src=a};a.getRGB=bt(function(b){if(!b||!!((b=r(b)).indexOf("-")+1))return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:bv};if(b=="none")return{r:-1,g:-1,b:-1,hex:"none",toString:bv};!W[g](b.toLowerCase().substring(0,2))&&b.charAt()!="#"&&(b=bm(b));var c,d,e,f,h,i,j,k=b.match(L);if(k){k[2]&&(f=R(k[2].substring(5),16),e=R(k[2].substring(3,5),16),d=R(k[2].substring(1,3),16)),k[3]&&(f=R((i=k[3].charAt(3))+i,16),e=R((i=k[3].charAt(2))+i,16),d=R((i=k[3].charAt(1))+i,16)),k[4]&&(j=k[4].split(V),d=Q(j[0]),j[0].slice(-1)=="%"&&(d*=2.55),e=Q(j[1]),j[1].slice(-1)=="%"&&(e*=2.55),f=Q(j[2]),j[2].slice(-1)=="%"&&(f*=2.55),k[1].toLowerCase().slice(0,4)=="rgba"&&(h=Q(j[3])),j[3]&&j[3].slice(-1)=="%"&&(h/=100));if(k[5]){j=k[5].split(V),d=Q(j[0]),j[0].slice(-1)=="%"&&(d*=2.55),e=Q(j[1]),j[1].slice(-1)=="%"&&(e*=2.55),f=Q(j[2]),j[2].slice(-1)=="%"&&(f*=2.55),(j[0].slice(-3)=="deg"||j[0].slice(-1)=="°")&&(d/=360),k[1].toLowerCase().slice(0,4)=="hsba"&&(h=Q(j[3])),j[3]&&j[3].slice(-1)=="%"&&(h/=100);return a.hsb2rgb(d,e,f,h)}if(k[6]){j=k[6].split(V),d=Q(j[0]),j[0].slice(-1)=="%"&&(d*=2.55),e=Q(j[1]),j[1].slice(-1)=="%"&&(e*=2.55),f=Q(j[2]),j[2].slice(-1)=="%"&&(f*=2.55),(j[0].slice(-3)=="deg"||j[0].slice(-1)=="°")&&(d/=360),k[1].toLowerCase().slice(0,4)=="hsla"&&(h=Q(j[3])),j[3]&&j[3].slice(-1)=="%"&&(h/=100);return a.hsl2rgb(d,e,f,h)}k={r:d,g:e,b:f,toString:bv},k.hex="#"+(16777216|f|e<<8|d<<16).toString(16).slice(1),a.is(h,"finite")&&(k.opacity=h);return k}return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:bv}},a),a.hsb=bt(function(b,c,d){return a.hsb2rgb(b,c,d).hex}),a.hsl=bt(function(b,c,d){return a.hsl2rgb(b,c,d).hex}),a.rgb=bt(function(a,b,c){return"#"+(16777216|c|b<<8|a<<16).toString(16).slice(1)}),a.getColor=function(a){var b=this.getColor.start=this.getColor.start||{h:0,s:1,b:a||.75},c=this.hsb2rgb(b.h,b.s,b.b);b.h+=.075,b.h>1&&(b.h=0,b.s-=.2,b.s<=0&&(this.getColor.start={h:0,s:1,b:b.b}));return c.hex},a.getColor.reset=function(){delete this.start},a.parsePathString=bt(function(b){if(!b)return null;var c={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},d=[];a.is(b,E)&&a.is(b[0],E)&&(d=by(b)),d.length||r(b).replace(Y,function(a,b,e){var f=[],g=b.toLowerCase();e.replace($,function(a,b){b&&f.push(+b)}),g=="m"&&f.length>2&&(d.push([b][n](f.splice(0,2))),g="l",b=b=="m"?"l":"L");if(g=="r")d.push([b][n](f));else while(f.length>=c[g]){d.push([b][n](f.splice(0,c[g])));if(!c[g])break}}),d.toString=a._path2string;return d}),a.parseTransformString=bt(function(b){if(!b)return null;var c={r:3,s:4,t:2,m:6},d=[];a.is(b,E)&&a.is(b[0],E)&&(d=by(b)),d.length||r(b).replace(Z,function(a,b,c){var e=[],f=v.call(b);c.replace($,function(a,b){b&&e.push(+b)}),d.push([f][n](e))}),d.toString=a._path2string;return d}),a.findDotsAtSegment=function(a,b,c,d,e,f,g,h,i){var j=1-i,k=A(j,3),l=A(j,2),m=i*i,n=m*i,o=k*a+l*3*i*c+j*3*i*i*e+n*g,p=k*b+l*3*i*d+j*3*i*i*f+n*h,q=a+2*i*(c-a)+m*(e-2*c+a),r=b+2*i*(d-b)+m*(f-2*d+b),s=c+2*i*(e-c)+m*(g-2*e+c),t=d+2*i*(f-d)+m*(h-2*f+d),u=j*a+i*c,v=j*b+i*d,x=j*e+i*g,y=j*f+i*h,z=90-w.atan2(q-s,r-t)*180/B;(q>s||r1&&(u=w.sqrt(u),c=u*c,d=u*d);var v=c*c,x=d*d,y=(f==g?-1:1)*w.sqrt(z((v*x-v*t*t-x*s*s)/(v*t*t+x*s*s))),A=y*c*t/d+(a+h)/2,C=y*-d*s/c+(b+i)/2,D=w.asin(((b-C)/d).toFixed(9)),E=w.asin(((i-C)/d).toFixed(9));D=aE&&(D=D-B*2),!g&&E>D&&(E=E-B*2)}else D=j[0],E=j[1],A=j[2],C=j[3];var F=E-D;if(z(F)>k){var G=E,H=h,I=i;E=D+k*(g&&E>D?1:-1),h=A+c*w.cos(E),i=C+d*w.sin(E),m=bD(h,i,c,d,e,0,g,H,I,[E,G,A,C])}F=E-D;var J=w.cos(D),K=w.sin(D),L=w.cos(E),M=w.sin(E),N=w.tan(F/4),O=4/3*c*N,P=4/3*d*N,Q=[a,b],R=[a+O*K,b-P*J],S=[h+O*M,i-P*L],T=[h,i];R[0]=2*Q[0]-R[0],R[1]=2*Q[1]-R[1];if(j)return[R,S,T][n](m);m=[R,S,T][n](m).join().split(",");var U=[];for(var V=0,W=m.length;V"1e12"&&(l=.5),z(n)>"1e12"&&(n=.5),l>0&&l<1&&(q=bE(a,b,c,d,e,f,g,h,l),p.push(q.x),o.push(q.y)),n>0&&n<1&&(q=bE(a,b,c,d,e,f,g,h,n),p.push(q.x),o.push(q.y)),i=f-2*d+b-(h-2*f+d),j=2*(d-b)-2*(f-d),k=b-d,l=(-j+w.sqrt(j*j-4*i*k))/2/i,n=(-j-w.sqrt(j*j-4*i*k))/2/i,z(l)>"1e12"&&(l=.5),z(n)>"1e12"&&(n=.5),l>0&&l<1&&(q=bE(a,b,c,d,e,f,g,h,l),p.push(q.x),o.push(q.y)),n>0&&n<1&&(q=bE(a,b,c,d,e,f,g,h,n),p.push(q.x),o.push(q.y));return{min:{x:y[m](0,p),y:y[m](0,o)},max:{x:x[m](0,p),y:x[m](0,o)}}}),bG=a._path2curve=bt(function(a,b){var c=bA(a),d=b&&bA(b),e={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},f={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},g=function(a,b){var c,d;if(!a)return["C",b.x,b.y,b.x,b.y,b.x,b.y];!(a[0]in{T:1,Q:1})&&(b.qx=b.qy=null);switch(a[0]){case"M":b.X=a[1],b.Y=a[2];break;case"A":a=["C"][n](bD[m](0,[b.x,b.y][n](a.slice(1))));break;case"S":c=b.x+(b.x-(b.bx||b.x)),d=b.y+(b.y-(b.by||b.y)),a=["C",c,d][n](a.slice(1));break;case"T":b.qx=b.x+(b.x-(b.qx||b.x)),b.qy=b.y+(b.y-(b.qy||b.y)),a=["C"][n](bC(b.x,b.y,b.qx,b.qy,a[1],a[2]));break;case"Q":b.qx=a[1],b.qy=a[2],a=["C"][n](bC(b.x,b.y,a[1],a[2],a[3],a[4]));break;case"L":a=["C"][n](bB(b.x,b.y,a[1],a[2]));break;case"H":a=["C"][n](bB(b.x,b.y,a[1],b.y));break;case"V":a=["C"][n](bB(b.x,b.y,b.x,a[1]));break;case"Z":a=["C"][n](bB(b.x,b.y,b.X,b.Y))}return a},h=function(a,b){if(a[b].length>7){a[b].shift();var e=a[b];while(e.length)a.splice(b++,0,["C"][n](e.splice(0,6)));a.splice(b,1),k=x(c.length,d&&d.length||0)}},i=function(a,b,e,f,g){a&&b&&a[g][0]=="M"&&b[g][0]!="M"&&(b.splice(g,0,["M",f.x,f.y]),e.bx=0,e.by=0,e.x=a[g][1],e.y=a[g][2],k=x(c.length,d&&d.length||0))};for(var j=0,k=x(c.length,d&&d.length||0);j=j)return p;o=p}if(j==null)return k},cg=function(b,c){return function(d,e,f){d=bG(d);var g,h,i,j,k="",l={},m,n=0;for(var o=0,p=d.length;oe){if(c&&!l.start){m=cf(g,h,i[1],i[2],i[3],i[4],i[5],i[6],e-n),k+=["C"+m.start.x,m.start.y,m.m.x,m.m.y,m.x,m.y];if(f)return k;l.start=k,k=["M"+m.x,m.y+"C"+m.n.x,m.n.y,m.end.x,m.end.y,i[5],i[6]].join(),n+=j,g=+i[5],h=+i[6];continue}if(!b&&!c){m=cf(g,h,i[1],i[2],i[3],i[4],i[5],i[6],e-n);return{x:m.x,y:m.y,alpha:m.alpha}}}n+=j,g=+i[5],h=+i[6]}k+=i.shift()+i}l.end=k,m=b?n:c?l:a.findDotsAtSegment(g,h,i[1],i[2],i[3],i[4],i[5],i[6],1),m.alpha&&(m={x:m.x,y:m.y,alpha:m.alpha});return m}},ch=cg(1),ci=cg(),cj=cg(0,1);a.getTotalLength=ch,a.getPointAtLength=ci,a.getSubpath=function(a,b,c){if(z(this.getTotalLength(a)-c)<1e-6)return cj(a,b).end;var d=cj(a,c,1);return b?cj(d,b).end:d},b_.getTotalLength=function(){if(this.type=="path"){if(this.node.getTotalLength)return this.node.getTotalLength();return ch(this.attrs.path)}},b_.getPointAtLength=function(a){if(this.type=="path")return ci(this.attrs.path,a)},b_.getSubpath=function(b,c){if(this.type=="path")return a.getSubpath(this.attrs.path,b,c)};var ck=a.easing_formulas={linear:function(a){return a},"<":function(a){return A(a,1.7)},">":function(a){return A(a,.48)},"<>":function(a){var b=.48-a/1.04,c=w.sqrt(.1734+b*b),d=c-b,e=A(z(d),1/3)*(d<0?-1:1),f=-c-b,g=A(z(f),1/3)*(f<0?-1:1),h=e+g+.5;return(1-h)*3*h*h+h*h*h},backIn:function(a){var b=1.70158;return a*a*((b+1)*a-b)},backOut:function(a){a=a-1;var b=1.70158;return a*a*((b+1)*a+b)+1},elastic:function(a){if(a==!!a)return a;return A(2,-10*a)*w.sin((a-.075)*2*B/.3)+1},bounce:function(a){var b=7.5625,c=2.75,d;a<1/c?d=b*a*a:a<2/c?(a-=1.5/c,d=b*a*a+.75):a<2.5/c?(a-=2.25/c,d=b*a*a+.9375):(a-=2.625/c,d=b*a*a+.984375);return d}};ck.easeIn=ck["ease-in"]=ck["<"],ck.easeOut=ck["ease-out"]=ck[">"],ck.easeInOut=ck["ease-in-out"]=ck["<>"],ck["back-in"]=ck.backIn,ck["back-out"]=ck.backOut;var cl=[],cm=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){setTimeout(a,16)},cn=function(){var b=+(new Date),c=0;for(;c1&&!d.next&&cr(d.anim,d.el,d.anim.percents[0],null,d.totalOrigin,d.repeat-1),d.next&&!d.stop&&cr(d.anim,d.el,d.next,null,d.totalOrigin,d.repeat)}a.svg&&m&&m.paper&&m.paper.safari(),cl.length&&cm(cn)},co=function(a){return a>255?255:a<0?0:a};b_.animateWith=function(b,c,d,e,f,g){var h=d?a.animation(d,e,f,g):c;status=b.status(c);return this.animate(h).status(h,status*c.ms/h.ms)},b_.onAnimation=function(a){a?eve.on("anim.frame."+this.id,a):eve.unbind("anim.frame."+this.id);return this},cq.prototype.delay=function(a){var b=new cq(this.anim,this.ms);b.times=this.times,b.del=+a||0;return b},cq.prototype.repeat=function(a){var b=new cq(this.anim,this.ms);b.del=this.del,b.times=w.floor(x(a,0))||1;return b},a.animation=function(b,c,d,e){if(b instanceof cq)return b;if(a.is(d,"function")||!d)e=e||d||null,d=null;b=Object(b),c=+c||0;var f={},h,i;for(i in b)b[g](i)&&Q(i)!=i&&Q(i)+"%"!=i&&(h=!0,f[i]=b[i]);if(!h)return new cq(b,c);d&&(f.easing=d),e&&(f.callback=e);return new cq({100:f},c)},b_.animate=function(b,c,d,e){var f=this;if(f.removed){e&&e.call(f);return f}var g=b instanceof cq?b:a.animation(b,c,d,e);cr(g,f,g.percents[0],null,f.attr());return f},b_.setTime=function(a,b){a&&b!=null&&this.status(a,y(b,a.ms)/a.ms);return this},b_.status=function(a,b){var c=[],d=0,e,f;if(b!=null){cr(a,this,-1,y(b,1));return this}e=cl.length;for(;d.5)*2-1;i(m-.5,2)+i(n-.5,2)>.25&&(n=f.sqrt(.25-i(m-.5,2))*e+.5)&&n!=.5&&(n=n.toFixed(5)-1e-5*e)}return l}),e=e.split(/\s*\-\s*/);if(j=="linear"){var t=e.shift();t=-d(t);if(isNaN(t))return null;var u=[0,0,f.cos(a.rad(t)),f.sin(a.rad(t))],v=1/(g(h(u[2]),h(u[3]))||1);u[2]*=v,u[3]*=v,u[2]<0&&(u[0]=-u[2],u[2]=0),u[3]<0&&(u[1]=-u[3],u[3]=0)}var w=a._parseDots(e);if(!w)return null;b.gradient&&(p.defs.removeChild(b.gradient),delete b.gradient),k=k.replace(/[\(\)\s,\xb0#]/g,"-"),s=q(j+"Gradient",{id:k}),b.gradient=s,q(s,j=="radial"?{fx:m,fy:n}:{x1:u[0],y1:u[1],x2:u[2],y2:u[3],gradientTransform:b.matrix.invert()}),p.defs.appendChild(s);for(var x=0,y=w.length;x1?E.opacity/100:E.opacity});case"stroke":E=a.getRGB(p),i.setAttribute(o,E.hex),o=="stroke"&&E[b]("opacity")&&q(i,{"stroke-opacity":E.opacity>1?E.opacity/100:E.opacity}),o=="stroke"&&d._.arrows&&("startString"in d._.arrows&&w(d,d._.arrows.startString),"endString"in d._.arrows&&w(d,d._.arrows.endString,1));break;case"gradient":(d.type=="circle"||d.type=="ellipse"||c(p).charAt()!="r")&&u(d,p);break;case"opacity":k.gradient&&!k[b]("stroke-opacity")&&q(i,{"stroke-opacity":p>1?p/100:p});case"fill-opacity":if(k.gradient){F=a._g.doc.getElementById(i.getAttribute("fill").replace(/^url\(#|\)$/g,l)),F&&(G=F.getElementsByTagName("stop"),q(G[G.length-1],{"stop-opacity":p}));break};default:o=="font-size"&&(p=e(p,10)+"px");var H=o.replace(/(\-.)/g,function(a){return a.substring(1).toUpperCase()});i.style[H]=p,d._.dirty=1,i.setAttribute(o,p)}}B(d,f),i.style.visibility=m},A=1.2,B=function(d,f){if(d.type=="text"&&!!(f[b]("text")||f[b]("font")||f[b]("font-size")||f[b]("x")||f[b]("y"))){var g=d.attrs,h=d.node,i=h.firstChild?e(a._g.doc.defaultView.getComputedStyle(h.firstChild,l).getPropertyValue("font-size"),10):10;if(f[b]("text")){g.text=f.text;while(h.firstChild)h.removeChild(h.firstChild);var j=c(f.text).split("\n"),k=[],m;for(var n=0,o=j.length;n"));var Z=W.getBoundingClientRect();t.W=m.w=(Z.right-Z.left)/X,t.H=m.h=(Z.bottom-Z.top)/X,t.X=m.x,t.Y=m.y+t.H/2,("x"in i||"y"in i)&&(t.path.v=a.format("m{0},{1}l{2},{1}",f(m.x*u),f(m.y*u),f(m.x*u)+1));var $=["x","y","text","font","font-family","font-weight","font-style","font-size"];for(var _=0,ba=$.length;_.25&&(c=e.sqrt(.25-pow(b-.5,2))*((c>.5)*2-1)+.5),l=b+n+c);return o}),f=f.split(/\s*\-\s*/);if(k=="linear"){var m=f.shift();m=-d(m);if(isNaN(m))return null}var p=a._parseDots(f);if(!p)return null;b=b.shape||b.node;if(p.length){b.removeChild(g),g.on=!0,g.method="none",g.color=p[0].color,g.color2=p[p.length-1].color;var q=[];for(var r=0,s=p.length;r')}}catch(c){B=function(a){return b.createElement("<"+a+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}};C(a._g.win),a._engine.create=function(){var b=a._getContainer.apply(0,arguments),c=b.container,d=b.height,e,f=b.width,g=b.x,h=b.y;if(!c)throw new Error("VML container not found.");var i=new a._Paper,j=i.canvas=a._g.doc.createElement("div"),k=j.style;g=g||0,h=h||0,f=f||512,d=d||342,i.width=f,i.height=d,f==+f&&(f+="px"),d==+d&&(d+="px"),i.coordsize=u*1e3+n+u*1e3,i.coordorigin="0 0",i.span=a._g.doc.createElement("span"),i.span.style.cssText="position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;",j.appendChild(i.span),k.cssText=a.format("top:0;left:0;width:{0};height:{1};display:inline-block;position:relative;clip:rect(0 {0} {1} 0);overflow:hidden",f,d),c==1?(a._g.doc.body.appendChild(j),k.left=g+"px",k.top=h+"px",k.position="absolute"):c.firstChild?c.insertBefore(j,c.firstChild):c.appendChild(j),i.renderfix=function(){};return i},a.prototype.clear=function(){a.eve("clear",this),this.canvas.innerHTML=o,this.span=a._g.doc.createElement("span"),this.span.style.cssText="position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;display:inline;",this.canvas.appendChild(this.span),this.bottom=this.top=null},a.prototype.remove=function(){a.eve("remove",this),this.canvas.parentNode.removeChild(this.canvas);for(var b in this)this[b]=removed(b);return!0}}(window.Raphael) \ No newline at end of file +(function(a){var b="0.3.0",c="hasOwnProperty",d=/[\.\/]/,e="*",f=function(){},g=function(a,b){return a-b},h,i,j={n:{}},k=function(a,b){var c=j,d=Array.prototype.slice.call(arguments,2),e=k.listeners(a),f=0,l=!1,m,n=[],o={},p=[],q=[];h=a,i=0;for(var r=0,s=e.length;rf*b.top){e=b.percents[w],o=b.percents[w-1]||0,q=q/b.top*(e-o),n=b.percents[w+1],j=b.anim[e];break}f&&d.attr(b.anim[b.percents[w]])}if(!!j){if(!k){for(attr in j)if(j[g](attr))if(U[g](attr)||d.paper.customAttributes[g](attr)){s[attr]=d.attr(attr),s[attr]==null&&(s[attr]=T[attr]),t[attr]=j[attr];switch(U[attr]){case C:u[attr]=(t[attr]-s[attr])/q;break;case"colour":s[attr]=a.getRGB(s[attr]);var y=a.getRGB(t[attr]);u[attr]={r:(y.r-s[attr].r)/q,g:(y.g-s[attr].g)/q,b:(y.b-s[attr].b)/q};break;case"path":var z=bG(s[attr],t[attr]),A=z[1];s[attr]=z[0],u[attr]=[];for(w=0,x=s[attr].length;wd)return d;while(cf?c=e:d=e,e=(d-c)/2+c}return e}function n(a,b){var c=o(a,b);return((l*c+k)*c+j)*c}function m(a){return((i*a+h)*a+g)*a}var g=3*b,h=3*(d-b)-g,i=1-g-h,j=3*c,k=3*(e-c)-j,l=1-j-k;return n(a,1/(200*f))}function cd(){return this.x+q+this.y+q+this.width+" × "+this.height}function cc(){return this.x+q+this.y}function bR(a,b,c,d,e,f){a!=null?(this.a=+a,this.b=+b,this.c=+c,this.d=+d,this.e=+e,this.f=+f):(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0)}function bw(a){var b=[];for(var c=0,d=a.length;d-2>c;c+=2){var e=[{x:+a[c],y:+a[c+1]},{x:+a[c],y:+a[c+1]},{x:+a[c+2],y:+a[c+3]},{x:+a[c+4],y:+a[c+5]}];d-4==c?(e[0]={x:+a[c-2],y:+a[c-1]},e[3]=e[2]):c&&(e[0]={x:+a[c-2],y:+a[c-1]}),b.push(["C",(-e[0].x+6*e[1].x+e[2].x)/6,(-e[0].y+6*e[1].y+e[2].y)/6,(e[1].x+6*e[2].x-e[3].x)/6,(e[1].y+6*e[2].y-e[3].y)/6,e[2].x,e[2].y])}return b}function bv(){return this.hex}function bt(a,b,c){function d(){var e=Array.prototype.slice.call(arguments,0),f=e.join("␀"),h=d.cache=d.cache||{},i=d.count=d.count||[];if(h[g](f)){bs(i,f);return c?c(h[f]):h[f]}i.length>=1e3&&delete h[i.shift()],i.push(f),h[f]=a[m](b,e);return c?c(h[f]):h[f]}return d}function bs(a,b){for(var c=0,d=a.length;c',bk=bj.firstChild,bk.style.behavior="url(#default#VML)";if(!bk||typeof bk.adj!="object")return a.type=p;bj=null}a.svg=!(a.vml=a.type=="VML"),a._Paper=j,a.fn=k=j.prototype=a.prototype,a._id=0,a._oid=0,a.is=function(a,b){b=v.call(b);if(b=="finite")return!M[g](+a);if(b=="array")return a instanceof Array;return b=="null"&&a===null||b==typeof a||b=="object"&&a===Object(a)||b=="array"&&Array.isArray&&Array.isArray(a)||H.call(a).slice(8,-1).toLowerCase()==b},a.angle=function(b,c,d,e,f,g){if(f==null){var h=b-d,i=c-e;if(!h&&!i)return 0;return(180+w.atan2(-i,-h)*180/B+360)%360}return a.angle(b,c,f,g)-a.angle(d,e,f,g)},a.rad=function(a){return a%360*B/180},a.deg=function(a){return a*180/B%360},a.snapTo=function(b,c,d){d=a.is(d,"finite")?d:10;if(a.is(b,E)){var e=b.length;while(e--)if(z(b[e]-c)<=d)return b[e]}else{b=+b;var f=c%b;if(fb-d)return c-f+b}return c};var bl=a._createUUID=function(a,b){return function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(a,b).toUpperCase()}}(/[xy]/g,function(a){var b=w.random()*16|0,c=a=="x"?b:b&3|8;return c.toString(16)});a.setWindow=function(b){eve("setWindow",a,h.win,b),h.win=b,h.doc=h.win.document,initWin&&initWin(h.win)};var bm=function(b){if(a.vml){var c=/^\s+|\s+$/g,d;try{var e=new ActiveXObject("htmlfile");e.write(""),e.close(),d=e.body}catch(f){d=createPopup().document.body}var g=d.createTextRange();bm=bt(function(a){try{d.style.color=r(a).replace(c,p);var b=g.queryCommandValue("ForeColor");b=(b&255)<<16|b&65280|(b&16711680)>>>16;return"#"+("000000"+b.toString(16)).slice(-6)}catch(e){return"none"}})}else{var i=h.doc.createElement("i");i.title="Raphaël Colour Picker",i.style.display="none",h.doc.body.appendChild(i),bm=bt(function(a){i.style.color=a;return h.doc.defaultView.getComputedStyle(i,p).getPropertyValue("color")})}return bm(b)},bn=function(){return"hsb("+[this.h,this.s,this.b]+")"},bo=function(){return"hsl("+[this.h,this.s,this.l]+")"},bp=function(){return this.hex},bq=function(b,c,d){c==null&&a.is(b,"object")&&"r"in b&&"g"in b&&"b"in b&&(d=b.b,c=b.g,b=b.r);if(c==null&&a.is(b,D)){var e=a.getRGB(b);b=e.r,c=e.g,d=e.b}if(b>1||c>1||d>1)b/=255,c/=255,d/=255;return[b,c,d]},br=function(b,c,d,e){b*=255,c*=255,d*=255;var f={r:b,g:c,b:d,hex:a.rgb(b,c,d),toString:bp};a.is(e,"finite")&&(f.opacity=e);return f};a.color=function(b){var c;a.is(b,"object")&&"h"in b&&"s"in b&&"b"in b?(c=a.hsb2rgb(b),b.r=c.r,b.g=c.g,b.b=c.b,b.hex=c.hex):a.is(b,"object")&&"h"in b&&"s"in b&&"l"in b?(c=a.hsl2rgb(b),b.r=c.r,b.g=c.g,b.b=c.b,b.hex=c.hex):(a.is(b,"string")&&(b=a.getRGB(b)),a.is(b,"object")&&"r"in b&&"g"in b&&"b"in b?(c=a.rgb2hsl(b),b.h=c.h,b.s=c.s,b.l=c.l,c=a.rgb2hsb(b),b.v=c.b):(b={hex:"none"},crl.r=b.g=b.b=b.h=b.s=b.v=b.l=-1)),b.toString=bp;return b},a.hsb2rgb=function(a,b,c,d){this.is(a,"object")&&"h"in a&&"s"in a&&"b"in a&&(c=a.b,b=a.s,a=a.h,d=a.o),a*=360;var e,f,g,h,i;a=a%360/60,i=c*b,h=i*(1-z(a%2-1)),e=f=g=c-i,a=~~a,e+=[i,h,0,0,h,i][a],f+=[h,i,i,h,0,0][a],g+=[0,0,h,i,i,h][a];return br(e,f,g,d)},a.hsl2rgb=function(a,b,c,d){this.is(a,"object")&&"h"in a&&"s"in a&&"l"in a&&(c=a.l,b=a.s,a=a.h);if(a>1||b>1||c>1)a/=360,b/=100,c/=100;a*=360;var e,f,g,h,i;a=a%360/60,i=2*b*(c<.5?c:1-c),h=i*(1-z(a%2-1)),e=f=g=c-i/2,a=~~a,e+=[i,h,0,0,h,i][a],f+=[h,i,i,h,0,0][a],g+=[0,0,h,i,i,h][a];return br(e,f,g,d)},a.rgb2hsb=function(a,b,c){c=bq(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g;f=x(a,b,c),g=f-y(a,b,c),d=g==0?null:f==a?(b-c)/g:f==b?(c-a)/g+2:(a-b)/g+4,d=(d+360)%6*60/360,e=g==0?0:g/f;return{h:d,s:e,b:f,toString:bn}},a.rgb2hsl=function(a,b,c){c=bq(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g,h,i;g=x(a,b,c),h=y(a,b,c),i=g-h,d=i==0?null:g==a?(b-c)/i:g==b?(c-a)/i+2:(a-b)/i+4,d=(d+360)%6*60/360,f=(g+h)/2,e=i==0?0:f<.5?i/(2*f):i/(2-2*f);return{h:d,s:e,l:f,toString:bo}},a._path2string=function(){return this.join(",").replace(X,"$1")};var bu=a._preload=function(a,b){var c=h.doc.createElement("img");c.style.cssText="position:absolute;left:-9999em;top-9999em",c.onload=function(){b.call(this),this.onload=null,h.doc.body.removeChild(this)},c.onerror=function(){h.doc.body.removeChild(this)},h.doc.body.appendChild(c),c.src=a};a.getRGB=bt(function(b){if(!b||!!((b=r(b)).indexOf("-")+1))return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:bv};if(b=="none")return{r:-1,g:-1,b:-1,hex:"none",toString:bv};!W[g](b.toLowerCase().substring(0,2))&&b.charAt()!="#"&&(b=bm(b));var c,d,e,f,h,i,j,k=b.match(L);if(k){k[2]&&(f=R(k[2].substring(5),16),e=R(k[2].substring(3,5),16),d=R(k[2].substring(1,3),16)),k[3]&&(f=R((i=k[3].charAt(3))+i,16),e=R((i=k[3].charAt(2))+i,16),d=R((i=k[3].charAt(1))+i,16)),k[4]&&(j=k[4].split(V),d=Q(j[0]),j[0].slice(-1)=="%"&&(d*=2.55),e=Q(j[1]),j[1].slice(-1)=="%"&&(e*=2.55),f=Q(j[2]),j[2].slice(-1)=="%"&&(f*=2.55),k[1].toLowerCase().slice(0,4)=="rgba"&&(h=Q(j[3])),j[3]&&j[3].slice(-1)=="%"&&(h/=100));if(k[5]){j=k[5].split(V),d=Q(j[0]),j[0].slice(-1)=="%"&&(d*=2.55),e=Q(j[1]),j[1].slice(-1)=="%"&&(e*=2.55),f=Q(j[2]),j[2].slice(-1)=="%"&&(f*=2.55),(j[0].slice(-3)=="deg"||j[0].slice(-1)=="°")&&(d/=360),k[1].toLowerCase().slice(0,4)=="hsba"&&(h=Q(j[3])),j[3]&&j[3].slice(-1)=="%"&&(h/=100);return a.hsb2rgb(d,e,f,h)}if(k[6]){j=k[6].split(V),d=Q(j[0]),j[0].slice(-1)=="%"&&(d*=2.55),e=Q(j[1]),j[1].slice(-1)=="%"&&(e*=2.55),f=Q(j[2]),j[2].slice(-1)=="%"&&(f*=2.55),(j[0].slice(-3)=="deg"||j[0].slice(-1)=="°")&&(d/=360),k[1].toLowerCase().slice(0,4)=="hsla"&&(h=Q(j[3])),j[3]&&j[3].slice(-1)=="%"&&(h/=100);return a.hsl2rgb(d,e,f,h)}k={r:d,g:e,b:f,toString:bv},k.hex="#"+(16777216|f|e<<8|d<<16).toString(16).slice(1),a.is(h,"finite")&&(k.opacity=h);return k}return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:bv}},a),a.hsb=bt(function(b,c,d){return a.hsb2rgb(b,c,d).hex}),a.hsl=bt(function(b,c,d){return a.hsl2rgb(b,c,d).hex}),a.rgb=bt(function(a,b,c){return"#"+(16777216|c|b<<8|a<<16).toString(16).slice(1)}),a.getColor=function(a){var b=this.getColor.start=this.getColor.start||{h:0,s:1,b:a||.75},c=this.hsb2rgb(b.h,b.s,b.b);b.h+=.075,b.h>1&&(b.h=0,b.s-=.2,b.s<=0&&(this.getColor.start={h:0,s:1,b:b.b}));return c.hex},a.getColor.reset=function(){delete this.start},a.parsePathString=bt(function(b){if(!b)return null;var c={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},d=[];a.is(b,E)&&a.is(b[0],E)&&(d=by(b)),d.length||r(b).replace(Y,function(a,b,e){var f=[],g=b.toLowerCase();e.replace($,function(a,b){b&&f.push(+b)}),g=="m"&&f.length>2&&(d.push([b][n](f.splice(0,2))),g="l",b=b=="m"?"l":"L");if(g=="r")d.push([b][n](f));else while(f.length>=c[g]){d.push([b][n](f.splice(0,c[g])));if(!c[g])break}}),d.toString=a._path2string;return d}),a.parseTransformString=bt(function(b){if(!b)return null;var c={r:3,s:4,t:2,m:6},d=[];a.is(b,E)&&a.is(b[0],E)&&(d=by(b)),d.length||r(b).replace(Z,function(a,b,c){var e=[],f=v.call(b);c.replace($,function(a,b){b&&e.push(+b)}),d.push([f][n](e))}),d.toString=a._path2string;return d}),a.findDotsAtSegment=function(a,b,c,d,e,f,g,h,i){var j=1-i,k=A(j,3),l=A(j,2),m=i*i,n=m*i,o=k*a+l*3*i*c+j*3*i*i*e+n*g,p=k*b+l*3*i*d+j*3*i*i*f+n*h,q=a+2*i*(c-a)+m*(e-2*c+a),r=b+2*i*(d-b)+m*(f-2*d+b),s=c+2*i*(e-c)+m*(g-2*e+c),t=d+2*i*(f-d)+m*(h-2*f+d),u=j*a+i*c,v=j*b+i*d,x=j*e+i*g,y=j*f+i*h,z=90-w.atan2(q-s,r-t)*180/B;(q>s||r1&&(u=w.sqrt(u),c=u*c,d=u*d);var v=c*c,x=d*d,y=(f==g?-1:1)*w.sqrt(z((v*x-v*t*t-x*s*s)/(v*t*t+x*s*s))),A=y*c*t/d+(a+h)/2,C=y*-d*s/c+(b+i)/2,D=w.asin(((b-C)/d).toFixed(9)),E=w.asin(((i-C)/d).toFixed(9));D=aE&&(D=D-B*2),!g&&E>D&&(E=E-B*2)}else D=j[0],E=j[1],A=j[2],C=j[3];var F=E-D;if(z(F)>k){var G=E,H=h,I=i;E=D+k*(g&&E>D?1:-1),h=A+c*w.cos(E),i=C+d*w.sin(E),m=bD(h,i,c,d,e,0,g,H,I,[E,G,A,C])}F=E-D;var J=w.cos(D),K=w.sin(D),L=w.cos(E),M=w.sin(E),N=w.tan(F/4),O=4/3*c*N,P=4/3*d*N,Q=[a,b],R=[a+O*K,b-P*J],S=[h+O*M,i-P*L],T=[h,i];R[0]=2*Q[0]-R[0],R[1]=2*Q[1]-R[1];if(j)return[R,S,T][n](m);m=[R,S,T][n](m).join().split(",");var U=[];for(var V=0,W=m.length;V"1e12"&&(l=.5),z(n)>"1e12"&&(n=.5),l>0&&l<1&&(q=bE(a,b,c,d,e,f,g,h,l),p.push(q.x),o.push(q.y)),n>0&&n<1&&(q=bE(a,b,c,d,e,f,g,h,n),p.push(q.x),o.push(q.y)),i=f-2*d+b-(h-2*f+d),j=2*(d-b)-2*(f-d),k=b-d,l=(-j+w.sqrt(j*j-4*i*k))/2/i,n=(-j-w.sqrt(j*j-4*i*k))/2/i,z(l)>"1e12"&&(l=.5),z(n)>"1e12"&&(n=.5),l>0&&l<1&&(q=bE(a,b,c,d,e,f,g,h,l),p.push(q.x),o.push(q.y)),n>0&&n<1&&(q=bE(a,b,c,d,e,f,g,h,n),p.push(q.x),o.push(q.y));return{min:{x:y[m](0,p),y:y[m](0,o)},max:{x:x[m](0,p),y:x[m](0,o)}}}),bG=a._path2curve=bt(function(a,b){var c=bA(a),d=b&&bA(b),e={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},f={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},g=function(a,b){var c,d;if(!a)return["C",b.x,b.y,b.x,b.y,b.x,b.y];!(a[0]in{T:1,Q:1})&&(b.qx=b.qy=null);switch(a[0]){case"M":b.X=a[1],b.Y=a[2];break;case"A":a=["C"][n](bD[m](0,[b.x,b.y][n](a.slice(1))));break;case"S":c=b.x+(b.x-(b.bx||b.x)),d=b.y+(b.y-(b.by||b.y)),a=["C",c,d][n](a.slice(1));break;case"T":b.qx=b.x+(b.x-(b.qx||b.x)),b.qy=b.y+(b.y-(b.qy||b.y)),a=["C"][n](bC(b.x,b.y,b.qx,b.qy,a[1],a[2]));break;case"Q":b.qx=a[1],b.qy=a[2],a=["C"][n](bC(b.x,b.y,a[1],a[2],a[3],a[4]));break;case"L":a=["C"][n](bB(b.x,b.y,a[1],a[2]));break;case"H":a=["C"][n](bB(b.x,b.y,a[1],b.y));break;case"V":a=["C"][n](bB(b.x,b.y,b.x,a[1]));break;case"Z":a=["C"][n](bB(b.x,b.y,b.X,b.Y))}return a},h=function(a,b){if(a[b].length>7){a[b].shift();var e=a[b];while(e.length)a.splice(b++,0,["C"][n](e.splice(0,6)));a.splice(b,1),k=x(c.length,d&&d.length||0)}},i=function(a,b,e,f,g){a&&b&&a[g][0]=="M"&&b[g][0]!="M"&&(b.splice(g,0,["M",f.x,f.y]),e.bx=0,e.by=0,e.x=a[g][1],e.y=a[g][2],k=x(c.length,d&&d.length||0))};for(var j=0,k=x(c.length,d&&d.length||0);j=j)return p;o=p}if(j==null)return k},cg=function(b,c){return function(d,e,f){d=bG(d);var g,h,i,j,k="",l={},m,n=0;for(var o=0,p=d.length;oe){if(c&&!l.start){m=cf(g,h,i[1],i[2],i[3],i[4],i[5],i[6],e-n),k+=["C"+m.start.x,m.start.y,m.m.x,m.m.y,m.x,m.y];if(f)return k;l.start=k,k=["M"+m.x,m.y+"C"+m.n.x,m.n.y,m.end.x,m.end.y,i[5],i[6]].join(),n+=j,g=+i[5],h=+i[6];continue}if(!b&&!c){m=cf(g,h,i[1],i[2],i[3],i[4],i[5],i[6],e-n);return{x:m.x,y:m.y,alpha:m.alpha}}}n+=j,g=+i[5],h=+i[6]}k+=i.shift()+i}l.end=k,m=b?n:c?l:a.findDotsAtSegment(g,h,i[0],i[1],i[2],i[3],i[4],i[5],1),m.alpha&&(m={x:m.x,y:m.y,alpha:m.alpha});return m}},ch=cg(1),ci=cg(),cj=cg(0,1);a.getTotalLength=ch,a.getPointAtLength=ci,a.getSubpath=function(a,b,c){if(this.getTotalLength(a)-c<1e-6)return cj(a,b).end;var d=cj(a,c,1);return b?cj(d,b).end:d},b_.getTotalLength=function(){if(this.type=="path"){if(this.node.getTotalLength)return this.node.getTotalLength();return ch(this.attrs.path)}},b_.getPointAtLength=function(a){if(this.type=="path")return ci(this.attrs.path,a)},b_.getSubpath=function(b,c){if(this.type=="path")return a.getSubpath(this.attrs.path,b,c)};var ck=a.easing_formulas={linear:function(a){return a},"<":function(a){return A(a,1.7)},">":function(a){return A(a,.48)},"<>":function(a){var b=.48-a/1.04,c=w.sqrt(.1734+b*b),d=c-b,e=A(z(d),1/3)*(d<0?-1:1),f=-c-b,g=A(z(f),1/3)*(f<0?-1:1),h=e+g+.5;return(1-h)*3*h*h+h*h*h},backIn:function(a){var b=1.70158;return a*a*((b+1)*a-b)},backOut:function(a){a=a-1;var b=1.70158;return a*a*((b+1)*a+b)+1},elastic:function(a){if(a==!!a)return a;return A(2,-10*a)*w.sin((a-.075)*2*B/.3)+1},bounce:function(a){var b=7.5625,c=2.75,d;a<1/c?d=b*a*a:a<2/c?(a-=1.5/c,d=b*a*a+.75):a<2.5/c?(a-=2.25/c,d=b*a*a+.9375):(a-=2.625/c,d=b*a*a+.984375);return d}};ck.easeIn=ck["ease-in"]=ck["<"],ck.easeOut=ck["ease-out"]=ck[">"],ck.easeInOut=ck["ease-in-out"]=ck["<>"],ck["back-in"]=ck.backIn,ck["back-out"]=ck.backOut;var cl=[],cm=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){setTimeout(a,16)},cn=function(){var b=+(new Date),c=0;for(;c1&&!d.next&&cr(d.anim,d.el,d.anim.percents[0],null,d.totalOrigin,d.repeat-1),d.next&&!d.stop&&cr(d.anim,d.el,d.next,null,d.totalOrigin,d.repeat)}a.svg&&m&&m.paper&&m.paper.safari(),cl.length&&cm(cn)},co=function(a){return a>255?255:a<0?0:a};b_.animateWith=function(b,c,d,e,f,g){var h=d?a.animation(d,e,f,g):c;status=b.status(c);return this.animate(h).status(h,status*c.ms/h.ms)},b_.onAnimation=function(a){a?eve.on("anim.frame."+this.id,a):eve.unbind("anim.frame."+this.id);return this},cq.prototype.delay=function(a){var b=new cq(this.anim,this.ms);b.times=this.times,b.del=+a||0;return b},cq.prototype.repeat=function(a){var b=new cq(this.anim,this.ms);b.del=this.del,b.times=w.floor(x(a,0))||1;return b},a.animation=function(b,c,d,e){if(b instanceof cq)return b;if(a.is(d,"function")||!d)e=e||d||null,d=null;b=Object(b),c=+c||0;var f={},h,i;for(i in b)b[g](i)&&Q(i)!=i&&Q(i)+"%"!=i&&(h=!0,f[i]=b[i]);if(!h)return new cq(b,c);d&&(f.easing=d),e&&(f.callback=e);return new cq({100:f},c)},b_.animate=function(b,c,d,e){var f=this;if(f.removed){e&&e.call(f);return f}var g=b instanceof cq?b:a.animation(b,c,d,e);cr(g,f,g.percents[0],null,f.attr());return f},b_.setTime=function(a,b){a&&b!=null&&this.status(a,y(b,a.ms)/a.ms);return this},b_.status=function(a,b){var c=[],d=0,e,f;if(b!=null){cr(a,this,-1,y(b,1));return this}e=cl.length;for(;d.5)*2-1;i(m-.5,2)+i(n-.5,2)>.25&&(n=f.sqrt(.25-i(m-.5,2))*e+.5)&&n!=.5&&(n=n.toFixed(5)-1e-5*e)}return l}),e=e.split(/\s*\-\s*/);if(j=="linear"){var t=e.shift();t=-d(t);if(isNaN(t))return null;var u=[0,0,f.cos(a.rad(t)),f.sin(a.rad(t))],v=1/(g(h(u[2]),h(u[3]))||1);u[2]*=v,u[3]*=v,u[2]<0&&(u[0]=-u[2],u[2]=0),u[3]<0&&(u[1]=-u[3],u[3]=0)}var w=a._parseDots(e);if(!w)return null;b.gradient&&(p.defs.removeChild(b.gradient),delete b.gradient),k=k.replace(/[\(\)\s,\xb0#]/g,"-"),s=q(j+"Gradient",{id:k}),b.gradient=s,q(s,j=="radial"?{fx:m,fy:n}:{x1:u[0],y1:u[1],x2:u[2],y2:u[3],gradientTransform:b.matrix.invert()}),p.defs.appendChild(s);for(var x=0,y=w.length;x1?E.opacity/100:E.opacity});case"stroke":E=a.getRGB(p),i.setAttribute(o,E.hex),o=="stroke"&&E[b]("opacity")&&q(i,{"stroke-opacity":E.opacity>1?E.opacity/100:E.opacity}),o=="stroke"&&d._.arrows&&("startString"in d._.arrows&&w(d,d._.arrows.startString),"endString"in d._.arrows&&w(d,d._.arrows.endString,1));break;case"gradient":(d.type=="circle"||d.type=="ellipse"||c(p).charAt()!="r")&&u(d,p);break;case"opacity":k.gradient&&!k[b]("stroke-opacity")&&q(i,{"stroke-opacity":p>1?p/100:p});case"fill-opacity":if(k.gradient){F=a._g.doc.getElementById(i.getAttribute("fill").replace(/^url\(#|\)$/g,l)),F&&(G=F.getElementsByTagName("stop"),q(G[G.length-1],{"stop-opacity":p}));break};default:o=="font-size"&&(p=e(p,10)+"px");var H=o.replace(/(\-.)/g,function(a){return a.substring(1).toUpperCase()});i.style[H]=p,d._.dirty=1,i.setAttribute(o,p)}}B(d,f),i.style.visibility=m},A=1.2,B=function(d,f){if(d.type=="text"&&!!(f[b]("text")||f[b]("font")||f[b]("font-size")||f[b]("x")||f[b]("y"))){var g=d.attrs,h=d.node,i=h.firstChild?e(a._g.doc.defaultView.getComputedStyle(h.firstChild,l).getPropertyValue("font-size"),10):10;if(f[b]("text")){g.text=f.text;while(h.firstChild)h.removeChild(h.firstChild);var j=c(f.text).split("\n"),k=[],m;for(var n=0,o=j.length;n"));var $=X.getBoundingClientRect();t.W=m.w=($.right-$.left)/Y,t.H=m.h=($.bottom-$.top)/Y,t.X=m.x,t.Y=m.y+t.H/2,("x"in i||"y"in i)&&(t.path.v=a.format("m{0},{1}l{2},{1}",f(m.x*u),f(m.y*u),f(m.x*u)+1));var _=["x","y","text","font","font-family","font-weight","font-style","font-size"];for(var ba=0,bb=_.length;ba.25&&(c=e.sqrt(.25-pow(b-.5,2))*((c>.5)*2-1)+.5),l=b+n+c);return o}),f=f.split(/\s*\-\s*/);if(k=="linear"){var m=f.shift();m=-d(m);if(isNaN(m))return null}var p=a._parseDots(f);if(!p)return null;b=b.shape||b.node;if(p.length){b.removeChild(g),g.on=!0,g.method="none",g.color=p[0].color,g.color2=p[p.length-1].color;var q=[];for(var r=0,s=p.length;r')}}catch(c){B=function(a){return b.createElement("<"+a+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}};C(a._g.win),a._engine.create=function(){var b=a._getContainer.apply(0,arguments),c=b.container,d=b.height,e,f=b.width,g=b.x,h=b.y;if(!c)throw new Error("VML container not found.");var i=new a._Paper,j=i.canvas=a._g.doc.createElement("div"),k=j.style;g=g||0,h=h||0,f=f||512,d=d||342,i.width=f,i.height=d,f==+f&&(f+="px"),d==+d&&(d+="px"),i.coordsize=u*1e3+n+u*1e3,i.coordorigin="0 0",i.span=a._g.doc.createElement("span"),i.span.style.cssText="position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;",j.appendChild(i.span),k.cssText=a.format("top:0;left:0;width:{0};height:{1};display:inline-block;position:relative;clip:rect(0 {0} {1} 0);overflow:hidden",f,d),c==1?(a._g.doc.body.appendChild(j),k.left=g+"px",k.top=h+"px",k.position="absolute"):c.firstChild?c.insertBefore(j,c.firstChild):c.appendChild(j),i.renderfix=function(){};return i},a.prototype.clear=function(){a.eve("clear",this),this.canvas.innerHTML=o,this.span=a._g.doc.createElement("span"),this.span.style.cssText="position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;display:inline;",this.canvas.appendChild(this.span),this.bottom=this.top=null},a.prototype.remove=function(){a.eve("remove",this),this.canvas.parentNode.removeChild(this.canvas);for(var b in this)this[b]=removed(b);return!0}}(window.Raphael) \ No newline at end of file diff --git a/raphael.core.js b/raphael.core.js index 346400c..f8abc69 100644 --- a/raphael.core.js +++ b/raphael.core.js @@ -99,7 +99,35 @@ was: Object.prototype[has].call(g.win, "Raphael"), is: g.win.Raphael }, - Paper = function () {}, + Paper = function () { + /*\ + * Paper.customAttributes + [ property (object) ] + ** + * If you have a set of attributes that you would like to represent + * as a function of some number you can do it easily with custom attributes: + > Usage + | paper.customAttributes.hue = function (num) { + | num = num % 1; + | return {fill: "hsb(" + num + ", .75, 1)"}; + | }; + | // Custom attribute “hue” will change fill + | // to be given hue with fixed saturation and brightness. + | // Now you can use it like this: + | var c = paper.circle(10, 10, 10).attr({hue: .45}); + | // or even like this: + | c.animate({hue: 1}, 1e3); + | + | // You could also create custom attribute + | // with multiple parameters: + | paper.customAttributes.hsb = function (h, s, b) { + | return {fill: "hsb(" + [h, s, b].join(",") + ")"}; + | }; + | c.attr({hsb: ".5 .8 1"}); + | c.animate({hsb: "1 0 .5"}, 1e3); + \*/ + this.customAttributes = {}; + }, paperproto, appendChild = "appendChild", apply = "apply", @@ -332,33 +360,6 @@ | paper.mystuff.star(); \*/ R.fn = paperproto = Paper.prototype = R.prototype; - /*\ - * Paper.customAttributes - [ property (object) ] - ** - * If you have a set of attributes that you would like to represent - * as a function of some number you can do it easily with custom attributes: - > Usage - | paper.customAttributes.hue = function (num) { - | num = num % 1; - | return {fill: "hsb(" + num + ", .75, 1)"}; - | }; - | // Custom attribute “hue” will change fill - | // to be given hue with fixed saturation and brightness. - | // Now you can use it like this: - | var c = paper.circle(10, 10, 10).attr({hue: .45}); - | // or even like this: - | c.animate({hue: 1}, 1e3); - | - | // You could also create custom attribute - | // with multiple parameters: - | paper.customAttributes.hsb = function (h, s, b) { - | return {fill: "hsb(" + [h, s, b].join(",") + ")"}; - | }; - | c.attr({hsb: ".5 .8 1"}); - | c.animate({hsb: "1 0 .5"}, 1e3); - \*/ - paperproto.customAttributes = {}; R._id = 0; R._oid = 0; /*\ @@ -2662,7 +2663,7 @@ ** * Shortcut for assigning event handler for `drag.over.` event, where id is id of the element (see @Element.id). > Parameters - - f (function) handler for event + - f (function) handler for event, first argument would be the element you are dragging over \*/ elproto.onDragOver = function (f) { f ? eve.on("drag.over." + this.id, f) : eve.unbind("drag.over." + this.id); @@ -2756,13 +2757,26 @@ [ method ] ** * Creates a path element by given path data string. - ** > Parameters - ** - - pathString (string) path data in SVG path string format. - = (object) Raphaël element object with type “path” - # Details of a path's data attribute's format are described in the SVG specification. - ** + - pathString (string) #optional path string in SVG format. + * Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example: + | "M10,20L30,40" + * Here we can see two commands: “M”, with arguments `(10, 20)` and “L” with arguments `(30, 40)`. Upper case letter mean command is absolute, lower case—relative. + * + #

Here is short list of commands available, for more details see SVG path string format.

+ # + # + # + # + # + # + # + # + # + # + # + #
CommandNameParameters
Mmoveto(x y)+
Zclosepath(none)
Llineto(x y)+
Hhorizontal linetox+
Vvertical linetoy+
Ccurveto(x1 y1 x2 y2 x y)+
Ssmooth curveto(x2 y2 x y)+
Qquadratic Bézier curveto(x1 y1 x y)+
Tsmooth quadratic Bézier curveto(x y)+
Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
RCatmull-Rom curveto*x1 y1 (x y)+
+ * * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier. > Usage | var c = paper.path("M10 10L90 90"); | // draw a diagonal line: @@ -3208,7 +3222,7 @@ sp += p.shift() + p; } subpaths.end = sp; - point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1); + point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1); point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha}); return point; }; @@ -3263,7 +3277,7 @@ = (string) pathstring for the segment \*/ R.getSubpath = function (path, from, to) { - if (abs(this.getTotalLength(path) - to) < 1e-6) { + if (this.getTotalLength(path) - to < 1e-6) { return getSubpathsAtLength(path, from).end; } var a = getSubpathsAtLength(path, to, 1); diff --git a/raphael.js b/raphael.js index 2fd5b72..42b93ce 100644 --- a/raphael.js +++ b/raphael.js @@ -257,7 +257,10 @@ was: Object.prototype[has].call(g.win, "Raphael"), is: g.win.Raphael }, - Paper = function () {}, + Paper = function () { + + this.customAttributes = {}; + }, paperproto, appendChild = "appendChild", apply = "apply", @@ -451,8 +454,6 @@ R._Paper = Paper; R.fn = paperproto = Paper.prototype = R.prototype; - - paperproto.customAttributes = {}; R._id = 0; R._oid = 0; @@ -2366,7 +2367,7 @@ sp += p.shift() + p; } subpaths.end = sp; - point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1); + point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1); point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha}); return point; }; @@ -2380,7 +2381,7 @@ R.getPointAtLength = getPointAtLength; R.getSubpath = function (path, from, to) { - if (abs(this.getTotalLength(path) - to) < 1e-6) { + if (this.getTotalLength(path) - to < 1e-6) { return getSubpathsAtLength(path, from).end; } var a = getSubpathsAtLength(path, to, 1); @@ -3968,7 +3969,6 @@ window.Raphael.svg && function (R) { Element.prototype = elproto; elproto.constructor = Element; - R._engine.path = function (pathString, SVG) { var el = $("path"); SVG.canvas && SVG.canvas.appendChild(el); @@ -4585,7 +4585,6 @@ window.Raphael.vml && function (R) { params.cursor && (s.cursor = params.cursor); "blur" in params && o.blur(params.blur); if (params.path && o.type == "path" || newpath) { - // node.path = path2vml(a.path); node.path = path2vml(~Str(a.path).toLowerCase().indexOf("r") ? R._pathToAbsolute(a.path) : a.path); if (o.type == "image") { o._.fillpos = [a.x, a.y]; diff --git a/raphael.svg.js b/raphael.svg.js index c0580f9..5737da4 100644 --- a/raphael.svg.js +++ b/raphael.svg.js @@ -684,36 +684,6 @@ window.Raphael.svg && function (R) { Element.prototype = elproto; elproto.constructor = Element; - /*\ - * Element.path - [ method ] - ** - * Creates a path element by given path data string. - > Parameters - - pathString (string) #optional path string in SVG format. - * Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example: - | "M10,20L30,40" - * Here we can see two commands: “M”, with arguments `(10, 20)` and “L” with arguments `(30, 40)`. Upper case letter mean command is absolute, lower case—relative. - * - x

Here is short list of commands available, for more details see SVG path string format.

- # - # - # - # - # - # - # - # - # - # - # - #
CommandNameParameters
Mmoveto(x y)+
Zclosepath(none)
Llineto(x y)+
Hhorizontal linetox+
Vvertical linetoy+
Ccurveto(x1 y1 x2 y2 x y)+
Ssmooth curveto(x2 y2 x y)+
Qquadratic Bézier curveto(x1 y1 x y)+
Tsmooth quadratic Bézier curveto(x y)+
Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
RCatmull-Rom curveto*x1 y1 (x y)+
- * * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier. - > Usage - | var c = paper.path("M10 10L90 90"); - | // draw a diagonal line: - | // move to 10,10, line to 90,90 - \*/ R._engine.path = function (pathString, SVG) { var el = $("path"); SVG.canvas && SVG.canvas.appendChild(el); diff --git a/reference.html b/reference.html index 70f5ab6..f26010b 100644 --- a/reference.html +++ b/reference.html @@ -1,8 +1,8 @@ -Raphaël 2.0 Reference
  1. Animation
  2. Animation.delay()
  3. Animation.repeat()
  4. Element
  5. Element.animate()
  6. Element.animateWith()
  7. Element.attr()
  8. Element.click()
  9. Element.clone()
  10. Element.data()
  11. Element.dblclick()
  12. Element.drag()
  13. Element.getBBox()
  14. Element.getPointAtLength()
  15. Element.getSubpath()
  16. Element.getTotalLength()
  17. Element.glow()
  18. Element.hide()
  19. Element.hover()
  20. Element.id
  21. Element.insertAfter()
  22. Element.insertBefore()
  23. Element.mousedown()
  24. Element.mousemove()
  25. Element.mouseout()
  26. Element.mouseover()
  27. Element.mouseup()
  28. Element.next
  29. Element.node
  30. Element.onDragOver()
  31. Element.paper
  32. Element.path()
  33. Element.pause()
  34. Element.prev
  35. Element.raphael
  36. Element.remove()
  37. Element.removeData()
  38. Element.resume()
  39. Element.rotate()
  40. Element.scale()
  41. Element.setTime()
  42. Element.show()
  43. Element.status()
  44. Element.stop()
  45. Element.toBack()
  46. Element.toFront()
  47. Element.touchcancel()
  48. Element.touchend()
  49. Element.touchmove()
  50. Element.touchstart()
  51. Element.transform()
  52. Element.translate()
  53. Element.unclick()
  54. Element.undblclick()
  55. Element.undrag()
  56. Element.unhover()
  57. Element.unmousedown()
  58. Element.unmousemove()
  59. Element.unmouseout()
  60. Element.unmouseover()
  61. Element.unmouseup()
  62. Element.untouchcancel()
  63. Element.untouchend()
  64. Element.untouchmove()
  65. Element.untouchstart()
  66. Matrix
  67. Matrix.add()
  68. Matrix.clone()
  69. Matrix.invert()
  70. Matrix.rotate()
  71. Matrix.scale()
  72. Matrix.split()
  73. Matrix.toTransformString()
  74. Matrix.translate()
  75. Matrix.x()
  76. Matrix.y()
  77. Paper
  78. Paper.bottom
  79. Paper.circle()
  80. Paper.clear()
  81. Paper.customAttributes
  82. Paper.ellipse()
  83. Paper.forEach()
  84. Paper.getById()
  85. Paper.getElementByPoint()
  86. Paper.getFont()
  87. Paper.image()
  88. Paper.path()
  89. Paper.print()
  90. Paper.raphael
  91. Paper.rect()
  92. Paper.remove()
  93. Paper.renderfix()
  94. Paper.safari()
  95. Paper.set()
  96. Paper.setFinish()
  97. Paper.setSize()
  98. Paper.setStart()
  99. Paper.setViewBox()
  100. Paper.text()
  101. Paper.top
  102. Raphael()
  103. Raphael.angle()
  104. Raphael.animation()
  105. Raphael.color()
  106. Raphael.deg()
  107. Raphael.easing_formulas
  108. Raphael.el
  109. Raphael.findDotsAtSegment()
  110. Raphael.fn
  111. Raphael.format()
  112. Raphael.fullfill()
  113. Raphael.getColor()
  114. Raphael.getColor.reset()
  115. Raphael.getPointAtLength()
  116. Raphael.getRGB()
  117. Raphael.getSubpath()
  118. Raphael.getTotalLength()
  119. Raphael.hsb()
  120. Raphael.hsb2rgb()
  121. Raphael.hsl()
  122. Raphael.hsl2rgb()
  123. Raphael.is()
  124. Raphael.matrix()
  125. Raphael.ninja()
  126. Raphael.parsePathString()
  127. Raphael.parseTransformString()
  128. Raphael.path2curve()
  129. Raphael.pathToRelative()
  130. Raphael.rad()
  131. Raphael.registerFont()
  132. Raphael.rgb()
  133. Raphael.rgb2hsb()
  134. Raphael.rgb2hsl()
  135. Raphael.setWindow()
  136. Raphael.snapTo()
  137. Raphael.st
  138. Raphael.svg
  139. Raphael.type
  140. Raphael.vml
  141. Set
  142. Set.clear()
  143. Set.exclude()
  144. Set.forEach()
  145. Set.pop()
  146. Set.push()
  147. Set.splice()
  148. eve()
  149. eve.listeners()
  150. eve.nt()
  151. eve.on()
  152. eve.stop()
  153. eve.unbind()
  154. eve.version

Raphaël 2.0 Reference

 Animation⚓

-

 Animation.delay(delay)⚓➭

-

Creates a copy of existing animation object with given delay. +Raphaël Reference

  1. Animation
  2. Animation.delay()
  3. Animation.repeat()
  4. Element
  5. Element.animate()
  6. Element.animateWith()
  7. Element.attr()
  8. Element.click()
  9. Element.clone()
  10. Element.data()
  11. Element.dblclick()
  12. Element.drag()
  13. Element.getBBox()
  14. Element.getPointAtLength()
  15. Element.getSubpath()
  16. Element.getTotalLength()
  17. Element.glow()
  18. Element.hide()
  19. Element.hover()
  20. Element.id
  21. Element.insertAfter()
  22. Element.insertBefore()
  23. Element.mousedown()
  24. Element.mousemove()
  25. Element.mouseout()
  26. Element.mouseover()
  27. Element.mouseup()
  28. Element.next
  29. Element.node
  30. Element.onDragOver()
  31. Element.paper
  32. Element.pause()
  33. Element.prev
  34. Element.raphael
  35. Element.remove()
  36. Element.removeData()
  37. Element.resume()
  38. Element.rotate()
  39. Element.scale()
  40. Element.setTime()
  41. Element.show()
  42. Element.status()
  43. Element.stop()
  44. Element.toBack()
  45. Element.toFront()
  46. Element.touchcancel()
  47. Element.touchend()
  48. Element.touchmove()
  49. Element.touchstart()
  50. Element.transform()
  51. Element.translate()
  52. Element.unclick()
  53. Element.undblclick()
  54. Element.undrag()
  55. Element.unhover()
  56. Element.unmousedown()
  57. Element.unmousemove()
  58. Element.unmouseout()
  59. Element.unmouseover()
  60. Element.unmouseup()
  61. Element.untouchcancel()
  62. Element.untouchend()
  63. Element.untouchmove()
  64. Element.untouchstart()
  65. Matrix
  66. Matrix.add()
  67. Matrix.clone()
  68. Matrix.invert()
  69. Matrix.rotate()
  70. Matrix.scale()
  71. Matrix.split()
  72. Matrix.toTransformString()
  73. Matrix.translate()
  74. Matrix.x()
  75. Matrix.y()
  76. Paper
  77. Paper.bottom
  78. Paper.circle()
  79. Paper.clear()
  80. Paper.customAttributes
  81. Paper.ellipse()
  82. Paper.forEach()
  83. Paper.getById()
  84. Paper.getElementByPoint()
  85. Paper.getFont()
  86. Paper.image()
  87. Paper.path()
  88. Paper.print()
  89. Paper.raphael
  90. Paper.rect()
  91. Paper.remove()
  92. Paper.renderfix()
  93. Paper.safari()
  94. Paper.set()
  95. Paper.setFinish()
  96. Paper.setSize()
  97. Paper.setStart()
  98. Paper.setViewBox()
  99. Paper.text()
  100. Paper.top
  101. Raphael()
  102. Raphael.angle()
  103. Raphael.animation()
  104. Raphael.color()
  105. Raphael.deg()
  106. Raphael.easing_formulas
  107. Raphael.el
  108. Raphael.findDotsAtSegment()
  109. Raphael.fn
  110. Raphael.format()
  111. Raphael.fullfill()
  112. Raphael.getColor()
  113. Raphael.getColor.reset()
  114. Raphael.getPointAtLength()
  115. Raphael.getRGB()
  116. Raphael.getSubpath()
  117. Raphael.getTotalLength()
  118. Raphael.hsb()
  119. Raphael.hsb2rgb()
  120. Raphael.hsl()
  121. Raphael.hsl2rgb()
  122. Raphael.is()
  123. Raphael.matrix()
  124. Raphael.ninja()
  125. Raphael.parsePathString()
  126. Raphael.parseTransformString()
  127. Raphael.path2curve()
  128. Raphael.pathToRelative()
  129. Raphael.rad()
  130. Raphael.registerFont()
  131. Raphael.rgb()
  132. Raphael.rgb2hsb()
  133. Raphael.rgb2hsl()
  134. Raphael.setWindow()
  135. Raphael.snapTo()
  136. Raphael.st
  137. Raphael.svg
  138. Raphael.type
  139. Raphael.vml
  140. Set
  141. Set.clear()
  142. Set.exclude()
  143. Set.forEach()
  144. Set.pop()
  145. Set.push()
  146. Set.splice()
  147. eve()
  148. eve.listeners()
  149. eve.nt()
  150. eve.on()
  151. eve.stop()
  152. eve.unbind()
  153. eve.version

Raphaël Reference

 Animation⚓

+

 Animation.delay(delay)⚓➭

+

Creates a copy of existing animation object with given delay.

Parameters

@@ -11,8 +11,8 @@
number of ms to pass between animation start and actual animation

Returns: object new altered Animation object

-

 Animation.repeat(repeat)⚓➭

-

Creates a copy of existing animation object with given repetition. +

 Animation.repeat(repeat)⚓➭

+

Creates a copy of existing animation object with given repetition.

Parameters

@@ -21,9 +21,9 @@
number iterations of animation. For infinite animation pass Infinity

Returns: object new altered Animation object

-

 Element⚓

-

 Element.animate(…)⚓➭

-

Creates and starts animation for given element. +

 Element⚓

+

 Element.animate(…)⚓➭

+

Creates and starts animation for given element.

Parameters

@@ -49,8 +49,8 @@
animation object, see Raphael.animation

Returns: object original element

-

 Element.animateWith(…)⚓➭

-

Acts similar to Element.animate, but ensure that given animation runs in sync with another given element. +

 Element.animateWith(…)⚓➭

+

Acts similar to Element.animate, but ensure that given animation runs in sync with another given element.

Parameters

@@ -91,8 +91,8 @@
animation object, see Raphael.animation

Returns: object original element

-

 Element.attr(…)⚓➭

-

Sets the attributes of the element. +

 Element.attr(…)⚓➭

+

Sets the attributes of the element.

Parameters

@@ -192,8 +192,8 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can o
  • hsla(•••, •••, •••, •••) — same as above, but with opacity
  • Optionally for hsb and hsl you could specify hue as a degree: “hsl(240deg, 1, .5)” or, if you want to go fancy, “hsl(240°, 1, .5)”
    • -

     Element.click(handler)⚓➭

    -

    Adds event handler for click for the element. +

     Element.click(handler)⚓➭

    +

    Adds event handler for click for the element.

    Parameters

    @@ -202,10 +202,10 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can o
    handler for the event

    Returns: object Element

    -

     Element.clone()⚓➭

    -

    Returns: object clone of a given element

    -

     Element.data(key, [value])⚓➭

    -

    Adds or retrieves given value asociated with given key. +

     Element.clone()⚓➭

    +

    Returns: object clone of a given element

    +

     Element.data(key, [value])⚓➭

    +

    Adds or retrieves given value asociated with given key. See also Element.removeData

    Parameters @@ -233,8 +233,8 @@ See also Element.removeData }); } -

     Element.dblclick(handler)⚓➭

    -

    Adds event handler for double click for the element. +

     Element.dblclick(handler)⚓➭

    +

    Adds event handler for double click for the element.

    Parameters

    @@ -243,8 +243,8 @@ See also Element.removeData
    handler for the event

    Returns: object Element

    -

     Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])⚓➭

    -

    Adds event handlers for drag of the element. +

     Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])⚓➭

    +

    Adds event handlers for drag of the element.

    Parameters

    @@ -293,8 +293,8 @@ See also Element.removeData
    1. eventobjectDOM event object

    Returns: object Element

    -

     Element.getBBox(isWithoutTransform)⚓➭

    -

    Return bounding box for a given element +

     Element.getBBox(isWithoutTransform)⚓➭

    +

    Return bounding box for a given element

    Parameters

    @@ -308,8 +308,8 @@ See also Element.removeData
  • width:numberwidth
  • height:numberheight
  • }
    • -

     Element.getPointAtLength(length)⚓➭

    -

    Return coordinates of the point located at the given length on the given path. Only works for element of “path” type. +

     Element.getPointAtLength(length)⚓➭

    +

    Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.

    Parameters

    @@ -322,8 +322,8 @@ See also Element.removeData
  • y:numbery coordinate
  • alpha:numberangle of derivative
  • }
    • -

     Element.getSubpath(from, to)⚓➭

    -

    Return subpath of a given element from given length to given length. Only works for element of “path” type. +

     Element.getSubpath(from, to)⚓➭

    +

    Return subpath of a given element from given length to given length. Only works for element of “path” type.

    Parameters

    @@ -335,12 +335,12 @@ See also Element.removeData
    position of the end of the segment

    Returns: string pathstring for the segment

    -

     Element.getTotalLength()⚓➭

    -

    Returns length of the path in pixels. Only works for element of “path” type. +

     Element.getTotalLength()⚓➭

    +

    Returns length of the path in pixels. Only works for element of “path” type.

    Returns: number length.

    -

     Element.glow([glow])⚓➭

    -

    Return set of elements that create glow-like effect around given element. See Paper.set. +

     Element.glow([glow])⚓➭

    +

    Return set of elements that create glow-like effect around given element. See Paper.set.

    Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.

    @@ -359,12 +359,12 @@ See also Element.removeData
  • colorstringglow colour, default is black
  • }

    • Returns: object Paper.set of elements that represents glow

    -

     Element.hide()⚓➭

    -

    Makes element invisible. See Element.show. +

     Element.hide()⚓➭

    +

    Makes element invisible. See Element.show.

    Returns: object Element

    -

     Element.hover(f_in, f_out, [icontext], [ocontext])⚓➭

    -

    Adds event handlers for hover for the element. +

     Element.hover(f_in, f_out, [icontext], [ocontext])⚓➭

    +

    Adds event handlers for hover for the element.

    Parameters

    @@ -384,20 +384,20 @@ See also Element.removeData
    context for hover out handler

    Returns: object Element

    -

     Element.id⚓➭

    -
    number

    Unique id of the element. Especially usesful when you want to listen to events of the element, +

     Element.id⚓➭

    +
    number

    Unique id of the element. Especially usesful when you want to listen to events of the element, because all events are fired in format <module>.<action>.<id>. Also useful for Paper.getById method.

    -

     Element.insertAfter()⚓➭

    -

    Inserts current object after the given one. +

     Element.insertAfter()⚓➭

    +

    Inserts current object after the given one.

    Returns: object Element

    -

     Element.insertBefore()⚓➭

    -

    Inserts current object before the given one. +

     Element.insertBefore()⚓➭

    +

    Inserts current object before the given one.

    Returns: object Element

    -

     Element.mousedown(handler)⚓➭

    -

    Adds event handler for mousedown for the element. +

     Element.mousedown(handler)⚓➭

    +

    Adds event handler for mousedown for the element.

    Parameters

    @@ -406,8 +406,8 @@ because all events are fired in format <module>.<action>.<id>handler for the event

    Returns: object Element

    -

     Element.mousemove(handler)⚓➭

    -

    Adds event handler for mousemove for the element. +

     Element.mousemove(handler)⚓➭

    +

    Adds event handler for mousemove for the element.

    Parameters

    @@ -416,8 +416,8 @@ because all events are fired in format <module>.<action>.<id>handler for the event

    Returns: object Element

    -

     Element.mouseout(handler)⚓➭

    -

    Adds event handler for mouseout for the element. +

     Element.mouseout(handler)⚓➭

    +

    Adds event handler for mouseout for the element.

    Parameters

    @@ -426,8 +426,8 @@ because all events are fired in format <module>.<action>.<id>handler for the event

    Returns: object Element

    -

     Element.mouseover(handler)⚓➭

    -

    Adds event handler for mouseover for the element. +

     Element.mouseover(handler)⚓➭

    +

    Adds event handler for mouseover for the element.

    Parameters

    @@ -436,8 +436,8 @@ because all events are fired in format <module>.<action>.<id>handler for the event

    Returns: object Element

    -

     Element.mouseup(handler)⚓➭

    -

    Adds event handler for mouseup for the element. +

     Element.mouseup(handler)⚓➭

    +

    Adds event handler for mouseup for the element.

    Parameters

    @@ -446,11 +446,11 @@ because all events are fired in format <module>.<action>.<id>handler for the event

    Returns: object Element

    -

     Element.next⚓➭

    -
    object

    Reference to the next element in the hierarchy. +

     Element.next⚓➭

    +
    object

    Reference to the next element in the hierarchy.

    -

     Element.node⚓➭

    -
    object

    Gives you a reference to the DOM object, so you can assign event handlers or just mess around. +

     Element.node⚓➭

    +
    object

    Gives you a reference to the DOM object, so you can assign event handlers or just mess around. Note: Don’t mess with it.

    Usage @@ -461,17 +461,17 @@ c.node.onclick = function () { c.attr("fill", "red"); }; -

     Element.onDragOver(f)⚓➭

    -

    Shortcut for assigning event handler for drag.over.<id> event, where id is id of the element (see Element.id). +

     Element.onDragOver(f)⚓➭

    +

    Shortcut for assigning event handler for drag.over.<id> event, where id is id of the element (see Element.id).

    Parameters

    f
    function
    -
    handler for event
    +
    handler for event, first argument would be the element you are dragging over
    -

     Element.paper⚓➭

    -
    object

    Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions. +

     Element.paper⚓➭

    +
    object

    Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.

    Usage

    @@ -481,46 +481,8 @@ c.node.onclick = function () { .attr({stroke: "red"}); }     -

     Element.path([pathString])⚓➭

    -

    Creates a path element by given path data string. -

    -

    Parameters -

    -
    pathString
    -
    optional
    -
    string
    -
    path string in SVG format.
    -
    -

    Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example: -

    -
    "M10,20L30,40"
-
    -

    Here we can see two commands: “M”, with arguments (10, 20) and “L” with arguments (30, 40). Upper case letter mean command is absolute, lower case—relative. -

    -

    -

    - - - - - - - - - - - -
    CommandNameParameters
    Mmoveto(x y)+
    Zclosepath(none)
    Llineto(x y)+
    Hhorizontal linetox+
    Vvertical linetoy+
    Ccurveto(x1 y1 x2 y2 x y)+
    Ssmooth curveto(x2 y2 x y)+
    Qquadratic Bézier curveto(x1 y1 x y)+
    Tsmooth quadratic Bézier curveto(x y)+
    Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
    RCatmull-Rom curveto*x1 y1 (x y)+
    -

    * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier. -

    -

    Usage -

    -
    var c = paper.path("M10 10L90 90");
-// draw a diagonal line:
-// move to 10,10, line to 90,90
-
    -

     Element.pause([anim])⚓➭

    -

    Stops animation of the element with ability to resume it later on. +

     Element.pause([anim])⚓➭

    +

    Stops animation of the element with ability to resume it later on.

    Parameters

    @@ -530,11 +492,11 @@ c.node.onclick = function () {
    animation object

    Returns: object original element

    -

     Element.prev⚓➭

    -
    object

    Reference to the previous element in the hierarchy. +

     Element.prev⚓➭

    +
    object

    Reference to the previous element in the hierarchy.

    -

     Element.raphael⚓➭

    -
    object

    Internal reference to Raphael object. In case it is not available. +

     Element.raphael⚓➭

    +
    object

    Internal reference to Raphael object. In case it is not available.

    Usage

    @@ -544,11 +506,11 @@ c.node.onclick = function () { this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex}); }     -

     Element.remove()⚓➭

    -

    Removes element form the paper. +

     Element.remove()⚓➭

    +

    Removes element form the paper.

    -

     Element.removeData([key])⚓➭

    -

    Removes value associated with an element by given key. +

     Element.removeData([key])⚓➭

    +

    Removes value associated with an element by given key. If key is not provided, removes all the data of the element.

    Parameters @@ -559,8 +521,8 @@ If key is not provided, removes all the data of the element.

    key

    Returns: object Element

    -

     Element.resume([anim])⚓➭

    -

    Resumes animation if it was paused with Element.pause method. +

     Element.resume([anim])⚓➭

    +

    Resumes animation if it was paused with Element.pause method.

    Parameters

    @@ -570,8 +532,8 @@ If key is not provided, removes all the data of the element.
    animation object

    Returns: object original element

    -

     Element.rotate(deg, [cx], [cy])⚓➭

    -

    Adds rotation by given angle around given point to the list of +

     Element.rotate(deg, [cx], [cy])⚓➭

    +

    Adds rotation by given angle around given point to the list of transformations of the element.

    Parameters @@ -591,8 +553,8 @@ transformations of the element.

    If cx & cy aren’t specified centre of the shape is used as a point of rotation.

    Returns: object Element

    -

     Element.scale(sx, sy, [cx], [cy])⚓➭

    -

    Adds scale by given amount relative to given point to the list of +

     Element.scale(sx, sy, [cx], [cy])⚓➭

    +

    Adds scale by given amount relative to given point to the list of transformations of the element.

    Parameters @@ -615,8 +577,8 @@ transformations of the element.

    If cx & cy aren’t specified centre of the shape is used instead.

    Returns: object Element

    -

     Element.setTime(anim, value)⚓➭

    -

    Sets the status of animation of the element in milliseconds. Similar to Element.status method. +

     Element.setTime(anim, value)⚓➭

    +

    Sets the status of animation of the element in milliseconds. Similar to Element.status method.

    Parameters

    @@ -632,12 +594,12 @@ transformations of the element.

    On each animation frame event anim.frame.<id>, on start anim.start.<id> and on end anim.finish.<id>.

    -

     Element.show()⚓➭

    -

    Makes element visible. See Element.hide. +

     Element.show()⚓➭

    +

    Makes element visible. See Element.hide.

    Returns: object Element

    -

     Element.status([anim], [value])⚓➭

    -

    Gets or sets the status of animation of the element. +

     Element.status([anim], [value])⚓➭

    +

    Gets or sets the status of animation of the element.

    Parameters

    @@ -660,8 +622,8 @@ transformations of the element.

    or

    Returns: object original element if value is specified

    -

     Element.stop([anim])⚓➭

    -

    Stops animation of the element. +

     Element.stop([anim])⚓➭

    +

    Stops animation of the element.

    Parameters

    @@ -671,16 +633,16 @@ transformations of the element.
    animation object

    Returns: object original element

    -

     Element.toBack()⚓➭

    -

    Moves the element so it is the furthest from the viewer’s eyes, behind other elements. +

     Element.toBack()⚓➭

    +

    Moves the element so it is the furthest from the viewer’s eyes, behind other elements.

    Returns: object Element

    -

     Element.toFront()⚓➭

    -

    Moves the element so it is the closest to the viewer’s eyes, on top of other elements. +

     Element.toFront()⚓➭

    +

    Moves the element so it is the closest to the viewer’s eyes, on top of other elements.

    Returns: object Element

    -

     Element.touchcancel(handler)⚓➭

    -

    Adds event handler for touchcancel for the element. +

     Element.touchcancel(handler)⚓➭

    +

    Adds event handler for touchcancel for the element.

    Parameters

    @@ -689,8 +651,8 @@ transformations of the element.
    handler for the event

    Returns: object Element

    -

     Element.touchend(handler)⚓➭

    -

    Adds event handler for touchend for the element. +

     Element.touchend(handler)⚓➭

    +

    Adds event handler for touchend for the element.

    Parameters

    @@ -699,8 +661,8 @@ transformations of the element.
    handler for the event

    Returns: object Element

    -

     Element.touchmove(handler)⚓➭

    -

    Adds event handler for touchmove for the element. +

     Element.touchmove(handler)⚓➭

    +

    Adds event handler for touchmove for the element.

    Parameters

    @@ -709,8 +671,8 @@ transformations of the element.
    handler for the event

    Returns: object Element

    -

     Element.touchstart(handler)⚓➭

    -

    Adds event handler for touchstart for the element. +

     Element.touchstart(handler)⚓➭

    +

    Adds event handler for touchstart for the element.

    Parameters

    @@ -719,8 +681,8 @@ transformations of the element.
    handler for the event

    Returns: object Element

    -

     Element.transform([tstr])⚓➭

    -

    Adds transformation to the element which is separate to other attributes, +

     Element.transform([tstr])⚓➭

    +

    Adds transformation to the element which is separate to other attributes, i.e. translation doesn’t change x or y of the rectange. The format of transformation string is similar to the path string syntax:

    @@ -762,8 +724,8 @@ console.log(el.transform());

    else

    Returns: object Element

    -

     Element.translate(dx, dy)⚓➭

    -

    Adds translation by given amount to the list of transformations of the element. +

     Element.translate(dx, dy)⚓➭

    +

    Adds translation by given amount to the list of transformations of the element.

    Parameters

    @@ -775,8 +737,8 @@ console.log(el.transform());
    vertical shift

    Returns: object Element

    -

     Element.unclick(handler)⚓➭

    -

    Removes event handler for click for the element. +

     Element.unclick(handler)⚓➭

    +

    Removes event handler for click for the element.

    Parameters

    @@ -785,8 +747,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.undblclick(handler)⚓➭

    -

    Removes event handler for double click for the element. +

     Element.undblclick(handler)⚓➭

    +

    Removes event handler for double click for the element.

    Parameters

    @@ -795,11 +757,11 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.undrag()⚓➭

    -

    Removes all drag event handlers from given element. +

     Element.undrag()⚓➭

    +

    Removes all drag event handlers from given element.

    -

     Element.unhover(f_in, f_out)⚓➭

    -

    Removes event handlers for hover for the element. +

     Element.unhover(f_in, f_out)⚓➭

    +

    Removes event handlers for hover for the element.

    Parameters

    @@ -811,8 +773,8 @@ console.log(el.transform());
    handler for hover out

    Returns: object Element

    -

     Element.unmousedown(handler)⚓➭

    -

    Removes event handler for mousedown for the element. +

     Element.unmousedown(handler)⚓➭

    +

    Removes event handler for mousedown for the element.

    Parameters

    @@ -821,8 +783,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.unmousemove(handler)⚓➭

    -

    Removes event handler for mousemove for the element. +

     Element.unmousemove(handler)⚓➭

    +

    Removes event handler for mousemove for the element.

    Parameters

    @@ -831,8 +793,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.unmouseout(handler)⚓➭

    -

    Removes event handler for mouseout for the element. +

     Element.unmouseout(handler)⚓➭

    +

    Removes event handler for mouseout for the element.

    Parameters

    @@ -841,8 +803,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.unmouseover(handler)⚓➭

    -

    Removes event handler for mouseover for the element. +

     Element.unmouseover(handler)⚓➭

    +

    Removes event handler for mouseover for the element.

    Parameters

    @@ -851,8 +813,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.unmouseup(handler)⚓➭

    -

    Removes event handler for mouseup for the element. +

     Element.unmouseup(handler)⚓➭

    +

    Removes event handler for mouseup for the element.

    Parameters

    @@ -861,8 +823,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.untouchcancel(handler)⚓➭

    -

    Removes event handler for touchcancel for the element. +

     Element.untouchcancel(handler)⚓➭

    +

    Removes event handler for touchcancel for the element.

    Parameters

    @@ -871,8 +833,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.untouchend(handler)⚓➭

    -

    Removes event handler for touchend for the element. +

     Element.untouchend(handler)⚓➭

    +

    Removes event handler for touchend for the element.

    Parameters

    @@ -881,8 +843,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.untouchmove(handler)⚓➭

    -

    Removes event handler for touchmove for the element. +

     Element.untouchmove(handler)⚓➭

    +

    Removes event handler for touchmove for the element.

    Parameters

    @@ -891,8 +853,8 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Element.untouchstart(handler)⚓➭

    -

    Removes event handler for touchstart for the element. +

     Element.untouchstart(handler)⚓➭

    +

    Removes event handler for touchstart for the element.

    Parameters

    @@ -901,9 +863,9 @@ console.log(el.transform());
    handler for the event

    Returns: object Element

    -

     Matrix⚓

    -

     Matrix.add(a, b, c, d, e, f, matrix)⚓➭

    -

    Adds given matrix to existing one. +

     Matrix⚓

    +

     Matrix.add(a, b, c, d, e, f, matrix)⚓➭

    +

    Adds given matrix to existing one.

    Parameters

    @@ -929,16 +891,16 @@ console.log(el.transform());
    object
    Matrix
    -

     Matrix.clone()⚓➭

    -

    Returns copy of the matrix +

     Matrix.clone()⚓➭

    +

    Returns copy of the matrix

    Returns: object Matrix

    -

     Matrix.invert()⚓➭

    -

    Returns inverted version of the matrix +

     Matrix.invert()⚓➭

    +

    Returns inverted version of the matrix

    Returns: object Matrix

    -

     Matrix.rotate(a, x, y)⚓➭

    -

    Rotates the matrix +

     Matrix.rotate(a, x, y)⚓➭

    +

    Rotates the matrix

    Parameters

    @@ -952,8 +914,8 @@ console.log(el.transform());
    number
     
    -

     Matrix.scale(x, [y], [cx], [cy])⚓➭

    -

    Scales the matrix +

     Matrix.scale(x, [y], [cx], [cy])⚓➭

    +

    Scales the matrix

    Parameters

    @@ -973,8 +935,8 @@ console.log(el.transform());
    number
     
    -

     Matrix.split()⚓➭

    -

    Splits matrix into primitive transformations +

     Matrix.split()⚓➭

    +

    Splits matrix into primitive transformations

    Returns: object in format:

    1. dxnumbertranslation by x @@ -985,12 +947,12 @@ console.log(el.transform());
    2. rotatenumberrotation in deg
    3. isSimplebooleancould it be represented via simple transformations
    -

     Matrix.toTransformString()⚓➭

    -

    Return transform string that represents given matrix +

     Matrix.toTransformString()⚓➭

    +

    Return transform string that represents given matrix

    Returns: string transform string

    -

     Matrix.translate(x, y)⚓➭

    -

    Translate the matrix +

     Matrix.translate(x, y)⚓➭

    +

    Translate the matrix

    Parameters

    @@ -1001,8 +963,8 @@ console.log(el.transform());
    number
     
    -

     Matrix.x(x, y)⚓➭

    -

    Return x coordinate for given point after transformation described by the matrix. See also Matrix.y +

     Matrix.x(x, y)⚓➭

    +

    Return x coordinate for given point after transformation described by the matrix. See also Matrix.y

    Parameters

    @@ -1014,8 +976,8 @@ console.log(el.transform());
     

    Returns: number x

    -

     Matrix.y(x, y)⚓➭

    -

    Return y coordinate for given point after transformation described by the matrix. See also Matrix.x +

     Matrix.y(x, y)⚓➭

    +

    Return y coordinate for given point after transformation described by the matrix. See also Matrix.x

    Parameters

    @@ -1027,12 +989,12 @@ console.log(el.transform());
     

    Returns: number y

    -

     Paper⚓

    -

     Paper.bottom⚓➭

    -

    Points to the bottom element on the paper +

     Paper⚓

    +

     Paper.bottom⚓➭

    +

    Points to the bottom element on the paper

    -

     Paper.circle(x, y, r)⚓➭

    -

    Draws a circle. +

     Paper.circle(x, y, r)⚓➭

    +

    Draws a circle.

    Parameters

    @@ -1051,11 +1013,11 @@ console.log(el.transform()); 

    var c = paper.circle(50, 50, 40);
    -

     Paper.clear()⚓➭

    -

    Clears the paper, i.e. removes all the elements. +

     Paper.clear()⚓➭

    +

    Clears the paper, i.e. removes all the elements.

    -

     Paper.customAttributes⚓➭

    -
    object

    If you have a set of attributes that you would like to represent +

     Paper.customAttributes⚓➭

    +
    object

    If you have a set of attributes that you would like to represent as a function of some number you can do it easily with custom attributes:

    Usage @@ -1079,8 +1041,8 @@ paper.customAttributes.hsb = function (h, s, b) { c.attr({hsb: ".5 .8 1"}); c.animate({hsb: "1 0 .5"}, 1e3); -

     Paper.ellipse(x, y, rx, ry)⚓➭

    -

    Draws an ellipse. +

     Paper.ellipse(x, y, rx, ry)⚓➭

    +

    Draws an ellipse.

    Parameters

    @@ -1102,8 +1064,8 @@ c.animate({hsb: "1 0 
    var c = paper.ellipse(50, 50, 40, 20);
    -

     Paper.forEach(callback, thisArg)⚓➭

    -

    Executes given function for each element on the paper +

     Paper.forEach(callback, thisArg)⚓➭

    +

    Executes given function for each element on the paper

    If callback function returns false it will stop loop running.

    @@ -1117,8 +1079,8 @@ c.animate({hsb: "1 0 context object for the callback

    Returns: object Paper object

    -

     Paper.getById(id)⚓➭

    -

    Returns you element by its internal ID. +

     Paper.getById(id)⚓➭

    +

    Returns you element by its internal ID.

    Parameters

    @@ -1127,8 +1089,8 @@ c.animate({hsb: "1 0 id

    Returns: object Raphaël element object

    -

     Paper.getElementByPoint(x, y)⚓➭

    -

    Returns you topmost element under given point. +

     Paper.getElementByPoint(x, y)⚓➭

    +

    Returns you topmost element under given point.

    Returns: object Raphaël element object

    Parameters @@ -1144,8 +1106,8 @@ c.animate({hsb: "1 0 

    paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
    -

     Paper.getFont(family, [weight], [style], [stretch])⚓➭

    -

    Finds font object in the registered fonts by given parameters. You could specify only one word from the font name, like “Myriad” for “Myriad Pro”. +

     Paper.getFont(family, [weight], [style], [stretch])⚓➭

    +

    Finds font object in the registered fonts by given parameters. You could specify only one word from the font name, like “Myriad” for “Myriad Pro”.

    Parameters

    @@ -1170,8 +1132,8 @@ c.animate({hsb: "1 0 
    paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
    -

     Paper.image(src, x, y, width, height)⚓➭

    -

    Embeds an image into the surface. +

     Paper.image(src, x, y, width, height)⚓➭

    +

    Embeds an image into the surface.

    Parameters

    @@ -1196,25 +1158,46 @@ c.animate({hsb: "1 0 
    var c = paper.image("apple.png", 10, 10, 80, 80);
    -

     Paper.path(pathString)⚓➭

    -

    Creates a path element by given path data string. +

     Paper.path([pathString])⚓➭

    +

    Creates a path element by given path data string.

    Parameters

    -
    pathString
    +
    pathString
    +
    optional
    string
    -
    path data in SVG path string format.
    +
    path string in SVG format.
    -

    Returns: object Raphaël element object with type “path”

    -Details of a path's data attribute's format are described in the SVG specification. +

    Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example: +

    +
    "M10,20L30,40"
+
    +

    Here we can see two commands: “M”, with arguments (10, 20) and “L” with arguments (30, 40). Upper case letter mean command is absolute, lower case—relative. +

    +

    +

    Here is short list of commands available, for more details see SVG path string format.

    + + + + + + + + + + + +
    CommandNameParameters
    Mmoveto(x y)+
    Zclosepath(none)
    Llineto(x y)+
    Hhorizontal linetox+
    Vvertical linetoy+
    Ccurveto(x1 y1 x2 y2 x y)+
    Ssmooth curveto(x2 y2 x y)+
    Qquadratic Bézier curveto(x1 y1 x y)+
    Tsmooth quadratic Bézier curveto(x y)+
    Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
    RCatmull-Rom curveto*x1 y1 (x y)+
    +

    * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier. +

    Usage 

    var c = paper.path("M10 10L90 90");
 // draw a diagonal line:
 // move to 10,10, line to 90,90
    -

     Paper.print(x, y, text, font, [size], [origin], [letter_spacing])⚓➭

    -

    Creates set of shapes to represent given font at given position with given size. +

     Paper.print(x, y, text, font, [size], [origin], [letter_spacing])⚓➭

    +

    Creates set of shapes to represent given font at given position with given size. Result of the method is set object (see Paper.set) which contains each letter as separate path object.

    Parameters @@ -1251,11 +1234,11 @@ Result of the method is set object (see Pap // following line will paint first letter in red txt[0].attr({fill: "#f00"}); -

     Paper.raphael⚓➭

    -

    Points to the Raphael object/function +

     Paper.raphael⚓➭

    +

    Points to the Raphael object/function

    -

     Paper.rect(x, y, width, height, [r])⚓➭

    -

    +

     Paper.rect(x, y, width, height, [r])⚓➭

    +

    Draws a rectangle.

    Parameters @@ -1285,21 +1268,21 @@ txt[0].attr({fill: "#f00"}); // rectangle with rounded corners var c = paper.rect(40, 40, 50, 50, 10); -

     Paper.remove()⚓➭

    -

    Removes the paper from the DOM. +

     Paper.remove()⚓➭

    +

    Removes the paper from the DOM.

    -

     Paper.renderfix()⚓➭

    -

    Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant +

     Paper.renderfix()⚓➭

    +

    Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant on other elements after reflow it could shift half pixel which cause for lines to lost their crispness. This method fixes the issue.

    -

     Paper.safari()⚓➭

    -

    There is an inconvenient rendering bug in Safari (WebKit): +

     Paper.safari()⚓➭

    +

    There is an inconvenient rendering bug in Safari (WebKit): sometimes the rendering should be forced. This method should help with dealing with this bug.

    -

     Paper.set()⚓➭

    -

    Creates array-like object to keep and operate several elements at once. +

     Paper.set()⚓➭

    +

    Creates array-like object to keep and operate several elements at once. Warning: it doesn’t create any elements for itself in the page, it just groups existing elements. Sets act as pseudo elements — all methods available to an element can be used on a set.

    @@ -1313,12 +1296,12 @@ st.push( ); st.attr({fill: "red"}); // changes the fill of both circles -

     Paper.setFinish()⚓➭

    -

    See Paper.setStart. This method finishes catching and returns resulting set. +

     Paper.setFinish()⚓➭

    +

    See Paper.setStart. This method finishes catching and returns resulting set.

    Returns: object set

    -

     Paper.setSize(width, height)⚓➭

    -

    If you need to change dimensions of the canvas call this method +

     Paper.setSize(width, height)⚓➭

    +

    If you need to change dimensions of the canvas call this method

    Parameters

    @@ -1338,8 +1321,8 @@ st.push( ); st.attr({fill: "red"}); -

     Paper.setStart()⚓➭

    -

    Creates Paper.set. All elements that will be created after calling this method and before calling +

     Paper.setStart()⚓➭

    +

    Creates Paper.set. All elements that will be created after calling this method and before calling Paper.setFinish will be added to the set.

    Usage @@ -1350,8 +1333,8 @@ paper.circle(30, 10, = paper.setFinish(); st.attr({fill: "red"}); // changes the fill of both circles -

     Paper.setViewBox(x, y, w, h, fit)⚓➭

    -

    Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by +

     Paper.setViewBox(x, y, w, h, fit)⚓➭

    +

    Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by specifying new boundaries.

    Parameters @@ -1372,8 +1355,8 @@ specifying new boundaries.

    boolean
    true if you want graphics to fit into new boundary box
    -

     Paper.text(x, y, text)⚓➭

    -

    Draws a text string. If you need line breaks, put “\n” in the string. +

     Paper.text(x, y, text)⚓➭

    +

    Draws a text string. If you need line breaks, put “\n” in the string.

    Parameters

    @@ -1392,11 +1375,11 @@ specifying new boundaries. 

    var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
    -

     Paper.top⚓➭

    -

    Points to the topmost element on the paper +

     Paper.top⚓➭

    +

    Points to the topmost element on the paper

    -

     Raphael(…)⚓➭

    -

    Creates a canvas object on which to draw. +

     Raphael(…)⚓➭

    +

    Creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.

    @@ -1478,8 +1461,8 @@ from this instance will be bound to this canvas. text: "Dump" }]); -

     Raphael.angle(x1, y1, x2, y2, [x3], [y3])⚓➭

    -

    Returns angle between two or three points +

     Raphael.angle(x1, y1, x2, y2, [x3], [y3])⚓➭

    +

    Returns angle between two or three points

    Parameters

    @@ -1505,8 +1488,8 @@ from this instance will be bound to this canvas.
    y coord of third point

    Returns: number angle in degrees.

    -

     Raphael.animation(params, ms, [easing], [callback])⚓➭

    -

    Creates an animation object that can be passed to the Element.animate or Element.animateWith methods. +

     Raphael.animation(params, ms, [easing], [callback])⚓➭

    +

    Creates an animation object that can be passed to the Element.animate or Element.animateWith methods. See also Animation.delay and Animation.repeat methods.

    Parameters @@ -1527,8 +1510,8 @@ See also Animation.delay and callback function. Will be called at the end of animation.

    Returns: object Animation

    -

     Raphael.color(clr)⚓➭

    -

    Parses the color string and returns object with all values for the given color. +

     Raphael.color(clr)⚓➭

    +

    Parses the color string and returns object with all values for the given color.

    Parameters

    @@ -1547,8 +1530,8 @@ See also Animation.delay and vnumbervalue (brightness),
  • lnumberlightness
  • }
    • -

     Raphael.deg(deg)⚓➭

    -

    Transform angle to degrees +

     Raphael.deg(deg)⚓➭

    +

    Transform angle to degrees

    Parameters

    @@ -1557,8 +1540,8 @@ See also Animation.delay and angle in radians

    Returns: number angle in degrees.

    -

     Raphael.easing_formulas⚓➭

    -

    Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing: +

     Raphael.easing_formulas⚓➭

    +

    Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:

    See also Easing demo.

    -

     Raphael.el⚓➭

    -
    object

    You can add your own method to elements. This is usefull when you want to hack default functionality or +

     Raphael.el⚓➭

    +
    object

    You can add your own method to elements. This is usefull when you want to hack default functionality or want to wrap some common transformation or attributes in one method. In difference to canvas methods, you can redefine element method at any time. Expending element methods wouldn’t affect set.

    @@ -1584,8 +1567,8 @@ you can redefine element method at any time. Expending element methods wouldn’ // then use it paper.circle(100, 100, 20).red(); -

     Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭

    -

    Utility method +

     Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭

    +

    Utility method Find dot coordinates on the given cubic bezier curve at the given t.

    Parameters @@ -1631,8 +1614,8 @@ Find dot coordinates on the given cubic bezier curve at the given t.

  • y:numbery coordinate of the end of the curve
  • }
  • alpha:numberangle of the curve derivative at the point
  • }
    • -

     Raphael.fn⚓➭

    -
    object

    You can add your own method to the canvas. For example if you want to draw a pie chart, +

     Raphael.fn⚓➭

    +
    object

    You can add your own method to the canvas. For example if you want to draw a pie chart, you can create your own pie chart function and ship it as a Raphaël plugin. To do this you need to extend the Raphael.fn object. Please note that you can create your own namespaces inside the fn object — methods will be run in the context of canvas anyway. You should alter @@ -1655,8 +1638,8 @@ paper.arrow(10, 10,

     Raphael.format(token, …)⚓➭

    -

    Simple format function. Replaces construction of type “{<number>}” to the corresponding argument. +

     Raphael.format(token, …)⚓➭

    +

    Simple format function. Replaces construction of type “{<number>}” to the corresponding argument.

    Parameters

    @@ -1677,8 +1660,8 @@ paper.mystuff.star(); // this will draw a rectangular shape equivalent to "M10,20h40v50h-40z" paper.path(Raphael.format("M{1},{2}h{3}v{4}h{5}z", x, y, width, height, -width)); -

     Raphael.fullfill(token, json)⚓➭

    -

    A little bit more advanced format function than Raphael.format. Replaces construction of type “{<name>}” to the corresponding argument. +

     Raphael.fullfill(token, json)⚓➭

    +

    A little bit more advanced format function than Raphael.format. Replaces construction of type “{<name>}” to the corresponding argument.

    Parameters

    @@ -1703,8 +1686,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w } })); -

     Raphael.getColor([value])⚓➭

    -

    On each call returns next colour in the spectrum. To reset it back to red call Raphael.getColor.reset +

     Raphael.getColor([value])⚓➭

    +

    On each call returns next colour in the spectrum. To reset it back to red call Raphael.getColor.reset

    Parameters

    @@ -1714,11 +1697,11 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
    brightness, default is 0.75

    Returns: string hex representation of the colour.

    -

     Raphael.getColor.reset()⚓➭

    -

    Resets spectrum position for Raphael.getColor back to red. +

     Raphael.getColor.reset()⚓➭

    +

    Resets spectrum position for Raphael.getColor back to red.

    -

     Raphael.getPointAtLength(path, length)⚓➭

    -

    Return coordinates of the point located at the given length on the given path. +

     Raphael.getPointAtLength(path, length)⚓➭

    +

    Return coordinates of the point located at the given length on the given path.

    Parameters

    @@ -1734,8 +1717,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
  • y:numbery coordinate
  • alpha:numberangle of derivative
  • }
    • -

     Raphael.getRGB(colour)⚓➭

    -

    Parses colour string as RGB object +

     Raphael.getRGB(colour)⚓➭

    +

    Parses colour string as RGB object

    Parameters

    @@ -1761,8 +1744,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
  • hexstringcolor in HTML/CSS format: #••••••,
  • errorbooleantrue if string can’t be parsed
  • }
    • -

     Raphael.getSubpath(path, from, to)⚓➭

    -

    Return subpath of a given path from given length to given length. +

     Raphael.getSubpath(path, from, to)⚓➭

    +

    Return subpath of a given path from given length to given length.

    Parameters

    @@ -1777,8 +1760,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
    position of the end of the segment

    Returns: string pathstring for the segment

    -

     Raphael.getTotalLength(path)⚓➭

    -

    Returns length of the given path in pixels. +

     Raphael.getTotalLength(path)⚓➭

    +

    Returns length of the given path in pixels.

    Parameters

    @@ -1787,8 +1770,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
    SVG path string.

    Returns: number length.

    -

     Raphael.hsb(h, s, b)⚓➭

    -

    Converts HSB values to hex representation of the colour. +

     Raphael.hsb(h, s, b)⚓➭

    +

    Converts HSB values to hex representation of the colour.

    Parameters

    @@ -1803,8 +1786,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
    value or brightness

    Returns: string hex representation of the colour.

    -

     Raphael.hsb2rgb(h, s, v)⚓➭

    -

    Converts HSB values to RGB object. +

     Raphael.hsb2rgb(h, s, v)⚓➭

    +

    Converts HSB values to RGB object.

    Parameters

    @@ -1824,8 +1807,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
  • bnumberblue,
  • hexstringcolor in HTML/CSS format: #••••••
  • }
    • -

     Raphael.hsl(h, s, l)⚓➭

    -

    Converts HSL values to hex representation of the colour. +

     Raphael.hsl(h, s, l)⚓➭

    +

    Converts HSL values to hex representation of the colour.

    Parameters

    @@ -1840,8 +1823,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
    luminosity

    Returns: string hex representation of the colour.

    -

     Raphael.hsl2rgb(h, s, l)⚓➭

    -

    Converts HSL values to RGB object. +

     Raphael.hsl2rgb(h, s, l)⚓➭

    +

    Converts HSL values to RGB object.

    Parameters

    @@ -1861,8 +1844,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
  • bnumberblue,
  • hexstringcolor in HTML/CSS format: #••••••
  • }
    • -

     Raphael.is(o, type)⚓➭

    -

    Handfull replacement for typeof operator. +

     Raphael.is(o, type)⚓➭

    +

    Handfull replacement for typeof operator.

    Parameters

    @@ -1874,8 +1857,8 @@ paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative w
    name of the type, i.e. “string”, “function”, “number”, etc.

    Returns: boolean is given value is of given type

    -

     Raphael.matrix(a, b, c, d, e, f)⚓➭

    -

    Utility method +

     Raphael.matrix(a, b, c, d, e, f)⚓➭

    +

    Utility method Returns matrix based on given parameters.

    Parameters @@ -1900,8 +1883,8 @@ Returns matrix based on given parameters.

     

    Returns: object Matrix

    -

     Raphael.ninja()⚓➭

    -

    If you want to leave no trace of Raphaël (Well, Raphaël creates only one global variable Raphael, but anyway.) You can use ninja method. +

     Raphael.ninja()⚓➭

    +

    If you want to leave no trace of Raphaël (Well, Raphaël creates only one global variable Raphael, but anyway.) You can use ninja method. Beware, that in this case plugins could stop working, because they are depending on global variable existance.

    Returns: object Raphael object

    @@ -1912,8 +1895,8 @@ Beware, that in this case plugins could stop working, because they are depending … })(Raphael.ninja()); -

     Raphael.parsePathString(pathString)⚓➭

    -

    Utility method +

     Raphael.parsePathString(pathString)⚓➭

    +

    Utility method Parses given path string into an array of arrays of path segments.

    Parameters @@ -1923,8 +1906,8 @@ Parses given path string into an array of arrays of path segments.

    path string or array of segments (in the last case it will be returned straight away)

    Returns: array array of segments.

    -

     Raphael.parseTransformString(TString)⚓➭

    -

    Utility method +

     Raphael.parseTransformString(TString)⚓➭

    +

    Utility method Parses given path string into an array of transformations.

    Parameters @@ -1934,8 +1917,8 @@ Parses given path string into an array of transformations.

    transform string or array of transformations (in the last case it will be returned straight away)

    Returns: array array of transformations.

    -

     Raphael.path2curve(pathString)⚓➭

    -

    Utility method +

     Raphael.path2curve(pathString)⚓➭

    +

    Utility method Converts path to a new path where all segments are cubic bezier curves.

    Parameters @@ -1945,8 +1928,8 @@ Converts path to a new path where all segments are cubic bezier curves.

    path string or array of segments

    Returns: array array of segments.

    -

     Raphael.pathToRelative(pathString)⚓➭

    -

    Utility method +

     Raphael.pathToRelative(pathString)⚓➭

    +

    Utility method Converts path to relative form

    Parameters @@ -1956,8 +1939,8 @@ Converts path to relative form

    path string or array of segments

    Returns: array array of segments.

    -

     Raphael.rad(deg)⚓➭

    -

    Transform angle to radians +

     Raphael.rad(deg)⚓➭

    +

    Transform angle to radians

    Parameters

    @@ -1966,8 +1949,8 @@ Converts path to relative form
    angle in degrees

    Returns: number angle in radians.

    -

     Raphael.registerFont(font)⚓➭

    -

    Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file. +

     Raphael.registerFont(font)⚓➭

    +

    Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file. Returns original parameter, so it could be used with chaining.

    More about Cufón and how to convert your font form TTF, OTF, etc to JavaScript file. @@ -1982,8 +1965,8 @@ Returns original parameter, so it could be used with chaining. 

    Cufon.registerFont(Raphael.registerFont({…}));
    -

     Raphael.rgb(r, g, b)⚓➭

    -

    Converts RGB values to hex representation of the colour. +

     Raphael.rgb(r, g, b)⚓➭

    +

    Converts RGB values to hex representation of the colour.

    Parameters

    @@ -1998,8 +1981,8 @@ Returns original parameter, so it could be used with chaining.
    blue

    Returns: string hex representation of the colour.

    -

     Raphael.rgb2hsb(r, g, b)⚓➭

    -

    Converts RGB values to HSB object. +

     Raphael.rgb2hsb(r, g, b)⚓➭

    +

    Converts RGB values to HSB object.

    Parameters

    @@ -2018,8 +2001,8 @@ Returns original parameter, so it could be used with chaining.
  • snumbersaturation
  • bnumberbrightness
  • }
    • -

     Raphael.rgb2hsl(r, g, b)⚓➭

    -

    Converts RGB values to HSL object. +

     Raphael.rgb2hsl(r, g, b)⚓➭

    +

    Converts RGB values to HSL object.

    Parameters

    @@ -2038,8 +2021,8 @@ Returns original parameter, so it could be used with chaining.
  • snumbersaturation
  • lnumberluminosity
  • }
    • -

     Raphael.setWindow(newwin)⚓➭

    -

    Used when you need to draw in <iframe>. Switched window to the iframe one. +

     Raphael.setWindow(newwin)⚓➭

    +

    Used when you need to draw in <iframe>. Switched window to the iframe one.

    Parameters

    @@ -2047,8 +2030,8 @@ Returns original parameter, so it could be used with chaining.
    window
    new window object
    -

     Raphael.snapTo(values, value, [tolerance])⚓➭

    -

    Snaps given value to given grid. +

     Raphael.snapTo(values, value, [tolerance])⚓➭

    +

    Snaps given value to given grid.

    Parameters

    @@ -2064,8 +2047,8 @@ Returns original parameter, so it could be used with chaining.
    tolerance for snapping. Default is 10.

    Returns: number adjusted value.

    -

     Raphael.st⚓➭

    -
    object

    You can add your own method to elements and sets. It is wise to add a set method for each element method +

     Raphael.st⚓➭

    +
    object

    You can add your own method to elements and sets. It is wise to add a set method for each element method you added, so you will be able to call the same method on sets too. See also Raphael.el.

    @@ -2082,21 +2065,21 @@ Raphael.st.red = function () { // then use it paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red(); -

     Raphael.svg⚓➭

    -
    boolean

    true if browser supports SVG. +

     Raphael.svg⚓➭

    +
    boolean

    true if browser supports SVG.

    -

     Raphael.type⚓➭

    -
    string

    Can be “SVG”, “VML” or empty, depending on browser support. +

     Raphael.type⚓➭

    +
    string

    Can be “SVG”, “VML” or empty, depending on browser support.

    -

     Raphael.vml⚓➭

    -
    boolean

    true if browser supports VML. +

     Raphael.vml⚓➭

    +
    boolean

    true if browser supports VML.

    -

     Set⚓

    -

     Set.clear()⚓➭

    -

    Removeds all elements from the set +

     Set⚓

    +

     Set.clear()⚓➭

    +

    Removeds all elements from the set

    -

     Set.exclude(element)⚓➭

    -

    Removes given element from the set +

     Set.exclude(element)⚓➭

    +

    Removes given element from the set

    Parameters

    @@ -2105,8 +2088,8 @@ paper.set(paper.circle(100, 100, <
    element to remove

    Returns: boolean true if object was found & removed from the set

    -

     Set.forEach(callback, thisArg)⚓➭

    -

    Executes given function for each element in the set. +

     Set.forEach(callback, thisArg)⚓➭

    +

    Executes given function for each element in the set.

    If function returns false it will stop loop running.

    @@ -2120,16 +2103,16 @@ paper.set(paper.circle(100, 100, <
    context object for the callback

    Returns: object Set object

    -

     Set.pop()⚓➭

    -

    Removes last element and returns it. +

     Set.pop()⚓➭

    +

    Removes last element and returns it.

    Returns: object element

    -

     Set.push()⚓➭

    -

    Adds each argument to the current set. +

     Set.push()⚓➭

    +

    Adds each argument to the current set.

    Returns: object original element

    -

     Set.splice(index, count, [insertion…])⚓➭

    -

    Removes given element from the set +

     Set.splice(index, count, [insertion…])⚓➭

    +

    Removes given element from the set

    Parameters

    @@ -2145,8 +2128,8 @@ paper.set(paper.circle(100, 100, <
    elements to insert

    Returns: object set elements that were deleted

    -

     eve(name, scope, varargs)⚓➭

    -

    Fires event with given name, given scope and other parameters. +

     eve(name, scope, varargs)⚓➭

    +

    Fires event with given name, given scope and other parameters.

    Arguments

    @@ -2161,8 +2144,8 @@ paper.set(paper.circle(100, 100, <
    the rest of arguments will be sent to event handlers

    Returns: object array of returned values from the listeners

    -

     eve.listeners(name)⚓➭

    -

    Internal method which gives you array of all event handlers that will be triggered by the given name. +

     eve.listeners(name)⚓➭

    +

    Internal method which gives you array of all event handlers that will be triggered by the given name.

    Arguments

    @@ -2171,8 +2154,8 @@ paper.set(paper.circle(100, 100, <
    name of the event, dot (.) or slash (/) separated

    Returns: array array of event handlers

    -

     eve.nt([subname])⚓➭

    -

    Could be used inside event handler to figure out actual name of the event. +

     eve.nt([subname])⚓➭

    +

    Could be used inside event handler to figure out actual name of the event.

    Arguments

    @@ -2185,8 +2168,8 @@ paper.set(paper.circle(100, 100, <

    or

    Returns: boolean true, if current event’s name contains subname

    -

     eve.on(name, f)⚓➭

    -

    Binds given event handler with a given name. You can use wildcards “*” for the names: +

     eve.on(name, f)⚓➭

    +

    Binds given event handler with a given name. You can use wildcards “*” for the names: 

    eve.on("*.under.*", f);
 eve("mouse.under.floor"); // triggers f
@@ -2213,11 +2196,11 @@ eve.on("mouse", catch)(1);
 If you want to put you hadler before not indexed handlers specify negative value.
 Note: I assume most of the time you don’t need to worry about z-index, but it’s nice to have this feature “just in case”.
 
    
-

     eve.stop()⚓➭

    -

    Is used inside event handler to stop event +

     eve.stop()⚓➭

    +

    Is used inside event handler to stop event

    -

     eve.unbind(name, f)⚓➭

    -

    Removes given function from the list of event listeners assigned to given name. +

     eve.unbind(name, f)⚓➭

    +

    Removes given function from the list of event listeners assigned to given name.

    Arguments

    @@ -2228,7 +2211,10 @@ Note: I assume most of the time you don’t need to worry about z-index, but it
    function
    event handler function
    -

     eve.version⚓➭

    -
    string

    Current version of the library. +

     eve.version⚓➭

    +
    string

    Current version of the library.

    -
    \ No newline at end of file +
    + + + \ No newline at end of file diff --git a/reference.js b/reference.js new file mode 100644 index 0000000..51757bf --- /dev/null +++ b/reference.js @@ -0,0 +1,248 @@ +Raphael(function () { + + // TOC + (function (ol) { + if (!ol) { + return; + } + var li = document.createElement("li"), + isABBR = function (str, abbr) { + var letters = abbr.toUpperCase().split(""), + first = letters.shift(), + rg = new RegExp("^[" + first.toLowerCase() + first + "][a-z]*" + letters.join("[a-z]*") + "[a-z]*$"); + return !!String(str).match(rg); + }, + score = function (me, search) { + me = String(me); + search = String(search); + var score = 0, + chunk; + if (me == search) { + return 1; + } + if (!me || !search) { + return 0; + } + if (isABBR(me, search)) { + return .9; + } + score = 0; + chunk = me.toLowerCase(); + for (var j, i = 0, ii = search.length; i < ii; i++) { + j = chunk.indexOf(search.charAt(i)); + if (~j) { + chunk = chunk.substring(j + 1); + score += 1 / (j + 1); + } + } + score = Math.max(score / ii - Math.abs(me.length - ii) / me.length / 2, 0); + return score; + }; + li.innerHTML = ''; + var lis = ol.getElementsByTagName("span"), + names = [], + rgName = /[^\.\(]*(?=(\(\))?$)/; + for (var i = 0, ii = lis.length; i < ii; i++) { + names[i] = { + li: lis[i].parentNode.parentNode, + text: lis[i].innerHTML.match(rgName)[0] + }; + } + ol.insertBefore(li, ol.firstChild); + var input = document.getElementById("dr-filter"); + input.style.width = "100%"; + input.style.marginTop = "10px"; + input.onclick = input.onchange = input.onkeydown = input.onkeyup = function () { + var v = input.value, + res = []; + if (v.length > 1) { + for (var i = 0, ii = names.length; i < ii; i++) { + res[i] = { + li: names[i].li, + weight: score(names[i].text, v) + }; + } + res.sort(function (a, b) { + return b.weight - a.weight; + }); + for (i = 0, ii = res.length; i < ii; i++) { + ol.appendChild(res[i].li); + } + } else { + for (i = 0, ii = names.length; i < ii; i++) { + ol.appendChild(names[i].li); + } + } + }; + })(document.getElementById("dr-toc")); + + function prepare(id) { + var div = document.getElementById(id); + div.style.cssText = "float:right;padding:10px;width:99px;height:99px;background:#2C53B0 url(http://raphaeljs.com/blueprint-min.png) no-repeat"; + return Raphael(div, 99, 99); + } + + var line = { + stroke: "#fff", + "stroke-width": 2, + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + dots = { + stroke: "#fff", + "stroke-width": 2, + "stroke-dasharray": "- ", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + fill = { + stroke: "#fff", + fill: "#fff", + "fill-opacity": .5, + "stroke-width": 2, + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + none = { + fill: "#000", + opacity: 0 + }; + prepare("Paper.path-extra").path("M10,10R90,50 10,90").attr(line); + + (function (r) { + var there; + r.circle(15, 15, 10).attr(fill).click(function () { + var clr = Raphael.hsb(Math.random(), .6, 1); + this.animate(there ? { + cx: 15, + cy: 15, + r: 10, + stroke: "#fff", + fill: "#fff" + } : { + cx: 80, + cy: 80, + r: 15, + stroke: clr, + fill: clr + }, 600, ["bounce", "<>", "elastic", ""][Math.round(Math.random() * 3)]); + there = !there; + }); + })(prepare("Element.animate-extra")); + + (function (r) { + var x, y; + r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) { + this.attr({ + cx: Math.min(Math.max(x + dx, 15), 85), + cy: Math.min(Math.max(y + dy, 15), 85) + }); + }, function () { + x = this.attr("cx"); + y = this.attr("cy"); + }); + + })(prepare("Element.drag-extra")); + + (function (r) { + var e = r.ellipse(50, 50, 40, 30).attr(fill).click(function () { + this.animate({ + transform: "r180" + }, 1000, function () { + this.attr({ + transform: "" + }); + }); + }), + bb = r.rect().attr(e.getBBox()).attr(dots); + eve.on("anim.frame." + e.id, function (anim) { + bb.attr(e.getBBox()); + }); + })(prepare("Element.getBBox-extra")); + + (function (r) { + var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line), + l = e.getTotalLength(), + to = 1; + r.customAttributes.along = function (a) { + var p = e.getPointAtLength(a * l); + return { + transform: "t" + [p.x, p.y] + "r" + p.alpha + }; + }; + var c = r.ellipse(0, 0, 5, 2).attr({ + along: 0 + }).attr(line); + r.rect(0, 0, 100, 100).attr(none).click(function () { + c.stop().animate({ + along: to + }, 5000); + to = +!to; + }); + })(prepare("Element.getPointAtLength-extra")); + + (function (r) { + var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line), + l = e.getTotalLength() - 10, + to = 1; + r.customAttributes.along = function (a) { + return { + path: e.getSubpath(a * l, a * l + 11) + }; + }; + var c = r.path().attr(line).attr({ + along: 0, + stroke: "#f00", + "stroke-width": 3 + }); + r.rect(0, 0, 100, 100).attr(none).click(function () { + c.stop().animate({ + along: to + }, 5000); + to = +!to; + }); + })(prepare("Element.getSubpath-extra")); + + (function (r) { + r.circle(50, 50, 40).attr(line).glow({color: "#fff"}); + })(prepare("Element.glow-extra")); + + (function (r) { + r.rect(10, 10, 40, 30).attr(dots); + r.rect(10, 10, 40, 30).attr(line).transform("r-30, 50, 10t10, 20s1.5"); + r.text(50, 90, "r-30, 50, 10\nt10, 20s1.5").attr({fill: "#fff"}); + })(prepare("Element.transform-extra")); + + (function (r) { + r.circle(50, 50, 40).attr(line); + })(prepare("Paper.circle-extra")); + + (function (r) { + r.ellipse(50, 50, 40, 30).attr(line); + })(prepare("Paper.ellipse-extra")); + + (function (r) { + r.rect(10, 10, 50, 50).attr(line); + r.rect(40, 40, 50, 50, 10).attr(line); + })(prepare("Paper.rect-extra")); + + (function (r) { + var set = r.set( + r.rect(10, 10, 50, 50).attr(fill), + r.rect(40, 40, 50, 50, 10).attr(fill) + ).hover(function () { + set.stop().animate({stroke: "#f00"}, 600, "<>"); + }, function () { + set.stop().animate({stroke: "#fff"}, 600, "<>"); + }); + })(prepare("Paper.set-extra")); + + (function (r) { + r.text(50, 50, "Raphaël\nkicks\nbutt!").attr({ + fill: "#fff", + font: "italic 20px Georgia", + transform: "r-10" + }); + })(prepare("Paper.text-extra")); + +}); \ No newline at end of file -- 2.39.2