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/

이 문제를 해결하는 방법이 있나요 아래

내 코드가있는 화살표를 그릴 수있다? 미리 감사드립니다.

종류와 관련,

스벤

Answer 1

나는 주위를 이동 행을 추가하고 그룹에 화살표를하는 몇 가지 문제를 야기되었다고 생각합니다. 드로잉이 끝나면 화살표와 선만 그룹으로 합쳐져서 문제를 해결하는 것처럼 보였습니다.

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/