Question

任务是创建绘图应用程序。如果激活了Fabric的绘制模式，并且尝试使用Hammer.js的Pinch事件进行捏合，则会出现一个奇怪的工件，当我在画布上调用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. 
    }
  });

如果我尝试从画布上获取所有对象，则错误的不需要的项目将不会显示：

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

FabricJS绘图模式和Hammer.JS Pinch创建不需要的非对象

1 个答案: