Canvas 使用Fabric JS进行放大和缩小

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

我在“放大”和“缩小”页面上放置了两个按钮，单击它们可以分别激活jQuery功能

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

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

及

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

为了解释，这是缩小后发生的情况

是否有方法使捕捉区域与所示对象的位置一致

---

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

FABCJS内置了自己的缩放功能

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

尝试使用fabricjs函数：

canvas.setZoom(val);

其中

canvas

是

fabric.canvas

对象

要相应调整画布的大小，请执行以下操作：

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

---

您可以尝试下面的代码

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);

canvas.renderAll（）；
var mouseweelevt=（/Firefox/i.test（navigator.userAgent））？“鼠标滚轮”：“鼠标滚轮”；
文件.添加的文件列表器（mousewheelevt，函数（e）{
如果（e.detail
fabric.Image.fromURL（'http://i.imgur.com/8rmMZI3.jpg，函数（oImg）{
oImg.selective=false；
oImg.id=‘图像’；
canvas.add（oImg）；
});
canvas.on（'mouse:wheel'，函数（opt）{
var delta=选择e deltaY；
var pointer=canvas.getPointer（opt.e）；
var zoom=canvas.getZoom（）；
缩放=缩放+增量/200；
如果（缩放>20）缩放=20；
如果（缩放<0.01）缩放=0.01；
zoomToPoint（{x:opt.e.offsetX，y:opt.e.offsetY}，zoom）；
opt.e.preventDefault（）；
选择e.停止播放（）；
});

请看一下以下小提琴：-

我已经演示了通过公共url在图像上绘制对象，并具有以下功能：-

1.绘制边界框
2.通过简单的按键's'

3.按“删除”键删除框

4.使用鼠标滚轮/滚动缩放和平移

参考资料：-

1.

2.
你说得对，我已经尝试过，setZoom（）函数工作正常，但是画布内容超过了包含它的div，因此我认为我还需要调整div和画布的大小。我会尝试一下。不要调整div的大小，使用canvas.setWidth（）和canvas.setHeight（）调整画布的大小
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);

fabric.Image.fromURL('http://i.imgur.com/8rmMZI3.jpg', function(oImg) {
  oImg.selectable = false;
  oImg.id = 'image';
  canvas.add(oImg);
});

canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();
  zoom = zoom + delta/200;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});