Positioning an image while scaling, dragging and rotating
I'm working on some code to control the image. I'm 90% working but ran into an error that made me pull my hair out! So, I have two sliders. The left slider should rotate and the right slider should scale (scale). You can also drag the image to place it.
This is a specific sequence that will make the image jump when scaled. sequence:
Rotate, scale, rotate, scale, drag, scale.
In the final scale, you can see how the image jumps out of position. This is what I get.
I added one of my codes below and my complete code can be tested in jsfiddle here
Drag:
// Drag Handler
$('#posUsrImgWrap').draggable({
drag:function(event, ui){
var il = ui.position.left;
var it = ui.position.top;
var iw = $(this).width();
var ih = $(this).height();
$('#posUserImg').css({'top':it+'px','left':il+'px'});
dragged = true;
zc = 0;
},
stop:function(){
ixz = $('#posUserImg').position().left;
iyz = $('#posUserImg').position().top;
if(rotated){
if(!zoomed){
rx=orx*zv;
ry=ory*zv;
}
ixz=ixz+rx;
iyz=iyz+ry;
}
rxz=ixz;
ryz=iyz;
zoomed=false;
rd=true;
}
});
Rotate:
$( "#slider-vertical" ).show().slider({
orientation: "vertical",
min: -180,
max: 180,
value: sv,
slide: function( event, ui ) {
var rv = ui.value; // Rotate Value
$('#posUserImg, #posUsrImgWrap').rotate(rv);
$('#rVal').val(rv);
},
stop:function(){
rx=((rxz - $('#posUserImg').position().left));
ry=((ryz - $('#posUserImg').position().top));
orx=rx;
ory=ry;
rzv=zv;
rotated=true;
}
});
Scale:
$( "#slider-vertical-zoom" ).show().slider({
orientation: "vertical",
min: -90,
max: 150,
step: 5,
value: szv,
start:function(){
czv = (1+ $(this).slider("value")/100);
},
slide: function( event, ui ) {
zv = (1+ ui.value/100); // Zoom Value
var nx = 0;
var ny = 0;
var ozv = (1+ parseInt($('#zVal').val())/100);
nzo = calculateAspectRatioFit(iwz, ihz, iwz*(ozv), ihz*(ozv));
if (dragged && zc == 0){
var wt = Math.abs(iwz - nzo.width);
var ht = Math.abs(ihz - nzo.height);
if (czv < 1){
ixz = ixz-(wt/2);
iyz = iyz-(ht/2);
} else {
ixz = ixz+(wt/2);
iyz = iyz+(ht/2);
}
}
nzo = calculateAspectRatioFit(iwz, ihz, iwz*(zv), ihz*(zv));
$('#posUserImg, #posUsrImgWrap').width(nzo.width).height(nzo.height);
var wd = Math.abs(iwz - nzo.width);
var hd = Math.abs(ihz - nzo.height);
if (zv < 1){
nx = (ixz+(wd/2));
ny = (iyz+(hd/2));
$('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'});
} else {
nx = (ixz-(wd/2));
ny = (iyz-(hd/2));
$('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'});
}
$('#wPos').val(nzo.width);
$('#hPos').val(nzo.height);
$('#xPos').val(($('#posUserImg').position().left+(orx*zv)));
$('#yPos').val(($('#posUserImg').position().top+(ory*zv)));
$('#zVal').val(ui.value);
zc++;
iz=1;
},
stop: function(){
zx = 0;
zoomed=true;
rx=orx*zv;
ry=ory*zv;
rxz=ixz+rx;
ryz=iyz+ry;
}
});
I think the problem is with the end rotation or scaling functions. I have a feeling it might have something to do with the scale value, but I tried so many different combinations to get this to work with no luck.
source to share
I found out how to do this after hours of testing and debugging. It turns out to be a fairly simple solution. The problem was that the dragged UI was returning a different top and left value in the rotation event. Not really sure how or why, but it seems to work with the modified code in the stop drag function. You can see the fixed version here.
var il,it;
// Drag Handler
$('#posUsrImgWrap').draggable({
drag:function(event, ui){
il = ui.position.left;
it = ui.position.top;
var iw = $(this).width();
var ih = $(this).height();
$('#posUserImg').css({'top':it+'px','left':il+'px'});
dragged = true;
zc = 0;
},
stop:function(){
ixz=il;
iyz=it;
}
});
source to share
I've made some changes to your code by commenting out some of your code. It seems to work and the error went away. Please let me see . If you comment your code I can better solve your problem. I commented out the following part:
if (zv < 1){
nx = (ixz+(wd/2));
ny = (iyz+(hd/2));
$('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'});
}
else{
nx = (ixz-(wd/2));
ny = (iyz-(hd/2));
$('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'});
}
Probably the problem is caused mainly by the reason when dragged = true and zc = 0 you are setting the value ixz, iyz twice.
source to share