如何用fabric.js知道箭头尖端的方向？

Question

这是创建箭头的代码：

在开始或对箭头进行一些变换时，我需要检测箭头指向的方向

var Arrow = Fabric.util.createClass(Fabric.Line, Fabric.Observable, {
    type: 'arrow',
    positionArrow: 'rt',

    initialize: function (points, options) {
        this.callSuper('initialize', points, options);
        this.on('modified', function() {
            console.log(this.toObject())
        });
    },

    _render: function(ctx, noTransform) {
        this._setStrokeStyles(ctx);
        this._drawArrowHead(ctx);
        this.callSuper('_render', ctx, noTransform);
    },

    _drawArrowHead: function(ctx) {
        var p = this.calcLinePoints();
        var rot = Math.atan2(p.y2, p.x2);

        ctx.save();
        ctx.beginPath();
        ctx.translate(p.x1, p.y1);
        ctx.moveTo(0, 0);
        ctx.rotate(rot);
        ctx.lineTo(15, 7);
        ctx.lineTo(3, 0);
        ctx.lineTo(15, -7);
        ctx.lineTo(0, 0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    },

     _setStrokeStyles: function(ctx) {
         if (this.stroke) {
             ctx.lineWidth = this.strokeWidth;
             ctx.lineCap = this.strokeLineCap;
             ctx.lineJoin = this.strokeLineJoin;
             ctx.miterLimit = this.strokeMiterLimit;
             ctx.strokeStyle = this.stroke.toLive ? this.stroke.toLive(ctx) : this.stroke;
         }
     }
});

我已经在初始化中转换对象时添加了一个观察者，但是我找到了知道箭头指向哪个位置的方法。

Answer 1

如果您知道应该将画布旋转多少来绘制箭头，您还应该能够重用该代码并添加对象角度来获得完整角度。

fabric.Arrow = fabric.util.createClass(fabric.Line, {
    type: 'arrow',
    positionArrow: 'rt',

    initialize: function (points, options) {
        this.callSuper('initialize', points, options);
        this.on('modified', function() {
          var p = this.calcLinePoints();
          var rot = Math.atan2(p.y2, p.x2);
          var rotDeg = fabric.util.radiansToDegrees(rot);
          console.log(this.angle + rotDeg)
        });
    },

    _render: function(ctx) {
        this.callSuper('_render', ctx);
        this._setStrokeStyles(ctx);
        this._drawArrowHead(ctx);
    },

    _drawArrowHead: function(ctx) {
        var p = this.calcLinePoints();
        var rot = Math.atan2(p.y2, p.x2);

        ctx.save();
        ctx.beginPath();
        ctx.translate(p.x1, p.y1);
        ctx.moveTo(0, 0);
        ctx.rotate(rot);
        ctx.lineTo(15, 7);
        ctx.lineTo(3, 0);
        ctx.lineTo(15, -7);
        ctx.lineTo(0, 0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    },

     _setStrokeStyles: function(ctx) {
         if (this.stroke) {
             ctx.lineWidth = this.strokeWidth;
             ctx.lineCap = this.strokeLineCap;
             ctx.lineJoin = this.strokeLineJoin;
             ctx.miterLimit = this.strokeMiterLimit;
             ctx.strokeStyle = this.stroke.toLive ? this.stroke.toLive(ctx) : this.stroke;
         }
     }
});

var canvas = new fabric.Canvas('c');
var arrow = new fabric.Arrow([10,10, 70,20]);
canvas.add(arrow);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<canvas id="c" width="300" height="300" ></canvas>