I want to draw an line arrow in my canvas aria clicking a button <button style="margin-left: 0" class="btn btn-info btn-sm" id="line-shape-arrows"> <i class="fa fa-long-arrow-right"></i> 矢印 </button>

I want to draw an line arrow in my canvas aria clicking a button <button style="margin-left: 0" class="btn btn-info btn-sm" id="line-shape-arrows"> <i class="fa fa-long-arrow-right"></i> 矢印 </button>

• javascript
• jquery
• html5-canvas
• fabricjs

2 Answers 2

I was done that using simple technique. I draw a Line than draw a Triangle after that have group Line and Triangle objects

$("#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);

    });

Below code is worked for me

var fromx, fromy, tox, toy;
      this.canvas.on('mouse:down', function (event) {
        var pointer = this.canvas.getPointer(event.e);
        fromx = pointer.x;
        fromy = pointer.y;
      });
      this.canvas.on('mouse:up', function (event) {
        var pointer = this.canvas.getPointer(event.e);
        tox = pointer.x;
        toy = pointer.y;
        //this.drawArrow(startX, startY, endX, endY);

        var angle = Math.atan2(toy - fromy, tox - fromx);

        var headlen = 10;  // arrow head size

        // bring the line end back some to account for arrow head.
        tox = tox - (headlen) * Math.cos(angle);
        toy = toy - (headlen) * Math.sin(angle);

        // calculate the points.
        var points = [
          {
            x: fromx,  // start point
            y: fromy
          }, {
            x: fromx - (headlen / 4) * Math.cos(angle - Math.PI / 2), 
            y: fromy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
          },{
            x: tox - (headlen / 4) * Math.cos(angle - Math.PI / 2), 
            y: toy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
          }, {
            x: tox - (headlen) * Math.cos(angle - Math.PI / 2),
            y: toy - (headlen) * Math.sin(angle - Math.PI / 2)
          },{
            x: tox + (headlen) * Math.cos(angle),  // tip
            y: toy + (headlen) * Math.sin(angle)
          }, {
            x: tox - (headlen) * Math.cos(angle + Math.PI / 2),
            y: toy - (headlen) * Math.sin(angle + Math.PI / 2)
          }, {
            x: tox - (headlen / 4) * Math.cos(angle + Math.PI / 2),
            y: toy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
          }, {
            x: fromx - (headlen / 4) * Math.cos(angle + Math.PI / 2),
            y: fromy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
          },{
            x: fromx,
            y: fromy
          }
        ];

        var pline = new fabric.Polyline(points, {
          fill: color, //'white',
          stroke: color, //'black',
          opacity: 1,
          strokeWidth: 1,
          originX: 'left',
          originY: 'top',
          selectable: true
        });

        this.add(pline);

        this.isDown = false;
        this.off('mouse:down').off('mouse:move').off('mouse:up')

        this.renderAll(); 
      });