search

gthmb / jquery-free-transform

provides simple controls that allows you to move/rotate/scale a DOM element. kinda like a simple version of the free transform tool in Flash or Photoshop.
133 stars 58 forks source link

Fix position for zoom! #26

Open praneybehl opened 10 years ago

praneybehl commented 10 years ago

I am trying to use this along with the jQuery Pan Zoom plugin. If the parent div is at a zoom other than 1 this free transform plugin doesn't perform as expected.

I got the same issue when using jQueryUI draggable with zoom but to fix it I used :

$(".selector").draggable({ drag: function(evt,ui) { var zoom = currentZoom; // current zoom value; 

        ui.position.top = Math.round(ui.position.top / zoom);
        ui.position.left = Math.round(ui.position.left / zoom);
    }
});

How can I fix it with this plugin? Can someone please help?

Thanks in Advance, Praney

praneybehl commented 10 years ago

Here is an example of what I am trying to same: http://jsfiddle.net/praneybehl/dg3mQ/1/

ReneHollander commented 10 years ago

I put together a quick and dirty workaround that issue. You can see it here: https://github.com/Rene8888/jquery-free-transform Unfortunately webmatrix did some code formatting and now you can't really see what I did. But here is a small explanation: whereever we get the coordinates of the mouse from the event, I divide them by the parent zoom. Like in your fix for jquery ui draggables. I somehow got a method working to set the parent zoom, but this is unfortunately done globally - I am not an javascript expert. I hope it helps you and I would be pleased if someone could tell me how to set the zoom for one element only and not globally...