Fabricjs缩放后画布重置

Question

我有一个fabricjs画布，我需要能够对其进行缩放，并且可以多次更改其中的图像/对象。

为此，我第一次加载页面时设置了画布，如下所示：

fabric.Object.prototype.hasBorders = false;
fabric.Object.prototype.hasControls = false;

canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false});

canvas.defaultCursor = "pointer";
canvas.backgroundImageStretch = false;
canvas.selection = false;
canvas.clear();

var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}
canvas.deactivateAll().renderAll();

然后当我需要在画布中更改图像/对象或页面重新加载时，我尝试像这样重置画布：

canvas.clear();
canvas.remove(canvas.getActiveObject());
var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}

不确定是否重要，但我改变图像的方式是通过更改“my_image”中的源并使用上述方法重置画布。

这很有效，直到我使用canvas.zoomToPoint时，根据此线程，在此之后，当我重置缩放或在缩放时用鼠标单击画布时，图像/对象开始改变位置，似乎在左上角方向的每次变化中跳跃，最终从视图中消失。

重置缩放：

canvas.setZoom(1);
resetCanvas(); //(above method)

如何恢复图片/物体的位置？

我尝试了进行初始设置而非重置，视觉效果似乎可以，但实际上每次新设置都会增加一个新的上层画布，所以这样做是不好的。

有没有一种方法可以在不引起这种行为的情况下将画布重置为原始状态，并且仍然能够正确地缩放？

- Mikel

Answer 1

虽然这个问题很老，但是我使用当前版本的 fabric.js 2.2.4 做了以下操作：

canvas.setViewportTransform([1,0,0,1,0,0]); 

提供信息：缩放到某一点是视口转换的重新计算。上述矩阵即为初始视口变换矩阵。

- Tom-Steve Watzke

Answer 2

我最终解决了我遇到的问题。

为了重置缩放，不仅要使用canvas.setZoom(1)将缩放设置为1，还要重新应用canvas.zoomToPoint方法到相同的点，但缩放为1，以强制初始缩放，但考虑到与用于缩放的相同点。

至于在画布中恢复图像位置的问题（例如，平移后），只需删除图像，将其居中在画布中并重新添加到画布中，就像第一次添加时所做的那样。

  var img = canvas.getActiveObject();
  canvas.remove(img);
  canvas.centerObject(img);
  canvas.setActiveObject(img);
  canvas.add(img);

  canvas.renderAll();

- Mikel

Answer 3

请看下面的代码片段 - 在这里我做了同样的事情 - 一起缩放，但在某人点击它时取消组合对象。

获取原始对象属性的问题可以通过解组组并创建它们的副本并重新附加来解决 - 这有点烦人，但是我找到的唯一解决方案。

<script id="main">      
    // canvas and office background
                var mainGroup;
                var canvas = this.__canvas = new fabric.Canvas('c');
                fabric.Object.prototype.transparentCorners = false;
                fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

                createOnjects(canvas);

                // events - zoom
                $(canvas.wrapperEl).on('mousewheel', function(e) {
                    var target = canvas.findTarget(e);
                    var delta = e.originalEvent.wheelDelta / 5000;
                    if (target) {
                        target.scaleX += delta;
                        target.scaleY += delta;

                        // constrain
                        if (target.scaleX < 0.1) {
                            target.scaleX = 0.1;
                            target.scaleY = 0.1;
                        }
                        // constrain
                        if (target.scaleX > 10) {
                            target.scaleX = 10;
                            target.scaleY = 10;
                        }
                        target.setCoords();
                        canvas.renderAll();
                        return false;
                    }
                });
                // mouse down
                canvas.on('mouse:up', function(options) {
                    if (options.target) {
                        var thisTarget = options.target; 
                        var mousePos = canvas.getPointer(options.e);
                        if (thisTarget.isType('group')) {
                            // unGroup
                            console.log(mousePos);
                            var clone = thisTarget._objects.slice(0);
                            thisTarget._restoreObjectsState();

                            for (var i = 0; i < thisTarget._objects.length; i++) {
                                var o = thisTarget._objects[i];
                                if (o._element.alt == "officeFloor")
                                    continue;
                                else {
                                    if (mousePos.x >= o.originalLeft - o.currentWidth / 2 && mousePos.x <= o.originalLeft + o.currentWidth / 2
                                        && mousePos.y >= o.originalTop - o.currentHeight / 2 && mousePos.y <= o.originalTop + o.currentHeight / 2)
                                        console.log(o._element.alt);
                                }
                            }

                            // remove all objects and re-render
                            canvas.remove(thisTarget);
                            canvas.clear().renderAll();             
                            var group = new fabric.Group();
                            for (var i = 0; i < clone.length; i++) {
                                group.addWithUpdate(clone[i]);
                            }
                            canvas.add(group);
                            canvas.renderAll();
                        }    
                    }
                });
                // functions
                function createOnjects(canvas) {
                    // ToDo: jQuery.parseJSON() for config file (or web service)
                    fabric.Image.fromURL('pics/OfficeFloor.jpg', function(img) {
                    var back = img.set({ left: 100, top: 100 });
                    back._element.alt = "officeFloor";
                    back.hasControls = false;
                    fabric.Image.fromURL('pics/me.png', function(img) {
                    var me = img.set({ left: -420, top: 275 });
                    me._element.alt = "me";
                    console.log(me);
                    var group = new fabric.Group([ back, me], { left: 700, top: 400, hasControls: false });
                    canvas.clear().renderAll();
                    canvas.add(group);
                    // remove all objects and re-render

                    });             
                });
                }
        </script>

- user1894694

---

我在画布中只有一个对象，没有群组。 - Mikel