How can I keep image and lens rotation synchronized with BlowupJS?-CodePudding

I used the blowup.js plugin as a base, and I am trying to rotate the image, and the lens to follow the rotation. But it is not working.

When I put the rotate(180deg) for example, the lens and the image are mismatched, if I remove the rotate(180deg) they are aligned.

Anybody know how to help me?

sample in JSFiddle

var $element = $('#target');
$element.css({
  'transform': 'rotate(180deg)'
}); // 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();

  // Relative coordinates of image
  var relX = e.pageX - $('#target').offset().left;
  var relY = e.pageY - $('#target').offset().top;

  // 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);

  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(180deg)" //rotate the image original
  });
})

// Hide magnification lens
$element.mouseleave(function() {
  $blowupLens.css("display", "none");
});

#target {
  margin-left: 160px;
  width: 700;
  height: 500px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <img id="target" src="https://iili.io/0hL7ou.png">
</body>

CodePudding user response：

You might rotate the lens in the opposite direction (-180deg) and inverse background position too:

Side note: you don't want to apply background-image on every mousemove, move it to the lens init.

var $element = $('#target');
$element.css({
  'transform': 'rotate(180deg)'
}); // 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();

  // Relative coordinates of image
  var relX = e.pageX - $('#target').offset().left;
  var relY = e.pageY - $('#target').offset().top;

  // 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);

  var backPos = "calc(100% - "   zoomX   "px) calc(100% - "   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(-180deg)" //rotate the image original
  });
})

// Hide magnification lens
$element.mouseleave(function() {
  $blowupLens.css("display", "none");
});

#target {
  margin-left: 160px;
  width: 400;
  height: 250px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <img id="target" src="https://iili.io/0hL7ou.png">
</body>