0

我的画布上有一个动画，其中有一些图像（使用 绘制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].scaleslides[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);

有什么想法吗？

4

1 回答 1

0

看来我只是需要睡一会儿才能弄清楚这一点。

我已经拥有了确定图像大小及其在画布上的位置所需的一切。

我将以下功能添加到我的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.

于 2010-09-15T16:17:20.097 回答