使用Fabric JS放大和缩小

Question

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

我在页面上放了2个按钮＆＃34;放大＆＃34;和＆＃34;缩小＆＃34;，点击它们分别激活一个jQuery函数

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

    $("#canvas").height(
        $("#canvas").height() * 1.25
    );
});

和

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

    $("#canvas").height(
        $("#canvas").height() * 0.8
    );
});

其中#canvas是包含画布的div的id。 这段代码工作正常，它实际上放大和缩小，但是当我想抓住并在画布上移动对象时，这会导致问题，当我放大时，捕捉区域不是对象可见的区域，快照区域结果将移动到可见对象的左上角，当我缩小结果时，结果将移动到右下角。

要解释一下，缩小后会发生这种情况

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

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

Answer 1

fabrcjs内置了缩放功能。

我认为通过这种方式你可以获得元素的css缩放，但鼠标交互是在内部用对象位置计算的。

尝试使用fabricjs函数：

canvas.setZoom(val);

其中canvas是fabric.Canvas对象。

相应地调整画布大小：

canvas.setWidth(originalWidth * canvas.getZoom());
canvas.setHeight(originalHeight * canvas.getZoom());

Answer 2

您可以尝试以下代码。

canvas.renderAll();
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" ;
document.addEventListener(mousewheelevt, function(e){
    if(e.detail<0){
        //canvas.setZoom(canvas.getZoom() * 1.1 );
        canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() * 1.1);
    }
    else{
        //canvas.setZoom(canvas.getZoom() / 1.1 );
        canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() / 1.1);
    }
}, false);

希望它对你有用。

Answer 3

FileUtils.cp

看看下面的小提琴：- https://jsfiddle.net/ximihoque/6ys3quL8/

我已经通过具有以下功能的公共网址在图像上演示了绘图对象：-
1.绘制边界框
2.只需按下的'
，即可拖动并移动 3.通过“删除”键删除该框
4. 缩放和平移，使用鼠标滚轮/滚动键

参考文献：-
1. http://fabricjs.com/fabric-intro-part-5
2. http://fabricjs.com/fabric-intro-part-1