相关疑难解决方法(0)

使用Fabric JS放大和缩小

我正在使用FabricJS构建一个简单的图像编辑器.我几乎可以做任何我需要的东西,问题在于实现缩放功能.据我所知,FabricJS没有任何构建它,所以我试图自己做.

我在"放大"和"缩小"页面上放了2个按钮,点击它们分别激活jQuery功能

$("#zoomin").click(function() {   
    $("#canvas").width(
        $("#canvas").width() * 1.25
    );

    $("#canvas").height(
        $("#canvas").height() * 1.25
    );
});
Run Code Online (Sandbox Code Playgroud)

$("#zoomout").click(function() {
    $("#canvas").width(
        $("#canvas").width() * 0.8
    );

    $("#canvas").height(
        $("#canvas").height() * 0.8
    );
});
Run Code Online (Sandbox Code Playgroud)

其中#canvas是包含画布的div的id.此代码工作正常,但实际上放大和缩小,但是这会导致一个问题,当我想要抓住和画布上的对象四处移动,捕捉区域是不是该对象是可见的,当我放大,捕捉区域结果将移动到可见对象的左上角,当我缩小结果时,结果将移动到右下角.

为了解释,这是缩小后发生的情况 在此输入图像描述

有没有办法使捕捉区域与所示对象的位置一致?

有没有更好的方法来实现缩放功能?

canvas zoom fabricjs

3
推荐指数
2
解决办法
9389
查看次数

标签 统计

canvas ×1

fabricjs ×1

zoom ×1