जावास्क्रिप्ट कैनवास का पता आकार

Question

पर क्लिक करें मुझे जावास्क्रिप्ट में क्लिक फ़ंक्शन के साथ कोई समस्या है। यह मेरा कोड है:

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(); 
}); 

लेकिन क्लिक ईवेंट काम नहीं कर रहा है! क्या किसी को पता है क्यों? अग्रिम में बहुत बहुत धन्यवाद!

Answer 1

अपने एचटीएमएल को देखे बिना यह सवाल थोड़ा अस्पष्ट है, ऐसा लगता है कि आप कैनवास पर कुछ आकर्षित करना चाहते हैं और सर्कल के लिए क्लिक इवेंट जोड़ने के लिए jquery का उपयोग करना चाहते हैं, यह संभव नहीं है।

आप कैनवास पर क्लिक ईवेंट प्राप्त करने के लिए jquery का उपयोग कर सकते हैं और कर्सर की स्थिति से आप गणना कर सकते हैं कि उपयोगकर्ता सर्कल पर क्लिक करता है या नहीं, लेकिन jquery आपको यहां मदद नहीं करेगा आपको गणित स्वयं करना होगा।

jquery केवल डोम तत्वों के लिए काम करता है।

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 यहाँ http://jsfiddle.net/yXVrk/1/

Answer 2

bigGreen HTML में नहीं है, इसलिए $ ("# bigGreen") कुछ भी नहीं का चयन करता है। आप जावास्क्रिप्ट फ़ंक्शंस जैसी चीजों पर एक क्लिक फ़ंक्शन नहीं डाल सकते; चूंकि वे डोम में मौजूद नहीं हैं, तो आप एक पर क्लिक कैसे कर सकते हैं? आपको # कैनग्रीन को # कैनवास के साथ प्रतिस्थापित करना चाहिए, क्योंकि "कैनवास" आपका HTML तत्व है।

मैंने इस here को दिखाने के लिए अपनी पहेली को फोर्क किया।

संपादित: आप को देखने के लिए कि उपयोगकर्ता किसी विशेष मंडली पर क्लिक किया चाहते हैं, आप कैनवास क्लिक करें घटना का उपयोग करें, और उसके बाद, आप यह निर्धारित जो चक्र निर्देशांक क्लिक करें घटना में पारित ने क्लिक किया था।

Answer 3

अब आप Chrome और 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"}); 

और एक कॉलबैक जोड़ने

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

या सिर्फ कई कैनवास एपीआई का उपयोग करें:

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org

आदि ...

Answer 4

आप कोशिश कर सकते हैं 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' 
    }); 
    } 
});