javascript - Fabric.js 中断功能不起作用

Question

我正在使用 Fabric js 创建圆圈和箭头。如果我单击单选箭头按钮，我可以用鼠标绘制一个箭头，与圆形按钮相同。

圆形按钮工作正常，但如果我更改为箭头按钮，它会绘制一个圆形+箭头，我不明白为什么会发生这种情况。

我的 HTML 代码:

    <label class="btn btn-default btn-lg">
        <input type="radio" name="drawing-shape" id="drawing-arrow-shape">
        <i class="glyphicon glyphicon-arrow-right"></i>
    </label>
    <label class="btn btn-default btn-lg">
        <input type="radio" name="drawing-shape" id="drawing-circle-shape">
        <i class="glyphicon glyphicon-record"></i>
    </label>      

这是我的 js 函数:

    drawingCircle.change = function() {
        canvas.isCircleMode  = true;
        canvas.isArrowMode   = false;
        canvas.isDrawingMode = false;
        if (canvas.isCircleMode) {
            currentShapeName.innerHTML = 'Circle';
            drawCircle(true);
            drawArrow(false);
        }
    };

    drawingArrow.change = function() {
        canvas.isArrowMode = true;
        canvas.isCircleMode = false;
        canvas.isDrawingMode = false;
        if (canvas.isArrowMode) {
            currentShapeName.innerHTML = 'Arrow';
            state = true;
            drawCircle(false);
            drawArrow(state, 100, 100, 150, 150);
            if(state) {
                var startX, startY, endX, endY;
                canvas.on('mouse:down', function() {
                    var pointer = canvas.getPointer(event.e);
                    startX = pointer.x;
                    startY = pointer.y;
                });
                canvas.on('mouse:up', function() {
                    var pointer = canvas.getPointer(event.e);
                    endX = pointer.x;
                    endY = pointer.y;
                    drawArrow(true, startX, startY, endX, endY);
                });
            } else {
                return;
            }
        }
    };

    function drawCircle(go) {
        var circle, isDown, origX, origY;
        if (go == false) {
            console.log("circle false!!");
            isDown = false;
            return;
        }
        if($('#drawing-circle-shape').is(':checked')) {
            console.log("circle checked");
            canvas.on('mouse:down', function(o) {
                isDown = true;
                var pointer = canvas.getPointer(o.e);
                origX = pointer.x;
                origY = pointer.y;
                circle = new fabric.Circle({
                    left: origX,
                    top: origY,
                    originX: 'left',
                    originY: 'top',
                    radius: pointer.x - origX,
                    angle: 0,
                    fill: '',
                    stroke: 'red',
                    strokeWidth: 3,
                });
                canvas.add(circle);
            });
            canvas.on('mouse:move', function(o) {
                if (!isDown) return;
                var pointer = canvas.getPointer(o.e);
                var radius = Math.max(Math.abs(origY - pointer.y), Math.abs(origX - pointer.x)) / 2;
                if (radius > circle.strokeWidth) {
                    radius -= circle.strokeWidth / 2;
                }
                circle.set({
                    radius: radius
                });
                if (origX > pointer.x) {
                    circle.set({
                        originX: 'right'
                    });
                } else {
                    circle.set({
                        originX: 'left'
                    });
                }
                if (origY > pointer.y) {
                    circle.set({
                        originY: 'bottom'
                    });
                } else {
                    circle.set({
                        originY: 'top'
                    });
                }
                canvas.renderAll();
            });
            canvas.on('mouse:up', function(o) {
                isDown = false;
            });
        } else {
            return;
        }
    }

    function drawArrow(go, fromx, fromy, tox, toy) {
        if (go == false) {
            console.log("arrow false");
            return;
        }
        if($('#drawing-arrow-shape').is(':checked')) {
            var angle = Math.atan2(toy - fromy, tox - fromx);
            var headlen = 15; // 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: 'black',
                stroke: 'black',
                opacity: 1,
                strokeWidth: 2,
                originX: 'left',
                originY: 'top',
                selectable: true
            });
            canvas.add(pline);
            canvas.renderAll();
        } else {
            return;
        }

Answer 1

<强> DEMO

var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
canvas.perPixelTargetFind = true;

var isDown, circle = null;

function changeSelection() {
    canvas.selection != canvas.selection;
    changeSelectionObj(true);
    unRegisterEvent();
}

function unRegisterEvent() {
    canvas.off('mouse:down', onCircleMouseDown);
    canvas.off('mouse:move', onCircleMouseMove);
    canvas.off('mouse:up', onCircleMouseUp);
    canvas.off('mouse:down', onArrowMouseDown);
    canvas.off('mouse:move', onArrowMouseMove);
    canvas.off('mouse:up', onArrowMouseUp);
}

function changeSelectionObj(val) {
    canvas.forEachObject(
        function(obj) {
            obj['selectable'] = val;
            obj.setCoords();
        });
    canvas.renderAll();
}

function drawArrow() {
    canvas.off('mouse:down', onCircleMouseDown);
    canvas.off('mouse:move', onCircleMouseMove);
    canvas.off('mouse:up', onCircleMouseUp);
    canvas.on('mouse:down', onArrowMouseDown);
    canvas.on('mouse:move', onArrowMouseMove);
    canvas.on('mouse:up', onArrowMouseUp);
    changeSelectionObj(false);
}

function drawCircle() {
    canvas.on('mouse:down', onCircleMouseDown);
    canvas.on('mouse:move', onCircleMouseMove);
    canvas.on('mouse:up', onCircleMouseUp);
    canvas.off('mouse:down', onArrowMouseDown);
    canvas.off('mouse:move', onArrowMouseMove);
    canvas.off('mouse:up', onArrowMouseUp);
    changeSelectionObj(false);
}

function onArrowMouseDown(o) {
    var pointer = canvas.getPointer(o.e);
    startX = pointer.x;
    startY = pointer.y;
}

function onArrowMouseUp(o) {
    var pointer = canvas.getPointer(o.e);
    endX = pointer.x;
    endY = pointer.y;
    showArrow(startX, startY, endX, endY);
}

function onArrowMouseMove(e) {

}

function onCircleMouseDown(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    if (!circle) {
        circle = new fabric.Circle({
            left: origX,
            top: origY,
            originX: 'center',
            originY: 'center',
            radius:0,
            fill: '',
            stroke: 'red',
            strokeWidth: 3,
            selectable: false
        });
        canvas.add(circle);
    }
}

function onCircleMouseMove(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    circle.set({
        radius: Math.sqrt(Math.pow((origX - pointer.x), 2) + Math.pow((origY - pointer.y), 2))
    });
    canvas.renderAll();
}

function onCircleMouseUp(o) {
    isDown = false;
    circle = null;
}

function showArrow(fromx, fromy, tox, toy) {

    var angle = Math.atan2(toy - fromy, tox - fromx);
    var headlen = 15; // 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: 'black',
        stroke: 'black',
        opacity: 1,
        strokeWidth: 2,
        originX: 'left',
        originY: 'top',
        selectable: false
    });
    canvas.add(pline);
    canvas.renderAll();
}

canvas {
    border: 2px dotted green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas><br>
<input type="radio" name='choose' id="selection" onclick="changeSelection();">Selection
<input type="radio" name='choose' id="drawing-arrow-shape" onclick="drawArrow();">Draw Arrow
<input type="radio" name='choose' id="drawing-circle-shape" onclick="drawCircle();">Draw Circle

检查您的事件监听器，您正在添加到 Canvas ，但没有删除，请检查演示。