javascript canvas检测点击形状

Question

我在javascript中的点击功能有问题。 这是我的代码：

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

您现在可以在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);
    }
}

或者只使用众多canvas API中的一个：

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org

等等...

Answer 2

没有看到你的HTML这个问题有点不清楚，似乎你想在画布上画一些东西并使用jquery为圆圈添加点击事件，这是不可能的。

你可以使用jquery在画布上获取click事件，从光标位置你可以计算出用户是否点击了这个圆圈，但是jquery对你没有帮助，你必须自己做数学运算。

jquery只适用于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在这里http://jsfiddle.net/yXVrk/1/

Answer 3

Canvas API函数isPointInPath （）可用于协助命中检测。 此函数至少可以判断鼠标坐标是否在复杂的形状内，而无需自己进行复杂的数学运算。 也可以用于简单的形状，但我的用例是在bezier曲线路径上。 但是，您需要在绘图逻辑中合并此函数以在路径打开时进行测试，或者保留要测试的Path2d对象数组。 我重写onClick处理程序并从事件args传入鼠标坐标，但我想我可以保留一个Path2d对象数组。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath

Answer 4

bigGreen不在HTML中，因此$（“＃bigGreen”）不会选择任何内容。 你不能在JavaScript函数之类的东西上放置一个click函数; 因为它们不存在于DOM中，你怎么能点击一个呢？ 您应该将#bigGreen替换为#canvas，因为“canvas”是您的HTML元素。

我把你的小提琴分到了这里 。

编辑 ：如果要查看用户单击特定圆，则使用画布单击事件，然后确定通过单击事件传递的坐标单击了哪个圆。

Answer 5

你可以尝试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'
    });
  }
});