Javascript холст обнаружить щелчок по форме

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

Без просмотра вашего 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();   
});

jsfiddle здесь http://jsfiddle.net/yXVrk/1/

Answer 2

Теперь вы можете использовать области попадания в Chrome и Firefox:

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

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 Canvas:

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org/

так далее...

Answer 3

Функция Canvas API isPointInPath() может использоваться для помощи в обнаружении попаданий. Эта функция может, по крайней мере, сказать, находятся ли координаты мыши в сложной форме, не выполняя сложную математику самостоятельно. Может работать и для простых фигур, но мой вариант использования был для более кривой кривой. Однако вам нужно либо включить эту функцию в логику рисования для тестирования, когда пути открыты, либо сохранить массив объектов Path2d для проверки. Я перерисовываю обработчик onClick и передаю координаты мыши из аргументов событий, но думаю, что вместо этого я мог бы сохранить массив объектов Path2d.

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

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

Answer 5

bigGreen отсутствует в HTML, поэтому $("#bigGreen") ничего не выбирает. Вы не можете поместить функцию щелчка на такие вещи, как функции JavaScript; так как они не существуют в DOM, как вы можете щелкнуть один? Вам следует заменить #bigGreen на #canvas, так как "canvas" - это ваш HTML-элемент.

Я раздвоил твою скрипку, чтобы показать это здесь.

Изменить: Если вы хотите увидеть, что пользователь нажал на определенный круг, вы используете событие щелчка на холсте, а затем вы определяете, какой круг был выбран по координатам, переданным в событие щелчка.