缩放并聚焦到图像的 x 和 y 坐标答案

【问题标题】：zoom and focus to x and y cordinates of an image缩放并聚焦到图像的 x 和 y 坐标
【发布时间】：2019-06-18 08:18:02
【问题描述】：

如果 x 和 y 坐标已知，是否可以缩放到某个点？我有一个图像和该图像中的一个点，其坐标和坐标是已知的。这些坐标是动态的。意味着它可以相应地改变。在鼠标单击事件上我正在尝试缩放到该特定点。
对于缩放，下面的代码就足够了。感谢任何帮助或参考链接。

.image img {

 -moz-transition: all 1s ease; /* Firefox */
 -ms-transition: all 1s ease; /* IE 9 */
 -o-transition: all 1s ease; /* Opera */
 transition: all 1s ease;

 }


.imgclickedtop{


 -moz-transform:scale(3) !important; /* Firefox */
 -ms-transform:scale(3) !important; /* IE 9 */
 -o-transform:scale(3) !important; /* Opera */
  transform:scale(3) !important;

}

【问题讨论】：

如果你使用transform-origin这是可能的
为此我们应该知道坐标的位置。对？我们怎么说坐标是在中心还是顶部还是左侧？

标签： html css transform zooming scale

【解决方案1】：

使用

transform-origin: x-axis y-axis;

x 和 top 的轴位于 % 或任何 length 单位或 left|right|center 之一|底部|中心代表y。

x 和 y 的默认值都是 50%，表示默认原点在中心 0% 0% 表示“左上”，而 100% 100% 表示“右下”

【讨论】：

使用供应商前缀来支持旧浏览器

【解决方案2】：

类似这样的：

"use strict";
console.clear()

document.addEventListener('mousemove', e => {
  if (e.target.hasAttribute('zoom-img')) {
    const px = Math.min(1, Math.max(0, e.layerX / e.target.clientWidth));
    const py = Math.min(1, Math.max(0, e.layerY / e.target.clientHeight));
    e.target.style.setProperty('--zoom-center-x', px * 100);
    e.target.style.setProperty('--zoom-center-y', py * 100);
  }
})

[zoom-img] {
  --zoom-factor: 1;
  --zoom-center-x: 50;
  --zoom-center-y: 50;
  width: 200px;
  height: 200px;
  background-color: pink;
  border: 1px solid red;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  overflow: hidden;
}
[zoom-img] img {
  pointer-events: none;
  -webkit-transform: scale(calc(var(--zoom-factor, 1)));
          transform: scale(calc(var(--zoom-factor, 1)));
  -webkit-transform-origin: calc(1% * var(--zoom-center-x, 50)) calc(1% * var(--zoom-center-y, 50));
          transform-origin: calc(1% * var(--zoom-center-x, 50)) calc(1% * var(--zoom-center-y, 50));
}

1 &times;
<div zoom-img style="--zoom-factor: 1">
  <img src="https://picsum.photos/id/1/1960/1080" alt="">
</div>
2 &times;
<div zoom-img style="--zoom-factor: 2">
  <img src="https://picsum.photos/id/1/1960/1080" alt="">
</div>
10 &times;
<div zoom-img style="--zoom-factor: 10">
  <img src="https://picsum.photos/id/1/1960/1080" alt="">
</div>

【讨论】：