Javascript 基于鼠标坐标选择椭圆并从div获取座位id

我正在创建一个基于的画布选择您自己的座位预订系统，并且很难确定是否单击了其中一个圆圈。 座位是基于从填充了从

CRM系统返回的XML数据的数组中拉出的动态绘制的。我曾试图使用“this”关键字，认为这会有所帮助。我想我可以使用坐标来确定选择了哪个座位，然后返回该座位的ID，以便通过CRM请求预订

我应该创建一个多维数组并用坐标和座位ID填充它吗

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

    }
    }}

document.addEventListener（'DOMContentLoaded'，domloaded，false）；
函数domloadded（）{
var canvas=document.getElementById（“mycanvas”）；
var ctx=canvas.getContext（“2d”）；
var allseats=document.getElementsByClassName（“座位”）；
var arr=Array.prototype.slice.call（allseats）；
对于（var j=0；j）演示：

您可以侦听mousedown事件，并在事件发生时调用handleMouseDown（）：

canvas.onmousedown=handleMouseDown;

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
}

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

mousedown处理程序获取如下鼠标位置：

canvas.onmousedown=handleMouseDown;

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
}

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

假设您的座位“class”看起来像这样：

canvas.onmousedown=handleMouseDown;

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
}

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

然后您可以测试鼠标是否在任何座椅对象中向下移动，如下所示：

canvas.onmousedown=handleMouseDown;

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
}

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

Seat.prototype.ismouseinder=函数（mouseX，mouseY）{
var dx=mouseX this.x；
var dy=mouseY this.y；
返回（dx*dx+dy*dy向您表示感谢-我以前没有使用过JSFIDLE，只是尝试将其设置为可以工作-目前它没有在JSFIDLE中划出座位将您的HTML插入
JSFIDLE
，我有您的代码，但希望看到您的HTML和CSS部分..抱歉-应该在这个链接上：现在您想单击特定的
红点
谢谢你的帮助！