Вопрос по function, javascript, events, canvas, click – холст javascript обнаруживает щелчок по форме

8

У меня проблема с функцией щелчка в 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();
});

Но событие нажатия не работает! Кто-нибудь знает почему? Огромное спасибо заранее!

Этот пост может помочь:medium.com/devtravel/... lavrton
о, извините, ну вот HTML:jsfiddle.net/Babsi/eadBu/1 user1590534
Вы должны опубликовать свой HTML - я могуне вижу чтохолст» или же "Biggreen» Есть, и это, вероятно, где проблема, в несоответствии имен HTML и JavaScript. Ed Bayiates

Ваш Ответ

5   ответов
0

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

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

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

Спасибо, но, к сожалению, они перекрываются :( user1590534
Хорошо, я понимаю, большое спасибо, я буду стараться изо всех сил !! user1590534
Нет, один холст. Я отредактировал свой ответ. Вам необходимо проверить координаты щелчка мышью. Ed Bayiates
так что мне нужно добавить больше холста? Но мне нужно около 40 кругов, поэтому я должен добавить 40 холстов? Есть ли лучшее решение? user1590534
11

не видя вашего 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/

И тебе спасибо!! Это действительно помогает мне !! user1590534
спасибо за код! теперь я понимаю это лучше! user1590534
@supernova работает нормально, если на веб-странице есть только холст, но после вставки содержимого выше холст не работает. оформить заказ в этой скрипкеjsfiddle.net/yXVrk/310 Gajen
Хорошо, но было бы легче читать, еслиMath.pow(x-50,2)+Math.pow(y-50,2) < Math.pow(50,2) было бы без магических чисел (circle.x, circle.y & circle.radius вместо '50'). Ken
10

Теперь вы можете использовать области попадания в 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 Canvas:

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org

так далее...

С нетерпением жду, когда это не экспериментальная функция. Будет намного проще обнаруживать столкновения. Joseph Astrahan
но пока это экспериментальная функция :( sarkiroka
0

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

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

0

Вы можете попробовать 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'
    });
  }
});

Похожие вопросы