javascript - 无法选择fabricjs创建的圆形 Canvas

我通过fabricjs在画布上添加了圆圈，但是无法选择它来更改大小。我在drawCircle方法中添加了圆。
我的密码

function Toolbar(can) {
    'use strict';
    var self = this;
    var canvas = can;
    var $container = $('#tool-box-container');
    var $toolboxItems = $container.find('div[data-act]');
    $toolboxItems.click(function () {
        processAction($(this).data('act'));
    });

    function drawLine() {
        var line, isDown;
        canvas.on('mouse:down', function (o) {
            isDown = true;
            var pointer = canvas.getPointer(o.e);
            var points = [pointer.x, pointer.y, pointer.x, pointer.y];
            line = new fabric.Line(points, {
                strokeWidth: 5,
                fill: 'red',
                stroke: 'red',
                originX: 'center',
                originY: 'center'
            });
            canvas.add(line);
        });

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

            if (!isDown)
                return;

            var pointer = canvas.getPointer(o.e);
            line.set({ x2: pointer.x, y2: pointer.y });
            canvas.renderAll();
        });

        canvas.on('mouse:up', function (o) {
            isDown = false;
        });
    }

    function drawCircle() {
        var circle, isDown, origX, origY;
        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: pointer.x,
                top: pointer.y,
                radius: 5,
                strokeWidth: 3,
                stroke: 'red',
                fill:'',
                originX: 'center', originY: 'center'
            });
            canvas.add(circle);
        });

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

            if (!isDown)
                return true;

            var pointer = canvas.getPointer(o.e);
            circle.set({ radius: Math.abs(origX - pointer.x) });
            canvas.renderAll();
        });

        canvas.on('mouse:up', function (o) {
            isDown = false;
        });
    }

    function processAction(action) {
        switch (action) {
            case 'move':
                canvas.isDrawingMode = false;
                canvas.selection = true;
                canvas.off('mouse:down');
                canvas.off('mouse:move');
                canvas.off('mouse:up');
                break;

            case 'brush':
                canvas.isDrawingMode = true;
                break;

            case 'pencil':
                canvas.isDrawingMode = true;
                break;

            case 'erase':
                canvas.clear();
                break;

            case 'image':
                $('#add-image').modal('show');
                break;

            case 'circle':
                canvas.isDrawingMode = false;
                canvas.selection = false;
                drawCircle();
                break;

            case 'square':
                canvas.isDrawingMode = false;
                canvas.selection = false;
                drawLine();
                break;

            case 'text':
                canvas.isDrawingMode = true;
                break;

            case 'back':
                break;

            case 'forward':
                break;
        }
    }
}

function Paint($cont) {
    'use strict';
    var self = this;
    var container = $cont;
    var canvas = new fabric.Canvas('main-canvas', {
        isDrawingMode: true
    });
    var toolbox = new Toolbar(canvas);
    canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);

    canvas.freeDrawingBrush.color = "black";
    canvas.freeDrawingBrush.width = 10;
    canvas.freeDrawingBrush.shadowBlur = false;

    self.canvas = canvas;
    self.container = container;
}

最佳答案

发生这种情况是因为您在将圆添加到画布后更改了圆的尺寸。
在mousemove期间，您可以更改圆的半径，但这不会更改其可选区域。

在鼠标上移期间，调用circle.setCoords()重新计算圆boudingbox

canvas.on('mouse:up', function (o) {
    isDown = false;
    circle.setCoords();
});

关于javascript - 无法选择fabricjs创建的圆形 Canvas ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35246694/