javascript - 如何在 Canvas 缩放时裁剪图像

Question

在我正在处理的应用程序中，我实现了将图像拖动到结构 Canva 上的拖放区，其中拖放区由 Rect 表示。放下时，将添加一个新的 Image 并且我想通过它被放置到的矩形来剪辑图像。我的实现基于这个 fiddle :

http://jsfiddle.net/PromInc/ZxYCP/

因为我的页面尺寸可能很大，所以我使用 Canvas setZoom 方法来管理放大和缩小。但是，当 Canvas 的缩放比例不是 1 时，上述 fiddle 中的裁剪技术不起作用 - 上面的 Canvas 缩放到 0.5 的示例:

http://jsfiddle.net/pagameba/jjLe9wps/

我尝试了多种基于缩放调整剪辑矩形的方法，但我无法找出正确的组合。

Answer 1

我已经在 http://jsfiddle.net/pagameba/jjLe9wps/ 更新了 fiddle 与固定版本。解决方法是根据 Canvas 的 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);