search

heygrady / transform

jQuery 2d transformation plugin
437 stars 87 forks source link

translation not working properly in IE8 #31

Open abhayastudios opened 12 years ago

abhayastudios commented 12 years ago

Hi,

I am using your JQuery 2D transform plugin to rotate images as follows:

$("#crop_container img").transform( { translateX: translateX+'px', translateY: translateY+'px', rotate: rotation+'deg' });

Where the crop_container is an absolutely positioned div wrapped around the image as you suggested in another issue. The translation is calculated on basis of the image orientation (portrait/landscape) and its rotation. For landscape and 90 or 270 degrees it is:

translate=(imagewidth-imageheight)/2; translateX = '-'+translate; translateY = translate;

All is good in FF/Webkit/IE9, but in IE8 it seems the translation is off. I read in a wiki page that "IE also lacks support for transform-origin and translate() [...] The jQuery Transform plug-in handles these calculations automatically". If this is true then I must be doing something wrong or there is a bug.

Any ideas/advice?

Thanks!

brendanmckeown commented 12 years ago

I'm also having trouble with this same issue. In IE 8, when a rotated object is translated, it moves along it's own axis, not straight up/down/left/right, so you can get some funky results. Every other browser including IE 9 performs this transformation correctly. See this example: http://jsfiddle.net/kzMff/9/

Does anyone have a solution to this?

brendanmckeown commented 12 years ago

I found a fix for this issue, at least for my usage. In the execMatrix function, replace this line (around 290):

this.fixPosition(matrix, tx, ty);

with this:

// factor in the object's current rotation so translation remains straight up/down/left/right // otherwise, object will be translated along the rotated axis, which produces undesirable effects var rotation = parseInt(this.$elem.css('rotate')) * -1, // the current rotation in degrees, inverted radians = rotation * (Math.PI / 180), // convert degrees to radians newX = (tx * (Math.cos(radians))) - (ty * (Math.sin(radians))), // calculate new x newY = (tx * (Math.sin(radians))) + (ty * (Math.cos(radians))); // calculate new y

this.fixPosition(matrix, newX, newY);

Hope this helps.