ファブリックjsを使用してキャンバスに線の矢印を描くにはどうすればよいですか？

Question

私は、私は単純な技術を使用していることを行われたボタン <button style="margin-left: 0" class="btn btn-info btn-sm" id="line-shape-arrows"> <i class="fa fa-long-arrow-right"></i> 矢印 </button>

Answer 1

をクリックアリア私のキャンバスでのライン矢印を描きたいです。私はグループのラインを持った後、トライアングルを描くよりも、線を引くとトライアングルはあなたが解決をしたいか、これはあなたの答えです

$("#line-shape-arrows").on("click", function(event){ 
     event.preventDefault(); 
     var triangle = new fabric.Triangle({ 
      width: 10, 
      height: 15, 
      fill: 'red', 
      left: 235, 
      top: 65, 
      angle: 90 
     }); 

     var line = new fabric.Line([50, 100, 200, 100], { 
      left: 75, 
      top: 70, 
      stroke: 'red' 
     }); 

     var objs = [line, triangle]; 

     var alltogetherObj = new fabric.Group(objs); 
     canvas.add(alltogetherObj); 

    });