首页 文章

如何在缩放画布时剪切图像

提问于
浏览 次
1

在应用程序中，我实现了将图像拖动到结构 Canva 上的拖放区域，其中拖放区域由 Rect 表示 . 删除后，会添加一个新的 Image ，我想按照它所放置的矩形剪切图像 . 我的实现基于这个小提琴：

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

因为我的页面大小可能很大，我使用 Canvas setZoom 方法来管理放大和缩小 . 但是当画布的缩放不是1时，上面小提琴中的剪辑技术不起作用 - 上面的例子，画布缩放到0.5：

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

我尝试了多种基于缩放调整剪辑矩形的方法，但我无法弄清楚正确的组合 .

javascript canvas fabricjs

1 回答

  • 3

    我用http://jsfiddle.net/pagameba/jjLe9wps/用固定版本更新了小提琴 . 修复是基于画布'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);
    回复于

相关问题