Unwanted image shift

0

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

    
asked by Stock Dave 28.07.2018 в 00:08
source

0 answers