计算偏移箭头尖端与箭头线 FabricJS

Question

我正在尝试制作一个函数，让您可以在画布上实时绘制箭头。到目前为止我所做的是工作，但我被困在移动时将箭头尖端固定到线末端的计算。我附上了一张图片以显示角度计算正确。

我只需要移动小费，但我想不通。非常感谢您的帮助！

PS：提示是路径，但也许有更好的解决方案？

function drawArrowMouseDown( e ) {
    var mouse = canvas.getPointer(e.e);
    started = true;
    lastX = mouse.x;
    lastY = mouse.y;

    var $color = colors[self.selectedColor] != undefined ? colors[self.selectedColor] : 'red';

    var line = new fabric.Line( [lastX,lastY,lastX,lastY], {
        stroke: $color,
        strokeWidth:  3,
        lockScalingX: true,
        lockScalingY: true,
        lockRotation: true,
        hasBorders:   false,
        hasControls:  false,
        perPixelTargetFind: true,
        fill:         $color,
        strokeLineCap: 'round'
    });
    line.lockScalingX = line.lockScalingY = true;

    var tip = new fabric.Path('M 0 0 L -20 15 M 0 0 L 20 15 z', {
        left: lastX,
        top: lastY,
        strokeWidth: 3,
        stroke: 'blue',
        strokeLineCap: 'round',
        hasControls: false,
        originX: 'center',
        originY: 'center'
    });

    tip.line = line;
    line.tip = tip;

    canvas.add(line);
    canvas.add(tip);

    tip.bringToFront();

    canvas.setActiveObject(line);
    canvas.renderAll();
}
function drawArrowMouseMove( e ) {
    if(!started) {
        return false;
    }
    var mouse = canvas.getPointer(e.e);

    var line = canvas.getActiveObject();
    line.set('x2', mouse.x).set('y2', mouse.y);
    line.setCoords();

    var tip = line.get('tip');
    tip.set({ x1: mouse.x, y1: mouse.y, x2: lastX, y2: lastY });

    var x = tip.get('x2') - tip.get('x1');
    var y = tip.get('y2') - tip.get('y1');

    var angle;
    if (x == 0) {
        if (y == 0) {
            angle = 0;
        }
        else if (y > 0) {
            angle = Math.PI / 2;
        }
        else {
            angle = Math.PI * 3 / 2;
        }
    }
    else if (y == 0) {
        if (x > 0) {
            angle = 0;
        }
        else {
            angle = Math.PI;
        }
    }
    else {
        if (x < 0) {
            angle = Math.atan(y / x) + Math.PI;
        }
        else if ( y < 0) {
            angle = Math.atan(y / x) + (2 * Math.PI);
        }
        else {
            angle = Math.atan(y / x);
        }
    }
    angle = angle * 180 / Math.PI;

    tip.set('angle', angle-90);

    canvas.renderAll();
}

Answer 1

你的角度计算有点偏差。

改为使用 atan2 并将结果归一化为 PI*2：

var dx = tip.get('x2') - tip.get('x1');

var dy = tip.get('x2') - tip.get('x1');

var PI2=Math.PI*2;

var radianAngle = ( Math.atan2(dy,dx)+PI2 ) % PI2;