javascript - Fabric js与手势如何防止触摸设备上的缩放

Question

我正在使用带有手势的 Fabric js，但如果缩放超过 4 倍且小于 1 倍，我想防止缩放

我尝试在事件上调用 preventDefault() 和 stopPropogation() 函数，但它不会停止缩放

event.e.stopPropagation();

Answer 1

获取deltaY和getZoom然后您可以如下限制缩放。

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>