我的画布上有一个动画,其中有一些图像(使用 绘制drawImage()
)。为了简单起见,假设只有两个图像。这些图像在人造 3d 空间中遵循圆形路径,因此有时一个图像与另一个图像重叠,而有时第二个图像与第一个图像重叠。这些图像也随着它们从查看器“更近”或“更远”移动而被缩放。
这些图像中的每一个都是具有以下(简化)代码的对象:
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
的顺序对数组进行排序,然后绘制以 开头的图像。slides[i].scale
slides[0]
在$(document).ready()
我运行一个init
函数,除其他外,向画布添加一个事件侦听器:
canvas = document.getElementById(canvas_id);
canvas.addEventListener('mousemove', mouse_handler, false);
此处理程序的目的是确定鼠标在哪里以及鼠标是否在其中一张幻灯片上(这将<div>
通过 jQuery 修改页面上的 a)。
这是我的问题——我试图弄清楚如何在任何给定时间确定鼠标在哪张幻灯片上。本质上,我需要代码来填写以下逻辑(很可能在mouse_handler()
函数中):
// if (mouse is over a slide) {
// slideName = get .name of moused-over slide;
// } else {
// slideName = "";
// }
// $("#slideName").html(slideName);
有什么想法吗?