小编Lar*_*son的帖子

在调整目标图像的大小后，我一直试图弄清楚在计算蒙版矩形的位置和大小时我做错了什么。

以下是fabric JS的文档：

clipPath :fabric.Object 一个fabricObject，没有描边，用它们的形状定义一个剪切区域。填充为黑色，当对象渲染时使用 clipPath 对象，并且上下文被放置在对象 cacheCanvas 的中心。如果您希望剪辑路径的 0,0 与对象中心对齐，请使用 clipPath.originX/Y 来“居中”类型：fabric.Object 来源：fabric.js，第 12991 行

当图像未调整大小（比例为 1:1 X & Y）时，我的代码运行良好。在名为rescaleMask的代码函数中，我尝试将蒙版定位到零中心 X 和 Y，当我在一张方格纸上手动运行我的数学时，似乎数学是正确的。显然，有一个我不知道的部分导致定位以不同的方式关闭，具体取决于进行裁剪的象限。这里有相当多的代码，但重要的是掩码是动态创建的，而不是硬编码。问题必须出在rescaleMask函数中，因此希望可以忽略其余代码。

我创建了一个带有编号方块的测试图像图，我将通过单击蒙版按钮进行裁剪，使用鼠标左键在其中一个框周围绘制一个矩形，然后单击裁剪按钮。在创建蒙版和裁剪之前调整图像大小时会出现问题。

这是测试图像：

这是一个 jsfiddle结构用鼠标动态 js 2.4.1 创建 rect 作为修复 #4 发送

<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="mask">Mask</button>
<button id="crop">Crop</button>

JS

var lastSelectedPicture = null;
var isInsertingCropRectangle = false;
var canvas = new fabric.Canvas('c', {
  selection: true,
  preserveObjectStacking: true,
  height: 700,
  width: 800
});

var crop_rect, isDown, origX, …