fabricJSキャンバスで矢印が正しく描画されない

Question

私は、fabricJSキャンバスに複数の図形（四角形、三角形、楕円形など）を描画できるプロジェクトに取り組んでいます。今私は矢印を描く機能を実装しています。この矢印は、線と三角形（矢印の頭）の2つの図形で構成されています。それらはグループオブジェクトとしてキャンバスに追加されますが、矢印はキャンバス上に正しく描画されないという問題があります。 （ 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

は、私の周りにそれらを移動して、行を追加し、グループに矢印とするいくつかの問題を引き起こしていたと思います。図面が完成したら、矢と線がグループに結合されるようにコードを移動しました。それは問題を修正するように見えました。あなたはそれを作成した後、グループにsetCoordsを呼び出してみ

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/