时间戳

首页 > 解决方案 > 给定 x 和 y 缩放图像

javascript - 给定 x 和 y 缩放图像

问题描述

我有一个图像，它作为“标尺”（由绝对位于图像顶部的基本 div 组成）用于测量图像的末端。现在的想法是，如果您长按其中一个标尺末端（可拖动的线末端的点），背景中的图像将放大该点，并在用户移动它时跟随该点。我能够检测到长按，但一旦检测到，我就无法缩放图像并跟随点。下面的代码是我完成检测的地方，现在我应该应用样式来移动图像。我想过使用过渡属性，但无法让它放大点。任何帮助表示赞赏...

这是标尺如何工作的代码框：链接

有意义的代码：

const x = get('x', varToUse); //This just gives the x coordinate of the ruler end
const y = get('y', varToUse); //This just gives the y coordinate of the ruler end

const image = ruler.current.parentElement.parentElement.childNodes[1].childNodes[1];

if (zoom) {
  image.style.transform = `translate(${x * 2}px, ${y * 2}px) scale(2.0)`;
} else {
  image.style.transform = `scale(1.0)`;
}

这是统治者的样子，只是为了理解： 在此处输入图像描述

标签： javascriptcssreactjs

解决方案

您可以使用背景图像将图像设为 div。

.image {
    background-image: url({image_url});
}

因此，您可以使用此属性轻松更新图像大小和位置

.image {
    background-size: x y;
    background-position x y;
}

我认为这种方式更容易进行图像调整大小和缩放功能。

另一种方法是使用画布库，它可以为您提供很多帮助，它们有很多内置函数。

我认为现在在没有库的情况下尝试它会更好，但随着它的发展，尝试移动到画布库

推荐阅读