Fabric JS在图像容器内移动图像答案

【问题标题】：Fabric JS move image inside the image containerFabric JS在图像容器内移动图像
【发布时间】：2021-09-17 14:23:49
【问题描述】：

好的，我需要一个功能，我需要能够在图像本身的框架内正确定位图像。

正如您在图像中看到的，图像容器将具有固定大小，如果图像大于框架本身，我需要能够在框架内重新定位图像。我尝试用矩形裁剪图像并将图像定位在矩形内，但剪辑会创建一个与矩形大小相等的新图像，因此到目前为止它还没有工作。 fabric.Image 类中是否有任何属性可以让我们在其中移动图像位置？太胖了，我一直找不到。非常感谢任何帮助。谢谢

【问题讨论】：

标签： fabricjs

【解决方案1】：

从 Fabric.js v2 开始，可以使用以下四个属性的组合来完成图像裁剪：width、height、cropX 和 cropY。 (http://fabricjs.com/v2-breaking-changes#image)

例如，原始尺寸为 500x500 像素的图像可以像这样被中心裁剪为 300x300 像素：

img.set({
  width: 300,
  height: 300,
  cropX: 100,
  cropY: 100
});

【讨论】：

非常感谢。这似乎是我想要的，但我正面临一个问题。所以我先上传一张图片，然后我替换图片。如何将新图像正确地适合旧图像的尺寸？假设我的旧图像是 200*300 而我的新图像是 300*500，当我替换 src 并将宽度和高度设置为 200*300 时，新图像被裁剪。相反，我希望新图像适合旧框架。我怎么做？非常感谢您的帮助
您需要将新图像的比例与容器的比例进行比较，然后相应地裁剪较大的尺寸。如果遇到困难，请随时提出新问题。