17

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

但是点击事件不起作用！有人知道为什么吗？非常感谢您！

4

4 回答 4

23

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

或者只使用众多画布 API 之一：

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org

ETC...

于 2016-01-14T14:39:55.613 回答
16

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

您可以使用 jquery 在画布上获取单击事件，并从光标位置计算用户是否单击了圆圈，但 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();   
});

​</p>

jsfiddle 在这里 http://jsfiddle.net/yXVrk/1/

于 2012-09-27T16:35:07.580 回答
7

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

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

于 2018-12-28T22:58:32.687 回答
0

bigGreen 不在 HTML 中，因此 $("#bigGreen") 不选择任何内容。你不能在 JavaScript 函数之类的东西上添加点击函数；既然它们在 DOM 中不存在，你怎么能点击一个呢？您应该用#canvas 替换#bigGreen，因为“canvas”是您的HTML 元素。

我叉了你的小提琴在这里展示这个。

编辑：如果你想看到用户点击了一个特定的圆圈，你可以使用画布点击事件，然后，通过传递给点击事件的坐标来确定哪个圆圈被点击。

于 2012-09-27T16:40:24.560 回答