Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lens not synchronized to the image with 90 degrees of rotation #21

Open
rafaelcb21 opened this issue Feb 13, 2022 · 1 comment
Open

Lens not synchronized to the image with 90 degrees of rotation #21

rafaelcb21 opened this issue Feb 13, 2022 · 1 comment

Comments

@rafaelcb21
Copy link

I am using rotate but when I use 90 degrees or 270 degrees, the lens doesn't match.

Do you know how to solve this problem?

The lens is behaving very strange, it looks like I am moving the image in the opposite direction, I am moving up in the image, but I am moving the mouse down.

Below is the blowup code along with the rotate:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div style="margin-top: 100px;">
            <img id="target" style="margin-left: 160px; " src="https://iili.io/0hL7ou.png">
        </div>
        
        <button onclick="rotateImage()">Rotate</button>
        
        <script>

            function zoom(x, y) {
                
                var top = 8;
                var left = 168;
                var width = 599.344;
                var height = 500;
                var nativeWidth = 742;
                var nativeHeight = 619;

                var lensX = x - (200 / 2);
                var lensY = y - (200 / 2);

                var relX = x - left;
                var relY = y - top;

                var zoomX = -Math.floor(((relX / width) * nativeWidth) - (200 / 2));
                var zoomY = -Math.floor(((relY / height) * nativeHeight) - (200 / 2));

                var backPos180 = "calc(100% - " + zoomX + "px) calc(100% - " + zoomY + "px)";
                var backPos360 = zoomX + "px " + zoomY + "px";

                return [zoomX, zoomY, backPos180, backPos360]

            }

            var statusRotate = 4;
            rotateImage();
            
            function rotateImage() {
                if (statusRotate == 1) {
                    imageLen('90', '90');
                    statusRotate = 2
                } else if (statusRotate == 2){
                    imageLen('180', '-180')
                    statusRotate = 3
                } else if (statusRotate == 3){
                    imageLen('270', '270')
                    statusRotate = 4
                } else if (statusRotate == 4){
                    imageLen('360', '360')
                    statusRotate = 1
                } 
            }

            function imageLen(x, y){
                var degrees_image = x;
                var degrees_image_native = y;

                var $element = $('#target');
                $element.css({
                    'transform': 'rotate('+ degrees_image +'deg)'
                }); // rotate imagem in html

                // Constants
                var $IMAGE_URL    = $element.attr("src");
                var NATIVE_IMG    = new Image();
                NATIVE_IMG.src    = $element.attr("src");

                var lens = document.createElement("div");
                lens.id = "BlowupLens";
                $("body").append(lens);
                $blowupLens = $("#BlowupLens");

                $blowupLens.css({
                    "position"          : "absolute",
                    "display"           : "none",
                    "pointer-events"    : "none",
                    "zIndex"            : 999999,
                    "width"             : 200,
                    "height"            : 200,
                    "border"            : "6px solid #FFF",
                    "background"        : "#FFF",
                    "border-radius"     : "50%",
                    "box-shadow"        : "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
                    "background-repeat" : "no-repeat",
                });

                // Show magnification lens
                $element.mouseenter(function () {
                    $blowupLens.css("display", "block");
                });


                // Mouse motion on image
                $element.mousemove(function (e) {

                // Lens position coordinates
                var lensX = e.pageX - (200 / 2);
                var lensY = e.pageY - (200 / 2);

                var width = $element.width();
                var height = $element.height();

                var left = $('#target').offset().left;
                var top = $('#target').offset().top;

                // Relative coordinates of image
                var relX = e.pageX - left;
                var relY = e.pageY - top;

                var nativeImageWidth = NATIVE_IMG.width;
                var nativeImageHeight = NATIVE_IMG.height;

                // Zoomed image coordinates 
                var zoomX = -Math.floor(relX / width * (NATIVE_IMG.width) - 200 / 2);
                var zoomY = -Math.floor(relY / height * (NATIVE_IMG.height) - 200 / 2);



                if(degrees_image == '90') {
                    var backPos = "calc(100% - " + zoomY + "px) calc(100% - " + zoomX + "px)";
                    //var backPos = zoomY + "px " + zoomX + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                    //
                } else if(degrees_image == '180') {
                    var backPos = "calc(100% - " + zoomX + "px) calc(100% - " + zoomY + "px)";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                } else if(degrees_image == '270') {
                    var backPos = zoomY + "px " + zoomX + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                } else if(degrees_image == '360') {
                    var backPos = zoomX + "px " + zoomY + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";
                }

                // Apply styles to lens
                $blowupLens.css({
                    left                  : lensX,
                    top                   : lensY,
                    "background-image"    : "url(" + encodeURI($IMAGE_URL) + ")",
                    "background-size"     : backgroundSize,
                    "background-position" : backPos,
                    "transform"           : 'rotate('+ degrees_image_native +'deg)' //rotate the image original
                    });
                })

                // Hide magnification lens
                $element.mouseleave(function () {
                    $blowupLens.css("display", "none");
                });
            }      
        
        </script>
    </body>
</html>
@rafaelcb21
Copy link
Author

It has been solved, follow the link: stackoverflow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@rafaelcb21