Can't use touch gestures even with custom FabricJS builds

Question

I've been trying to get a FabricJs canvas work with multitouch pan and zoom, but to no avail. I've tried countless custom builds but the event doesn't have any touch information to work on. Here's the code I use:

              let fabricCanvas = new fabric.Canvas('myCanvas', {
                width: canvasContainer.current.offsetWidth,
                height: canvasContainer.current.offsetHeight,
                isDrawingMode: true
              })
              fabricCanvas.on({
                'touch:gesture': function(e) {
                  console.log(e) // returns empty object wen fired with fabricCanvas.fire("touch:gesture")
                }
              });
              fabricCanvas.fire("touch:gesture") // I can only make the listener fire, by doing this

How can I make the gestures provided work normally?

Answer 1

If you look at the library code, there's a line preventing gesture event being fired when isDrawingMode is true.

in /src/mixins/canvas_gestures.mixin.js

__onTransformGesture: function(e, self) {

      if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) {
        return;
      }

      var target = this.findTarget(e);
      if ('undefined' !== typeof target) {
        this.__gesturesParams = {
          e: e,
          self: self,
          target: target
        };

        this.__gesturesRenderer();
      }

      this.fire('touch:gesture', {
        target: target, e: e, self: self
      });
    },

I'm also trying to use gesture with drawingMode and don't know why it prevents gesture on drawingMode.

Currently, I'm trying to use a custom build with modified source code.

Or you can try not to use isDrawingMode and use mouse events to implement freedraw