CODEWITHSUNDEEP
javascriptjquery
padawan
padawan

Reputation: 1315

Detecting if user clicked on any circle inside canvas

As an addition to my previous question, now, I am trying to detect if user is clicked on any created circle.

I am creating Node objects when user presses keys.

jQuery(document).ready(function() {
    $('#canvas').attr('height', $('#canvas').css('height'));
    $('#canvas').attr('width', $('#canvas').css('width'));
    var x = -1;
    var y = -1;
    var V = [];

    function Node(id) {
        var _this = this;

        // constructor
        (function() {
            _this.x = x || null;
            _this.y = y || null;
            _this.id = id || null;
            _this.clicked = false;
        
        })();

        this.draw = function(ctx) {
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2 * Math.PI);
            ctx.font = '16pt Calibri';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText(id, x, y+3);
            
            ctx.stroke();
            V.push(v);
        }
        
        this.clicked = function(e) {
            var xDif = e.offsetX - _this.x;
            var yDif = e.offsetY - _this.y;
            var d = Math.sqrt((xDif*xDif) + (yDif*yDif));
            if(d < 20) return true;
            else return false;
            
        }
        
        this.update = function() {
        _this.x = x;
        _this.y = y;
        
       }
    }
    var overCanvas = false;
    $('#canvas').mouseover(function() {
    overCanvas = true;
    });
    $('#canvas').mouseleave(function() {
    overCanvas = false;
    });
    $("#canvas").mousemove(function(e) {
    x = e.offsetX;
    y = e.offsetY;
    $('#status').html(x + ', ' + y);
    });
    $(document).keypress(function(e) {

    if (!overCanvas) {
      return;
    }
    var id = -1;
    switch(e.keyCode)
    {
        case 97:
        case 49: id = '1'; break
        case 98:
        case 50: id = '2'; break;
        case 99:
        case 51: id = '3'; break;
        case 100:
        case 52: id = '4'; break;
        case 101:
        case 53: id = '5'; break;
        case 102:
        case 54: id = '6'; break;
        case 120:
        case 88: id = 'x'; break;
        default: return;
    }

    var v = new Node(id);
    v.draw(canvas.getContext("2d"));
    });

Then, I want to know if user clicked any of the objects. To achieve this, I use a simple loop:

$('#canvas').mousedown(function() {
        for(var i = 0; i < V.length; i++)
        {
            
            if(V[i].clicked())
            {
                $('#clicked').html(V[i].id);
                V[i].update();
                V[i].draw(canvas.getContext("2d"));
            }
        }
        
    });

Which does not do anything in the following html:

<body> 
    <h2 id="status">0, 0</h2>
    <h2 id="clicked">init</h2>
    <canvas style="width: 1000px; height: 1000px; border:1px ridge green;" id="canvas">

    </canvas>
</body>

I don't think I am calculating the distance wrong. I think there is some point I've missed (maybe when returning true and false?).

The thing I want to do is to be able to drag each circle separately.

Upvotes: 0

Views: 58

Answers (1)

John M
John M

Reputation: 2600

A couple of errors in your code:

The line:

V.push(v);

in Node.draw() should be moved here, just after the node is created:

var v = new Node(id);
v.draw(canvas.getContext("2d"));
V.push(v);

Also, your mousedown event handler is not actually getting a reference to the event, you need:

    $('#canvas').mousedown(function(e) {
    for(var i = 0; i < V.length; i++)
    {
        if(V[i].clicked(e))
        {
            $('#clicked').html(V[i].id);
            V[i].update();
            V[i].draw(canvas.getContext("2d"));
        }
    }

});

Fiddle

Upvotes: 1

Related Questions