jquery.rotate0.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. // modified by mmikowski 20090803
  2. // * Added semicolons after function declarations;
  3. // their omission broke YUI compressor
  4. // * Converted to Unix style line endings
  5. // modified by mmikowski 20100114 for firefox 3.5 support
  6. // * See http://code.google.com/p/jquery-rotate/issues/detail?id=3#c2 comment 1
  7. // I had to rewrite this to resolve multiple rotations
  8. //
  9. jQuery.fn.rotate = function(angle,whence) {
  10. var fnRotate = function(canvas,rotation){
  11. var costheta = Math.cos(rotation);
  12. var sintheta = Math.sin(rotation);
  13. canvas.style.width
  14. = canvas.width
  15. = Math.abs(costheta*canvas.oImage.width)
  16. + Math.abs(sintheta*canvas.oImage.height)
  17. ;
  18. canvas.style.height
  19. = canvas.height
  20. = Math.abs(costheta*canvas.oImage.height)
  21. + Math.abs(sintheta*canvas.oImage.width)
  22. ;
  23. var context = canvas.getContext('2d');
  24. context.save();
  25. if (rotation <= Math.PI/2) {
  26. context.translate(sintheta*canvas.oImage.height,0);
  27. } else if (rotation <= Math.PI) {
  28. context.translate(canvas.width,-costheta*canvas.oImage.height);
  29. } else if (rotation <= 1.5*Math.PI) {
  30. context.translate(-costheta*canvas.oImage.width,canvas.height);
  31. } else {
  32. context.translate(0,-sintheta*canvas.oImage.width);
  33. }
  34. context.rotate(rotation);
  35. context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
  36. context.restore();
  37. };
  38. var p = this.get(0);
  39. // we store the angle inside the image tag for persistence
  40. if (!whence) {
  41. p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
  42. } else {
  43. p.angle = angle;
  44. }
  45. if (p.angle >= 0) {
  46. var rotation = Math.PI * p.angle / 180;
  47. } else {
  48. var rotation = Math.PI * (360+p.angle) / 180;
  49. }
  50. if (document.all && !window.opera) {
  51. var canvas = document.createElement('img');
  52. var costheta = Math.cos(rotation);
  53. var sintheta = Math.sin(rotation);
  54. canvas.src = p.src;
  55. canvas.height = p.height;
  56. canvas.width = p.width;
  57. canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
  58. } else {
  59. var canvas = document.createElement('canvas');
  60. if (!p.oImage) {
  61. canvas.oImage = new Image();
  62. canvas.oImage.src = p.src;
  63. canvas.oImage.width = p.width;
  64. canvas.oImage.height = p.height;
  65. canvas.oImage.onload = function(){ fnRotate(canvas,rotation) };
  66. } else {
  67. canvas.oImage = p.oImage;
  68. fnRotate(canvas,rotation);
  69. }
  70. }
  71. canvas.id = p.id;
  72. canvas.angle = p.angle;
  73. p.parentNode.replaceChild(canvas, p);
  74. };
  75. jQuery.fn.rotateRight = function(angle) {
  76. this.rotate(angle==undefined?90:angle);
  77. };
  78. jQuery.fn.rotateLeft = function(angle) {
  79. this.rotate(angle==undefined?-90:-angle);
  80. };