gthmb / jquery-free-transform Goto Github PK
View Code? Open in Web Editor NEWprovides 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.
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.
It would be nice to be able to disable certain parts of the control. If all you want is rotation, one could set the options: scale:false, move:false
Your source header is incorrect saying:
instead of:
I am trying to recreate the transformed object to a svg element, so I am not sure what x and y position returns after scaling the object.
function _setOptions(data, opts) {
if (opts == null || opts == undefined) return;
delete opts._p;
I get that error report from firebug and this is the line.
It said it is on line 7.
I call the this plugin function after some events like click and drag was initiated!
How to set the 'ft-rotator' position?
Thank to telling me.
Elements may be changed by other scripts, in this case needed some UPDATE method which will update position and size of contols boxes;
I really like your library, it's exactly what I need. However, it would be nice to be able to set the attributes from a css-like string, without having to fiddle about with matrices externally. I mean sth. like this:
$('mydiv').freetrans({
transform: "matrix(2, 0, 0, 2, 0, 0)"
});
Is that possible?
Are there any callback functions to listen on, like drag/scale/rotate-stop?
Hi, when i manualy rotate the object and then change it's rotation with script ( for example with button onlick) the points in corners goes to wrong position.
You can test it here
http://jsfiddle.net/xUtq6/
just manualy rotate the cat and than click on the button...
Just for fun I've forked and enhanced your jsfiddle a little bit: http://jsfiddle.net/98hGA/4/
Now you the appropriate cursors shows up depending on what little box you are hovering over before resizing and grab/grabbing cursors show up for dragging.
Touch ain't working on iPad simulator and since developing on a mac not IE available for testing. As matrix.js relies on canvas I guess no IE below 9 ?http://caniuse.com/#search=canvas
Hello
I would like to know if it's possible to add an option for the resizing action to maintain aspect ratio (without having to press a key)
Thank you!
I would love to use your library within a software package distributed under both GFDL and Creative Commons Attribution-ShareAlike (by-sa) License. As you do not have a license plate, I have to ask for your permission first.
Would it be ok to include, use and distribute in such a context?
excellent plugin jonathan green, I have not seen anything like the web.
also wanted to ask you a question, how to make a "margin" element to the controls, I have not managed to do :( if you could help me would be very grateful.
Greetings from Chile
Hi,
I cant seem to force the flipping of an image as soon as freetransform function is running.
I'm trying to do that with CSS (scaleX(-1)), can anyone point me to a solution ?
Thanks
How to limit movement within the parent div?
I need to align the element center of parent div when i click the button. Before re-sizing this working fine but after re-sizing having trouble. Can you please help me for fix this?
See the fiddle:
http://jsfiddle.net/mpanuraj/xUtq6/3/
It would be great to have the option to scale the element but maintain the central position.
I'm hoping you can provide some clarity on the data object for me. scalex
, scaley
, and angle
are clear enough, but I can't figure out what positions x
and y
are relative to. When the object isn't scaled or rotated, they give the position of the top left corner, but I'm not clear how the rotation and scale interact with them.
Ultimately, I'm trying to figure out how—given the properties from the plugin—I can recreate the transformation with the correct position.
Thanks!
Hello
i am using this nice feature, but i need to insert containment for drag & resize.
is it possible?
This plugin does not work with mobile phone browsers. It would be nice if it did!
Your library do everything I planned to create saving me tons of time.
I only needed to add the Ipad gestures(rotate/pinch).
I'm sending the code I added inside _init function, if you want to add/test it.
$(container).bind('gesturestart', function(evt) {
evt.stopPropagation();
var data = sel.data('freetrans'),
cen = _getBounds(data._p.divs.controls).center,
pressang = evt.originalEvent.rotation,
startscale = evt.originalEvent.scale,
tempScaleX = data.scalex,tempScaleY = data.scaley,
firstAngle = true;
rot = Number(data.angle);
var change = _noSelect(function(evt) {
if(firstAngle){
firstAngle=false;
if(Math.abs(evt.originalEvent.rotation)>30){
pressang = evt.originalEvent.rotation;
}
}
var ang = evt.originalEvent.rotation,
d = rot + ang - pressang,
newscale = evt.originalEvent.scale;
data.angle = d;
data._p.rad = d*rad;
data.scalex = tempScaleX + newscale - startscale
data.scaley = tempScaleY + newscale - startscale
data._p.cwid = data._p.wid * data.scalex;
data._p.chgt = data._p.hgt * data.scaley;
_draw(sel, data);
});
var end = function(evt) {
$(document).unbind('gesturechange.freetrans', change);
$(document).unbind('gestureend.freetrans', end);
};
$(document).bind('gesturechange.freetrans', change);
$(document).bind('gestureend.freetrans', end);
});
I tried to do add simple "select" functionality. I achieved that by calling .freetrans('destroy')
on previously selected element and .freetrans()
on new one. That works fine except that all transformations are wiped after selecting same shape for the second time.
Here's an example: http://jsfiddle.net/9hz8y99z/1/
Hi,
Firstly thank you for taking the time to create this awesome script.
I have a quick question, Does it support free-transform for svg elements? I am working with svg.js for rendering and manipulating svg and looking for a transform tool for it.
Thanks,
Praney
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
hello master!
I have a problem, fix it and wanted to know how long checks out the element with margin. but when manipulated (resized) scaling jumps more pixels than normal, how I can fix it?
In the readme, the following line:
var b = $('mydiv').getBounds();
should be:
var b = $('mydiv').freetrans('getBounds');
How to make turn on / turn off?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.