Lens not synchronized to the image with 90 degrees of rotation #21
Description
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>