Javascript 如何在缩放画布时剪裁图像

在我正在开发的应用程序中，我实现了将图像拖动到fabric

Canva

s上的放置区域，放置区域由

Rect

表示。拖放时，会添加一个新的

图像

，我想按拖放到的矩形剪裁图像。我将我的实现基于此小提琴：

因为我的页面大小可能很大，所以我使用

Canvas

setZoom

方法来管理放大和缩小。但是，当画布的缩放不是1时，上述小提琴中的剪辑技术不起作用-例如，画布缩放到0.5时：

---

我尝试了多种方法根据缩放调整剪辑矩形，但我就是想不出正确的组合。

我用固定版本更新了fiddle at。修复方法是基于画布的viewportTransform缩放和转换上下文

ctx.scale(1 / x[0], 1 / x[3]);
ctx.translate(x[4], x[5]);

以及缩放剪辑矩形的位置和大小

ctx.rect(
x[0] * clipRect.left - this.oCoords.tl.x,
x[3] * clipRect.top - this.oCoords.tl.y,
x[0] * clipRect.width,
x[3] * clipRect.height);