Question

如果知道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;

}

Answer 1

使用

transform-origin: x-axis y-axis;

其中轴以％或任何长度单位或x和 top的左|右|中心之一| y的底部|居中。

x和y的默认值为50％，这意味着默认原点在中心0％0％表示“左上”，而100％100％表示“右下”

Answer 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>

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

2 个答案: