FabricJS Сенсорное панорамирование/масштабирование всего холста

Щепотка для увеличения была глупой ошибкой, я не включил событие в параметр функции. Приведенный ниже код работает для сжатия/масштабирования и нажатия/перетаскивания.

    canvas.on({
        'touch:gesture': function(e) {
            if (e.e.touches && e.e.touches.length == 2) {
                pausePanning = true;
                var point = new fabric.Point(e.self.x, e.self.y);
                if (e.self.state == "start") {
                    zoomStartScale = self.canvas.getZoom();
                }
                var delta = zoomStartScale * e.self.scale;
                self.canvas.zoomToPoint(point, delta);
                pausePanning = false;
            }
        },
        'object:selected': function() {
            pausePanning = true;
        },
        'selection:cleared': function() {
            pausePanning = false;
        },
        'touch:drag': function(e) {
            if (pausePanning == false && undefined != e.e.layerX && undefined != e.e.layerY) {
                currentX = e.e.layerX;
                currentY = e.e.layerY;
                xChange = currentX - lastX;
                yChange = currentY - lastY;

                if( (Math.abs(currentX - lastX) <= 50) && (Math.abs(currentY - lastY) <= 50)) {
                    var delta = new fabric.Point(xChange, yChange);
                    canvas.relativePan(delta);
                }

                lastX = e.e.layerX;
                lastY = e.e.layerY;
            }
        }
    });

Абсолютное выражение ~50px if/then позволяет избежать перетаскивания далеко от последней точки, что приводит к прыжку холста. Также приостановлено панорамирование, чтобы иметь возможность перемещать объект независимо. Код Pinch/Zoom был найден в ветке проблем github.

У меня возникли проблемы с тем, чтобы панорамирующая часть кода Лоренса работала на Fabric 2.3.3. Поэтому, если кто-то столкнется с той же проблемой, я хотел бы поделиться своим решением.

Моя проблема заключалась в том, что я не мог заставить работать панорамирование на своем смартфоне, хотя оно работало на ПК. После некоторой отладки я обнаружил, что могу решить эту проблему, заменив e.e.layerX на e.self.x (и e.e.layerY на e.self.y).

Вот полный измененный код:

canvas.on({
    'touch:gesture': function(e) {
        if (e.e.touches && e.e.touches.length == 2) {
            pausePanning = true;
            var point = new fabric.Point(e.self.x, e.self.y);
            if (e.self.state == "start") {
                zoomStartScale = canvas.getZoom();
            }
            var delta = zoomStartScale * e.self.scale;
            canvas.zoomToPoint(point, delta);
            pausePanning = false;
        }
    },
    'object:selected': function() {
        pausePanning = true;
    },
    'selection:cleared': function() {
        pausePanning = false;
    },
    'touch:drag': function(e) {
        if (pausePanning == false && undefined != e.self.x && undefined != e.self.x) {
            currentX = e.self.x;
            currentY = e.self.y;
            xChange = currentX - lastX;
            yChange = currentY - lastY;

            if( (Math.abs(currentX - lastX) <= 50) && (Math.abs(currentY - lastY) <= 50)) {
                var delta = new fabric.Point(xChange, yChange);
                canvas.relativePan(delta);
            }

            lastX = e.self.x;
            lastY = e.self.y;
        }
    }
});}

Мне удалось добиться мультисенсорного панорамирования и масштабирования с помощью события mouse:wheel.

При масштабировании щипком — в большинстве браузеров обычно также выдается кнопка ctrl, чтобы отличить операцию прокрутки от операции прокрутки.

Затем я использую свойства DeltaX и DeltaY события Fabric для масштабирования или панорамирования, как в sample код, который они предоставили.

Каждое место, которое я называю setState ниже, должно быть переменной вне функции, если вы не используете React.

    this.canvas.on("mouse:wheel", opt => {
      if (!this.canvas.viewportTransform) {
        return;
      }

      var evt: any = opt.e;
      if (evt.ctrlKey === true) {
        var evt: any = opt.e;
        var deltaY = evt.deltaY;
        var zoom = this.canvas.getZoom();
        zoom = zoom - deltaY / 100;
        if (zoom > 20) zoom = 20;
        if (zoom < 0.01) zoom = 0.01;
        this.canvas.zoomToPoint(
          new fabric.Point(evt.offsetX, evt.offsetY),
          zoom
        );
      } else {
        console.log("Scrolling!!");

        //inverted scrolling enabled. Remove the -1 multiplier to disable

        this.canvas.viewportTransform[4] += (evt.deltaX)*-1; 
        this.canvas.viewportTransform[5] += (evt.deltaY)*-1;
        this.canvas.requestRenderAll();
        this.setState({ lastPosX: evt.clientX });
        this.setState({ lastPosY: evt.clientY });
      }
      opt.e.preventDefault();
      opt.e.stopPropagation();
    });