个人中心
gpt4 book ai didi

javascript - 如何使图像和镜头旋转与 BlowupJS 保持同步？

转载 作者：行者123 更新时间：2023-12-05 04:35:08 28 4
gpt4 key购买 nike

我使用了 blowup.js 插件作为基础，我试图旋转图像，并让镜头跟随旋转。但它不起作用。

例如，当我放置rotate(180deg) 时，镜头和图像不匹配，如果我移除rotate(180deg)，它们就会对齐。

有人知道如何帮助我吗？

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>

最佳答案

您可以将镜头朝相反的方向 (-180 度) 旋转，也可以反转背景位置:

旁注:您不想在每次鼠标移动时都应用背景图像，而是将其移动到镜头初始化。

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>

更新:对于更一般的图像旋转情况，我会在镜头内使用额外的绝对定位图像，而不是 background-image。更容易控制:

var $pic = $('#target');

// Constants
const lensD = 70, // lens diameter
  src = $pic.attr("src"),
  tоp = $pic.offset().top,
  lеft = $pic.offset().left;

let angle, scaleX, scaleY;

const $lens = $('<div id="lens"/>')
  .css({
    width: lensD,
    height: lensD
  })
  .appendTo('body');
  
const $lensImage = $(`<img src="${src}">`)
  .on('load', function() {
    scaleX = this.width / ($pic.width() || 1);
    scaleY = this.height / ($pic.height() || 1);
  })
  .appendTo($lens);

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

  // Lens position
  $lens.css({
    transform: (`
      translateX(${e.pageX - lensD/2}px)
      translateY(${e.pageY - lensD/2}px)
    `)
  });

  // Zoomed image position
  $lensImage.css({
    transform: (`
      translateX(${(lеft - e.pageX) * scaleX + lensD/2}px)
      translateY(${(tоp - e.pageY) * scaleY + lensD/2}px)
      rotateZ(${angle}deg)
    `)
  });
});

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

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

// Rotation (aux)
$('#angle')
  .on('input', function() {
    $('#a').val((angle = $(this).val()) + 'deg');
    $pic.css({
      transform: `rotateZ(${angle}deg)`
    });
    $lensImage.css({
      transform: `rotateZ(${angle}deg)`
    });
  })
  .trigger('input')
  .val();
#a {
  border: 0
}

#target,
#lens img {
  width: 200px;
  height: 100px;
  margin: 40px;
}

#lens {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  margin: 0;
  padding: 0;
  border: solid 3px #0003;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

#lens img {
  position: absolute;
  width: auto;
  height: auto;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<fieldset>
  Rotate: <input id="a" readonly><br>
  -180 <input type="range" min="-180" max="180" step="1" value="-9" id="angle"> 180
</fieldset>

<img id="target" src="https://picsum.photos/id/111/400/200">

关于javascript - 如何使图像和镜头旋转与 BlowupJS 保持同步？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71085283/

28 4 0
文章推荐： android-studio - ApplicationVariant、BaseVariantOutput 已弃用
文章推荐： flutter - 如何在flutter中构建没有key的release模式——Flutter Debug模式好慢
文章推荐： c++ - 在 C++ 中复制具有多态成员的对象
文章推荐： javascript - 在 React Native 应用程序中访问 Intune 配置设置？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com