使用Fabric JS放大和缩小 [英] Zoom in and out with Fabric JS

问题描述

我正在使用FabricJS构建一个简单的图像编辑器。
我几乎可以做我需要做的所有事情，但问题是实现缩放功能。
据我所知，FabricJS没有任何内置功能，因此我想自己做。

I'm building a simple image editor using FabricJS. I can do almost anything I need, the problem comes implementing a zoom feature. As far as I've understood, FabricJS hasn't anything built-it, so that I'm trying to do it by myself.

我'在放大和缩小页面上分别放置了2个按钮，单击它们分别激活了jQuery功能。

I've put 2 buttons on the page "Zoom in" and "Zoom out", on click they activate a jQuery function, respectively

$("#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。
此代码可以正常工作，实际上可以放大和缩小，但是当我想在画布上的对象上抓取并移动时，这会导致问题，当我放大时捕捉区域不在可见对象的位置，捕捉区域的结果将移到可见对象的左上角，当我缩小时，捕捉的结果将移到右下角。

Where #canvas is the id of the div which contains the canvas. This code works properly, it actually zooms in and out, but that causes a problem when I want to grab and move around the objects on the canvas, the snap area is not where the object is visible, when I zoom in, the snap area results to be moved to top-left of the visible object, when I zoom out it results to be moved to the bottom-right.

这是缩小
后发生的情况

To explain, this is what happens after a zoom out

有没有办法使捕捉区域与

Is there a way to make the snap area consistent with the position of the shown object?

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

Is there a better way to implement the zooming function?

推荐答案

fabrcjs内置了自己的缩放功能。

fabrcjs has its own zooming functions built inside.

我认为通过这种方式，您可以获得元素的css缩放，但是鼠标与对象内部进行交互计算

I think that in this way you are obtaining a css zoom of the element, but mouse interaction is calculated internally with objects positions.

尝试使用fabricjs函数：

Try to use fabricjs functions:

canvas.setZoom(val);

其中 canvas 是 fabric.Canvas 对象。

要相应地调整画布的大小：

To resize the canvas accordingly:

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

这篇关于使用Fabric JS放大和缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！