我想在我的画布上添加箭头 - 用户点击画布，织物画线三角形 . 然后，当用户移动鼠标线“移动”并且箭头角度改变时 . 鼠标移动时“绘图模式”结束 . 这很有效，但位置和选择区域是错误的 .

我写的是鼠标：向下：

// Draw new arrow using move
    canvas.fabric.on('mouse:down', function(options){


        $scope.lineOptions = {
            stroke: '#000',
            selectable: true,
            strokeWidth: '2',
            padding: 5,
            hasBorders: false,
            hasControls: false,
            //originX: 'top',
            //originY: 'left',
            lockScalingX: true,
            lockScalingY: true
        };

        var zoomFactor = Math.pow(canvas.currentZoom, -1);
        var x = (options.e.clientX - canvas.fabric._offset.left) * zoomFactor;
        var y = (options.e.clientY - canvas.fabric._offset.top) * zoomFactor;


        var points = [ 0, 0, 0, 0 ];

        temp_line = new fabric.Line(points, $scope.lineOptions);
        temp_arrow = new fabric.Triangle({
            left: x,
            top: y,
            angle: -45,
            originX: 'center',
            originY: 'center',
            width: 20,
            height: 20,
            fill: '#000'
        });

        arrowShape = new fabric.Group([ temp_line, temp_arrow ], {
            left: x,
            top: y
        });
        canvas.fabric.add(arrowShape);
    });

缩放系数在这里可以忽略不计 . 有鼠标代码：move：

canvas.fabric.on('mouse:move', function(o){

        var pointer = canvas.fabric.getPointer(o.e);
        arrowShape.item(0).set({ x2: pointer.x, y2: pointer.y });
        arrowShape.item(1).set({ left: pointer.x, top: pointer.y });

        x1 = arrowShape.item(0).get('x1');
        y1 = arrowShape.item(0).get('y1');
        x2 = arrowShape.item(0).get('x2');
        y2 = arrowShape.item(0).get('y2');

        angle = calcArrowAngle(x1, y1, x2, y2);

        arrowShape.item(1).set('angle', angle + 90);

        //arrowShape.item(0).setCoords();
        //arrowShape.item(1).setCoords();
        //arrowShape.setCoords();

        canvas.fabric.renderAll();
    });

    function calcArrowAngle(x1, y1, x2, y2) {
        var angle = 0,
            x, y;

        x = (x2 - x1);
        y = (y2 - y1);

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

        return (angle * 180 / Math.PI);
    }

对于鼠标：向上：

canvas.fabric.on('mouse:up', function(o){
        canvas.fabric.setActiveObject(arrowShape);

        // My drawing mode
        $scope.drawMode = false;
    });

添加效果很好，改变方向效果很好，改变角度很好......但是组选择和行起点错误：

Invalid selection

OriginX / originY是默认值，因此它们应该是top / left ..但是不是 . 此外，组选择区域错误，对于两种形状都太小 . 我忘了什么......但是关于什么？

javascript canvas fabricjs