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

Question

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

0

У меня есть координаты центра (x1,y1) и радиус (r) двух окружностей.

У меня есть другая точка A(x2,y2), это щелчок мышью.

Я написал функцию, которая печатает сообщение, если точка A находится внутри круга или снаружи.

это мой jsfiddle:

http://jsfiddle.net/alonshmiel/c4upM/22/

Я хочу знать следующее:

if the clicked pixel is inside the lightblue circle, print 1.
else if the clicked pixel is inside the gray circle, print 2.
else print 3.

Я создаю эти круги внутри функции: circleInArc.

кроме того, я написал функции: $('#canvas').on('click', function(event) {..} и function isPointInsideCircle(center_x, center_y, radius, x, y) {..} в javascript area. Есть еще одна функция, которую я написал в области html (например, circleInArc).

пожалуйста помогите,

любая помощь ценится!

Alon Shmiel 13 дек. 2013, в 18:23

Источник

Теги:

javascript

jquery

canvas

1 ответ

Ещё вопросы

markE · Accepted Answer · 2013-12-13T16-30-00.000Z

Чтобы реагировать на события кликов в меньших кругах

Когда создаются маленькие синие и серые круги, сохраните их координаты x и y и информацию о радиусе
Когда происходит событие мыши, используйте ваш тест pointInside, чтобы увидеть, находится ли мышь в любом круге.

Демо: http://jsfiddle.net/m1erickson/nrXNh/

Код может выглядеть так:

    // When a circle is created send back its x,y & radius
    // We use this info to later check if the mouse is inside this particular circle

    function circleInArc(fillColor,radianAngle){
        var x=cx+radius*Math.cos(radianAngle);
        var y=cy+radius*Math.sin(radianAngle);
        ctx.beginPath();
        ctx.arc(x,y,linewidth/2,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=fillColor;
        ctx.fill();
        return({x:x,y:y,radius:linewidth/2});
    }


    // save both circles x,y & radius in a javascript object when calling circleInArc

    var circle1=circleInArc("skyblue",PI*1.5);
    var circle2=circleInArc("lightgray",PI*1.25);


    // listen for mousedown events 
    // I use jquery, but you could substitute pure javascript if you prefer

    $("#canvas").mousedown(function(e){handleMouseDown(e);});


    // when a mousedown occurs, test both circles to see if the mouse is inside
    // then put up an alert with the results of the tests

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // test circle1
      var dx=mouseX-circle1.x;
      var dy=mouseY-circle1.y;
      var rSquared=circle1.radius*circle1.radius;
      if(dx*dx+dy*dy<rSquared){
          alert("Clicked in circle#1");
          return;
      }

      // test circle2
      var dx=mouseX-circle2.x;
      var dy=mouseY-circle2.y;
      var rSquared=circle2.radius*circle2.radius;
      if(dx*dx+dy*dy<rSquared){
          alert("Clicked in circle#2");
          return;
      }

      // otherwise outside circles
      alert("Clicked outside circle#1 and circle#2");

    }

Я понял! Большое спасибо еще раз! какой спасатель жизни!