Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi touch #10

Open
wojtek-krysiak opened this issue Oct 27, 2014 · 3 comments
Open

Multi touch #10

wojtek-krysiak opened this issue Oct 27, 2014 · 3 comments

Comments

@wojtek-krysiak
Copy link
Contributor

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
Copy link
Contributor

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

@wojtek-krysiak
Copy link
Contributor Author

yes , please

@cmawhorter
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants