确定在画布上绘制的图像的尺寸以及鼠标位于图像上时的尺寸

Question

我在画布上有一个动画，其中有一些图像（使用drawImage()绘制）。为了简单起见，假设只有两个图像。这些图像遵循人造三维空间中的圆形路径，以便有时一个图像与另一个图像重叠，而其他时候第二个图像与第一个图像重叠。这些图像也随着从观看者“更近”或“更远”移动而缩放。

每个这些图像是用下面的（简化的）代码的对象：

function slide_object() { 
    this.x = 0.0; // x = position along path (in radians) 
    this.xpos = 0.0; // x position on canvas 
    this.ypos = 0.0; // y position on canvas 
    this.scale = 0.0; 
    this.name = ""; // a string to be displayed when slide is moused over 
    this.imgx = 0.0; // width of original image 
    this.imgy = 0.0; // height of original image 

    this.init = function (abspath, startx, name) { // startx = path offset (in radians) 
     this.name = name; 
     this.x = (startx % (Math.PI * 2)); 
     var slide_image = new Image(); 
     slide_image.src = abspath; 
     this.img = slide_image; 
     calcObjPositions(0, this); // calculate's the image's position, then draws it 
    }; 
    this.getDims = function() { // called by calcObjPositions when animation is started 
     this.imgx = this.img.width/2; 
     this.imgy = this.img.height/2; 
    } 
} 

这些对象中的每一个存储在数组中称为slides。

为了适当地重叠图像，drawObjs函数首先在排序的slides[i].scale顺序slides阵列从最小到最大，然后绘制图像开始slides[0]。

在$(document).ready()我运行一个init功能，除其他事项外，将一个事件侦听到画布：

canvas = document.getElementById(canvas_id); 
canvas.addEventListener('mousemove', mouse_handler, false); 

这个处理器的目的是，以确定鼠标和鼠标是否已经结束其中一张幻灯片（它将通过jQuery修改页面上的<div>）。

这是我的问题 - 我试图找出如何确定鼠标在任何给定时间结束。从本质上讲，我需要的代码填写以下逻辑（在mouse_handler()功能最有可能的）：

// if (mouse is over a slide) { 
//  slideName = get .name of moused-over slide; 
// } else { 
//  slideName = ""; 
// } 
// $("#slideName").html(slideName); 

有什么想法？

Answer 1

看起来我只需要一些睡眠，然后才能找出这一个。

我已经掌握了我需要的一切来确定图像的大小，并将它放置在画布上。

我增加了以下功能我slide_object：

this.getBounds = function() { 
     var bounds = new Array(); 
     bounds[0] = Math.ceil(this.xpos); // xmin 
     bounds[1] = bounds[0] + Math.ceil(this.imgx * this.scale); // xmax 
     bounds[2] = Math.ceil(this.ypos); // ymin 
     bounds[3] = bounds[2] + Math.ceil(this.imgy * this.scale); // ymax 
     return bounds; 
    }; 

然后在我的mouse_handler功能，我从一个功能我叫isWithinBounds()当前鼠标悬停幻灯片这需要一个鼠标X和鼠标指数y位置：

function isWithinBounds(mx,my) { 
    var index = -1; 
    for (var i in slides) { 
     bounds = slides[i].getBounds(); 
     if ((mx >= bounds[0] && mx <= bounds[1]) && (my >= bounds[2] && my <= bounds[3])) { 
      index = i; 
     } 
    } 
    return index; 
} 

由于slides规模的顺序进行排序，从小到大，每次迭代都会更换或维护的index值。如果有多个图片占据空间，则会返回最上面的幻灯片index。

现在唯一的问题是弄清楚如何使代码更有效率。 Chrome运行动画没有任何滞后。 Firefox有一些，我甚至没有想过为IE用户实现excanvas.js。对于缺乏画布支持的浏览器，画布对象只能用display:none隐藏。