Выбор эллипсов на основе координат мыши и получение идентификатора места от div

Question

Я создаю на основе canvas. Выберите свою систему бронирования на месте и затруднился с тем, как определить, было ли нажато одно из кругов. Сиденья динамически нарисованы на основе вытягивания из массива, заполненного данными XML, возвращенными с CRM system. Я попытался использовать ключевое слово «this» с мыслью, что это поможет. Я думал, что могу использовать координаты, чтобы определить, какое место было выбрано, затем верните идентификатор этого места, чтобы запросить резервирование через CRM.

Должен ли я создать многомерный массив и заполнить его координатами и идентификатором места?

document.addEventListener('DOMContentLoaded',domloaded,false); 
    function domloaded(){ 
    var canvas = document.getElementById("mycanvas"); 
    var ctx = canvas.getContext("2d"); 
    var allseats = document.getElementsByClassName("seat"); 
    var arr = Array.prototype.slice.call(allseats); 

     for (var j=0; j<arr.length; j++) 
     { 
    //Get seat status 
    var status = arr[j].getAttribute("data-seat-status"); 
    //Get row position 
    var top = arr[j].getAttribute("data-top"); 
    //Get column position 
    var left = arr[j].getAttribute("data-left"); 
    //Get seat id 
    var id = arr[j].getAttribute("id"); 

    var sAngle = 0; 
    var eAngle = 2*Math.PI; 

    //Create more space between seats 
    left=(left*10); 
    top=(top*10); 

    var seat = function(){ 
    function seat(x, y) { 
     this.color = "white"; 
     this.x = left; 
     this.y = top; 
     this.radius = 4; 
    } 
     seat.prototype.draw = function (ctx) { 
     ctx.fillStyle = "red"; 
     ctx.beginPath(); 
     ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); 
     ctx.fill(); 
    }; 
     return seat; 
    }(); 
    var drawSeats=new seat(top,left); 
    drawSeats.draw(ctx);  

    } 
    canvas.onmousedown=function findseats(arr){ 


    var xleft=arr.clientX; 
    var ytop=arr.clientY; 
    alert("X coords: " + xleft + ", Y coords: " + ytop); 
    for (s=0; s<arr.length; s++){ 
     if((xleft||((arr[s].getAttribute("data-left")*10)&&(ytop||arr[s].getAttribute("data-top")*10)))){ 
      alert(arr[s].getAttribute("data-id")); 
     } 

    } 
    }} 

http://jsfiddle.net/caspianturner/5sycT

Answer 1

демонстрационную: http://jsfiddle.net/m1erickson/AN4Jf/

Вы можете слушать MouseDown события и вызывать handleMouseDown(), когда происходит событие:

canvas.onmousedown=handleMouseDown; 

Обработчик MouseDown получает положение мыши следующим образом:

var canvas=document.getElementById("canvas"); 
var offsetX=canvas.offsetLeft; 
var offsetY=canvas.offsetTop; 

function handleMouseDown(e){ 
    e.preventDefault(); 

    mouseX=parseInt(e.clientX-offsetX); 

    mouseY=parseInt(e.clientY-offsetY); 


} 

Предположим, ваше место "класс" выглядит примерно так:

// Seat "class" 
function Seat(x,y,radius,id,seatNo,color){ 
    this.x=x-200; // -200 pulls the seats leftward for better display 
    this.y=y; 
    this.radius=radius; 
    this.id=id; 
    this.seatNo=seatNo; 
    this.color=color 
} 

Затем вы можете проверить, если MouseDown произошло в любом объекте сиденья, как это:

Seat.prototype.isMouseInside=function(mouseX,mouseY){ 
    var dx=mouseX-this.x; 
    var dy=mouseY-this.y; 
    return(dx*dx+dy*dy<=this.radius*this.radius); 
}