CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
Armen
Armen

Reputation: 21

Fabric js with gesture how to prevent zooming on touch devices

I'm using fabric js with gestures, but i want to prevent zooming, if zoom is getting more than 4x in and less than 1x out

I've tried to call preventDefault() and stopPropogation() functions on the event, but it doesn't stop the zooming

event.e.stopPropagation();

Upvotes: 2

Views: 1871

Answers (1)

Mark
Mark

Reputation: 595

Get the deltaY & getZoom then you can limit the zoom as below.

var canvas = new fabric.Canvas('c');

var dia1 = new fabric.Circle({
  radius: 12,
  originX: 'center',
  originY: 'center',
  fill: 'transparent',
  strokeWidth: 5,
  stroke: "red",
});
var dia2 = new fabric.Circle({
  radius: 5,
  originX: 'center',
  originY: 'center',
  fill: 'red',
});
var targetEl = new fabric.Group([dia1, dia2], {
  originX: 'center',
  originY: 'center',
});
canvas.centerObject(targetEl);
canvas.add(targetEl);
canvas.renderAll();

//mouse zoom
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();
  zoom = zoom - delta / 200;
  // limit zoom to 4x in
  if (zoom > 4) zoom = 4;
  // limit zoom to 1x out
  if (zoom < 1) {
    zoom = 1;
    canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
  }
  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

//touch zoom
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;
      // limit zoom to 4x in
      if (delta > 4) delta = 4;
      // limit zoom to 1x out
      if (delta < 1) {
        delta = 1;
        canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
      }
    }
  }
});
canvas {
  border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>

<canvas id="c" width="600" height="300"></canvas>

Upvotes: 1

Related Questions