Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #5 from louisremi/rotateOption

Add rotate option + lint the code + update demos and Readme
  • Loading branch information...
commit ac524032e3c43fffc9f74053e3bca9d303419d92 2 parents 37ccab5 + 65c0117
@weepy authored
Showing with 86 additions and 72 deletions.
  1. +86 −72 jquery.path.js
View
158 jquery.path.js
@@ -14,88 +14,102 @@
;(function($){
- $.path = {}
-
+ $.path = {};
var V = {
rotate: function(p, degrees) {
- var radians = degrees * 3.141592654 / 180
- var c = Math.cos(radians), s = Math.sin(radians)
- return [c*p[0] - s*p[1], s*p[0] + c*p[1] ]
+ var radians = degrees * Math.PI / 180,
+ c = Math.cos(radians),
+ s = Math.sin(radians);
+ return [c*p[0] - s*p[1], s*p[0] + c*p[1]];
},
scale: function(p, n) {
- return [n*p[0], n*p[1]]
+ return [n*p[0], n*p[1]];
},
add: function(a, b) {
- return [a[0]+b[0], a[1]+b[1]]
+ return [a[0]+b[0], a[1]+b[1]];
},
minus: function(a, b) {
- return [a[0]-b[0], a[1]-b[1]]
+ return [a[0]-b[0], a[1]-b[1]];
+ }
+ };
+
+ $.path.bezier = function( params, rotate ) {
+ params.start = $.extend( {angle: 0, length: 0.3333}, params.start );
+ params.end = $.extend( {angle: 0, length: 0.3333}, params.end );
+
+ this.p1 = [params.start.x, params.start.y];
+ this.p4 = [params.end.x, params.end.y];
+
+ var v14 = V.minus( this.p4, this.p1 ),
+ v12 = V.scale( v14, params.start.length ),
+ v41 = V.scale( v14, -1 ),
+ v43 = V.scale( v41, params.end.length );
+
+ v12 = V.rotate( v12, params.start.angle );
+ this.p2 = V.add( this.p1, v12 );
+
+ v43 = V.rotate(v43, params.end.angle );
+ this.p3 = V.add( this.p4, v43 );
+
+ this.f1 = function(t) { return (t*t*t); };
+ this.f2 = function(t) { return (3*t*t*(1-t)); };
+ this.f3 = function(t) { return (3*t*(1-t)*(1-t)); };
+ this.f4 = function(t) { return ((1-t)*(1-t)*(1-t)); };
+
+ /* p from 0 to 1 */
+ this.css = function(p) {
+ var f1 = this.f1(p), f2 = this.f2(p), f3 = this.f3(p), f4=this.f4(p), css = {};
+ if (rotate) {
+ css.prevX = this.x;
+ css.prevY = this.y;
+ }
+ css.x = this.x = ( this.p1[0]*f1 + this.p2[0]*f2 +this.p3[0]*f3 + this.p4[0]*f4 +.5 )|0;
+ css.y = this.y = ( this.p1[1]*f1 + this.p2[1]*f2 +this.p3[1]*f3 + this.p4[1]*f4 +.5 )|0;
+ css.left = css.x + "px";
+ css.top = css.y + "px";
+ return css;
+ };
+ };
+
+ $.path.arc = function(params, rotate) {
+ for ( var i in params ) {
+ this[i] = params[i];
}
- }
-
- $.path.bezier = function( params ) {
- params.start = $.extend({angle: 0, length: 0.3333}, params.start )
- params.end = $.extend({angle: 0, length: 0.3333}, params.end )
-
- this.p1 = [params.start.x, params.start.y];
- this.p4 = [params.end.x, params.end.y];
-
- var v14 = V.minus(this.p4, this.p1)
- var v12 = V.scale(v14, params.start.length)
- v12 = V.rotate(v12, params.start.angle)
- this.p2 = V.add(this.p1, v12)
-
- var v41 = V.scale(v14, -1)
- var v43 = V.scale(v41, params.end.length)
- v43 = V.rotate(v43, params.end.angle)
- this.p3 = V.add(this.p4, v43)
-
- this.f1 = function(t) { return (t*t*t); }
- this.f2 = function(t) { return (3*t*t*(1-t)); }
- this.f3 = function(t) { return (3*t*(1-t)*(1-t)); }
- this.f4 = function(t) { return ((1-t)*(1-t)*(1-t)); }
-
- /* p from 0 to 1 */
- this.css = function(p) {
- var f1 = this.f1(p), f2 = this.f2(p), f3 = this.f3(p), f4=this.f4(p)
- var x = this.p1[0]*f1 + this.p2[0]*f2 +this.p3[0]*f3 + this.p4[0]*f4;
- var y = this.p1[1]*f1 + this.p2[1]*f2 +this.p3[1]*f3 + this.p4[1]*f4;
- return {top: y + "px", left: x + "px"}
- }
- }
-
- $.path.arc = function(params) {
- for(var i in params)
- this[i] = params[i]
-
- this.dir = this.dir || 1
-
- while(this.start > this.end && this.dir > 0)
- this.start -= 360
-
- while(this.start < this.end && this.dir < 0)
- this.start += 360
-
-
- this.css = function(p) {
- var a = this.start * (p ) + this.end * (1-(p ))
- a = a * 3.1415927 / 180 // to radians
-
- var x = Math.sin(a) * this.radius + this.center[0]
- var y = Math.cos(a) * this.radius + this.center[1]
- return {top: y + "px", left: x + "px"}
- }
-
- };
-
-
- $.fx.step.path = function(fx){
- var css = fx.end.css(1 - fx.pos)
- for(var i in css)
- fx.elem.style[i] = css[i];
- }
-})(jQuery);
+ this.dir = this.dir || 1;
+
+ while ( this.start > this.end && this.dir > 0 ) {
+ this.start -= 360;
+ }
+ while ( this.start < this.end && this.dir < 0 ) {
+ this.start += 360;
+ }
+
+ this.css = function(p) {
+ var a = ( this.start * (p ) + this.end * (1-(p )) ) * Math.PI / 180,
+ css = {};
+
+ if (rotate) {
+ css.prevX = this.x;
+ css.prevY = this.y;
+ }
+ css.x = this.x = ( Math.sin(a) * this.radius + this.center[0] +.5 )|0;
+ css.y = this.y = ( Math.cos(a) * this.radius + this.center[1] +.5 )|0;
+ css.left = css.x + "px";
+ css.top = css.y + "px";
+ return css;
+ };
+ };
+
+ $.fx.step.path = function(fx) {
+ var css = fx.end.css( 1 - fx.pos );
+ if ( css.prevX != null ) {
+ $.cssHooks.transform.set( fx.elem, "rotate(" + Math.atan2(css.prevY - css.y, css.prevX - css.x) + ")" );
+ }
+ fx.elem.style.top = css.top;
+ fx.elem.style.left = css.left;
+ };
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.