javascript canvas detect click on shape

Question

Ho un problema con la funzione click in javascript. Questo è il mio codice:

var canvas = document.getElementsByTagName("canvas")[0]; 
var ctx = canvas.getContext('2d'); 

BigCircle = function(x, y, color, circleSize) { 
    ctx.shadowBlur = 10; 
    ctx.shadowColor = color; 
    ctx.beginPath(); 
    ctx.arc(x, y, circleSize, 0, Math.PI * 2, true); 
    ctx.fill(); 
    ctx.closePath(); 
}; 

var bigGreen = new BigCircle(1580, 800, '#5eb62b', 180); 

function init() { 
    $("#bigGreen").click(function(e){ 
    alert("test");    
    }); 
} 
$(document).ready(function() { 
    init(); 
}); 

Ma l'evento click non funziona! Qualcuno sa perché? Grazie mille in anticipo!

Answer 1

senza vedere il tuo html questa domanda è un po 'poco chiara, sembra che ti piacerebbe disegnare qualcosa su una tela e usare jquery per aggiungere eventi click per il cerchio, questo non è possibile.

è possibile utilizzare jquery per ottenere l'evento click sull'area di disegno e dalla posizione del cursore è possibile calcolare se l'utente ha fatto clic sul cerchio o meno, ma jquery non ti aiuterà qui devi fare i calcoli tu stesso.

jquery funziona solo per elementi dom.

BigCircle = function(ctx,x, y, color, circleSize) { 
    ctx.beginPath(); 
    ctx.arc(x, y, circleSize, 0, Math.PI * 2, true); 
    ctx.fillStyle=color 
    ctx.fill(); 
    ctx.closePath(); 
    this.clicked=function(){ 
     ctx.fillStyle='#ff0000' 
     ctx.fill(); 
    } 
}; 

function init() { 
    var canvas = document.getElementsByTagName("canvas")[0]; 
    var ctx = canvas.getContext('2d'); 
    var bigGreen = new BigCircle(ctx,50, 50, '#5eb62b', 50); 
    $('#canvas').click(function(e){ 
    var x = e.clientX 
     , y = e.clientY   
    if(Math.pow(x-50,2)+Math.pow(y-50,2) < Math.pow(50,2)) 
     bigGreen.clicked() 
    })  
} 


$(document).ready(function() { 
    init(); 
}); 

jsfiddle è qui http://jsfiddle.net/yXVrk/1/

Answer 2

bigGreen non è nel codice HTML, quindi $ ("# bigGreen") seleziona nulla. Non puoi mettere una funzione click su cose come le funzioni JavaScript; dal momento che non esistono nel DOM, come si può fare clic su uno? Dovresti sostituire #bigGreen con #canvas, poiché "canvas" è il tuo elemento HTML.

Ho biforcato il violino per mostrare questo here.

Modifica: Se si desidera che l'utente abbia fatto clic su una determinata cerchia, si utilizza l'evento clic su tela e quindi si determina il cerchio su cui si fa clic per le coordinate passate nell'evento clic.

Answer 3

è ora possibile utilizzare le regioni colpite in Chrome e Firefox:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility#Hit_regions

ctx.beginPath(); 
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); 
ctx.fill(); 
ctx.addHitRegion({id: "bigGreen"}); 

e aggiungere un callback

canvas.onclick = function (event) 
{ 
    if (event.region) { 
     alert('You clicked ' + event.region); 
    } 
} 

o semplicemente usare uno dei tanti API tela:

http://www.createjs.com/easeljs

http://www.paperjs.org

ecc ...

Answer 4

Si può provare jcanvas

http://projects.calebevans.me/jcanvas/docs/mouseEvents/

// Click the star to make it spin 
$('canvas').drawPolygon({ 
    layer: true, 
    fillStyle: '#c33', 
    x: 100, y: 100, 
    radius: 50, 
    sides: 5, 
    concavity: 0.5, 
    click: function(layer) { 
    // Spin star 
    $(this).animateLayer(layer, { 
     rotate: '+=144' 
    }); 
    } 
});