SoftwareBrothers / fabricjs-viewport

allows zooming and viewport manipulation in fabricjs
MIT License
128 stars 28 forks source link

Multi touch #10

Open wojtek-krysiak opened 9 years ago

wojtek-krysiak commented 9 years ago

Are (multi-)touch gestures for canvas zoom & pan already supported?

Pan canvas (canvas is larger than screen) Zoom canvas with pinch-to-zoom gesture Both gestures are 1-2 finger gestures supported by the already integrated gestures module & event.js

cmawhorter commented 9 years ago

i implemented this outside of fabricjs-viewport using hammer. i can post, if interested

wojtek-krysiak commented 9 years ago

yes , please

cmawhorter commented 9 years ago

I used Hammer 1.x because I had some blocker with 2. There is definitely room for improvement.

I chose not to implement pan, but it should be relatively easy with hammer.

    var gestureTransformActive = false; // used to disable long-tap context menu
    $(document).on('transform', $.throttle(50, function(evt) {
      console.log('document:transform', evt);
      var $this = $(this)
        , canvas = stage.getActiveCanvas();

      $(document).trigger('dragcancel');
      gestureTransformActive = true;

      if (stage.selectionActive()) {
        var selection = canvas.getActiveGroup() || canvas.getActiveObject();
        selection.scale(evt.gesture.scale);
        selection.set('angle', evt.gesture.rotation);
      }
      else canvas.setZoom(evt.gesture.scale);

      $(document).one('transformend', function(evt) {
        gestureTransformActive = false;
      });
    }));