Arrow не нарисован правильно на fabricJS холст

Question

Я работаю над проектом, в котором несколько видов (прямоугольник, треугольник, эллипс, ..) можно нарисовать на холсте fabricJS. Теперь я реализую функциональность, чтобы нарисовать стрелку. Эта стрелка состоит из двух форм, линии и треугольника (стрелка). Они добавляются к холсту как к групповому объекту, но проблема в том, что стрелка неправильно рисуется на холсте. (см. this picture).

Ниже мой код, чтобы нарисовать стрелку:

drawShape: function(canvas, shape) { 

     let selectedShape; 
     let pointer, startX, startY, origX, origY; 
     let rect, ellipse, line, triangle, arrow; 

     let stroke = 'black'; 
     let fill = 'transparent'; 

canvas.on('mouse:down', function(option) { 

    if(option.target != null) { 
     return; 
    } else { 

     switch(shape) 
     { 

      case 'arrow' : 

      pointer = canvas.getPointer(option.e);       
      let arrowLinePoints = [pointer.x, pointer.y, pointer.x, pointer.y]; 

      startX = pointer.x; 
      startY = pointer.y; 

      line = new fabric.Line(arrowLinePoints, { 
       top: startY, 
       left: startX, 
       fill: fill, 
       stroke: stroke, 
      }); 

      // reference points for arrowhead 
      origX = line.x2; 
      origY = line.y2; 

      let dx = line.x2 - line.x1, 
       dy = line.y2 - line.y1; 

      /* calculate angle of arrow */ 
      let angle = Math.atan2(dy, dx); 
      angle *= 180/Math.PI; 
      angle += 90; 

      arrow = new fabric.Triangle({ 
       angle: angle, 
       fill: 'black', 
       top: line.y2, 
       left: line.x2, 
       width: 1, 
       height: 1, 
       originX: 'center', 
       originY: 'center', 
       stroke: stroke 
      }); 


       let grp = new fabric.Group([line, arrow], { 
       top: startY, 
       left: startX, 
       width: 1, 
       height: 1, 
       hasBorders: true, 
       hasControls: true, 
       }); 

       selectedShape = grp; 

       break; 

     } 

     canvas.add(selectedShape); 


     canvas.on("mouse:move", function(option) { 

      switch(shape) { 

       case 'arrow' : 
        pointer = canvas.getPointer(option.e);  

        selectedShape.set({ 
         width: Math.abs(startX -pointer.x), 
         height: Math.abs(startY - pointer.y) 
        }); 
        selectedShape.setCoords();       

        line = selectedShape.item(0); 
        line.set({ 
         x2: pointer.x, 
         y2: pointer.y, 
         left: selectedShape.left, 
         top: selectedShape.top 
        }); 
        line.setCoords(); 

        let dx = line.x2 - line.x1, 
         dy = line.y2 - line.y1; 

         let angle = Math.atan2(dy, dx); 
         angle *= 180/Math.PI; 
         angle += 90; 

         arrow = selectedShape.item(1); 
         arrow.set({ 
           top: line.y2, 
           left: line.x2, 
           angle: angle, 
           width: 15, 
           height: 15 
         }); 
         arrow.setCoords(); 

         canvas.renderAll(); 

         break; 
       } 
    }); 

canvas.on('mouse:up', function() { 

    canvas.off('mouse:move');      
}); 

JSFiddle: https://jsfiddle.net/9408k1gb/

Есть ли способ исправить это? Спасибо заранее!

С наилучшими пожеланиями,

Sven

Answer 1

Я думаю, что добавление линии и стрелки в группе, а затем переместить их вокруг вызывало некоторые проблемы. Я переместил код так, чтобы стрелка и строка были объединены в группу только после того, как чертеж сделан, и это, похоже, исправить проблему. Основы того, что я был ждать, пока mouse:up события, а затем заботиться о группе, как так:

canvas.deactivateAll(); 
canvas.remove(line); 
canvas.remove(arrow); 
selectedShape = new fabric.Group([line, arrow], { 
    hasBorders: true, 
    hasControls: true, 
}); 
canvas.add(selectedShape); 

https://jsfiddle.net/9408k1gb/1/