shani622 / jquery-rotate

Automatically exported from code.google.com/p/jquery-rotate
0 stars 0 forks source link

[workround] This plugin (Matrix filter) no longer works on IE10 #20

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
This plugin will not work on IE10 since the Matrix filter seems to be 
abandoned. If you're on IE10, you can test the filter on the official demo page 
from MSDN, it doesn't work anymore - 
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.h
tm

To solve the problem, add the following code

// for IE 10, use CSS3 rotate
if(navigator.userAgent.indexOf('MSIE 10') !== -1) {
    p.style.transform = 'rotate('+p.angle+'deg)';
    var a = Math.PI * p.angle / 180;
    p.setAttribute('data-canvas-width', Math.round(p.width * Math.cos(a) + p.height * Math.sin(a)));
    p.setAttribute('data-canvas-height', Math.round(p.height * Math.cos(a) + p.width * Math.sin(a)));
    return false;
}

after the first if-else block

if (!whence) {
    p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
    p.angle = angle;
}

----------------

Note: You need to set the second parameter *whence* to *true*.

The code above will rotate the image using CSS3 rotate filter.

Since rotating with CSS3 will not change the element dimension (always same 
number with $('#img').width()) which is unlike creating a canvas. So the code 
also adds 2 attributes (data-canvas-width and data-canvas-height), which are 
the actual canvas width and height to the element.

Hope this helps.

Original issue reported on code.google.com by ken...@gmail.com on 6 Dec 2012 at 2:27