I have an image identified by jquery $ ("#ImageImage") which I am embedding in a visualizer so that the user can perform events such as zoom in, zoom out, move image in mouse direction and rotate.
I have problems with the last part.
the rotation is done by inserting class transform: rotate(270deg);
and varying the desired angle according to the events.
The problem is, when I have degrees of 270 and 90 (horizontal) when I press the image and move it through the viewer. It moves uncontrollably to the lower left every time I move.
this.imgDetalle.mousedown((e) => {
this.bandera = true;
this.X = e.pageX;
this.Y = e.pageY;
return false;
})
.mousemove((e) => {
if (this.bandera) {
let deltaX: number = e.pageX - this.X;
let deltaY: number = e.pageY - this.Y;
if (deltaX === 0 && deltaY === 0) {
return false;
}
this.imgDetalle.css({
left: (this.imgDetalle.position().left + deltaX) + "px",
top: (this.imgDetalle.position().top + deltaY) + "px"
});
this.X = e.pageX;
this.Y = e.pageY;
return false;
}
})
.mouseup((e) => {
this.bandera = false;
return false;
}).bind("mousewheel", (e: any) => {
if (e.originalEvent.wheelDelta / 120 > 0) {
this.EventoZoom(50);
} else {
this.EventoZoom(-50);
}
}).mouseout((e) => {
this.bandera = false;
return false;
});
The classes that I use in the same way the attached ones, I add them with each event of rotation
.imgRotada {
transform: rotate(0);
}
.imgRotada_90 {
transform: rotate(90deg);
}
.imgRotada_180 {
transform: rotate(180deg);
}
.imgRotada_270 {
transform: rotate(270deg);
}
I use the flag to identify when the mouse is really pressed or not, but I still can not solve the desired displacement.
Thanks for the help