Home Ask Login Register

Developers Planet

Your answer is one click away!

Radislav February 2016

Can't select circle canvas created by fabricjs

I add circle to canvas by fabricjs, and can't select it to change size. I added circle in drawCircle method. My code

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;

          

Answers


AndreaBogazzi February 2016

This happen because you change the circle dimensions after adding it to the canvas. During mousemove you change the circle radius, but this will not change its selectable area.

During mouse up, call circle.setCoords() to recalculate circle boudingbox

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

Post Status

Asked in February 2016
Viewed 3,072 times
Voted 8
Answered 1 times

Search




Leave an answer


Quote of the day: live life