javascript - FabricJS 绘图模式和 Hammer.JS 捏合创建不需要的非对象

Question

任务是创建一个绘图应用程序。如果 Fabric 的绘图模式已激活，并且我尝试使用 hammer.js 的 Pinch 事件进行捏合，则会出现一个奇怪的工件，当我在 Canvas 上调用 getObjects() 时它不会显示。代码如下:

  let hammer = new Hammer.Manager(this.canvas.upperCanvasEl); // Initialize hammer
  let pinch = new Hammer.Pinch(); // Initialize pinch
  hammer.add([pinch]); 

  hammer.on('pinch',  (ev) => {
    let point = new fabric.Point(ev.center.x, ev.center.y);
    let delta = this.zoom * ev.scale;

    this.canvas.zoomToPoint(point, delta);
  }); 

  this.canvas = new fabric.Canvas('c', {
        hoverCursor: 'pointer',
        selection: false,
        allowTouchScrolling: false
  }); // create the canvas

  this.canvas.setBackgroundColor('rgba(255,255,255, 1)', this.canvas.renderAll.bind(this.canvas)); // add a white background
  this.canvas.isDrawingMode = true;  // enable drawing mode


  this.canvas.on('mouse:down',  (o) => {

   if(o.e.touches && o.e.touches.length > 1) { // more than 1 finger
      this.canvas.isDrawingMode = false;   // When a mouse down event is detected - disable FreeDrawing mode. At this point the (non) object is already created. 
    }
  });

如果我尝试从 Canvas 中获取所有对象，错误不需要的项目将不会显示:

  this.canvas.getObjects().map((o)=> {
     // The items are expected here, and maybe delete the ones that have less that 3-5 polypoints .. but they do not show up. 
  });

如果您在此之后绘制任何其他内容，“点”就会消失。

视频:https://www.youtube.com/watch?v=hrxFfrQkDPU

Answer 1

在 mouse:down:before 处理程序中禁用绘图模式。

canvas.on('mouse:down:before',  (o) => {
 if(o.e.touches && o.e.touches.length > 1) { // more than 1 finger
   Instance.canvas.isDrawingMode = false;
 }
});