Question

我的画布上有一个动画，其中有一些图像（使用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数组进行排序，然后从{{1}开始绘制图像}。

在slides[0]上运行$(document).ready()函数，除其他外，还向画布添加一个事件监听器：

init

此处理程序的目的是确定鼠标的位置以及鼠标是否位于其中一个幻灯片上（这将通过jQuery修改页面上的canvas = document.getElementById(canvas_id); canvas.addEventListener('mousemove', mouse_handler, false);）。

这是我的问题 - 我正在试图弄清楚如何在任何给定时间确定鼠标滑过的滑块。基本上，我需要代码来填充以下逻辑（最有可能在<div>函数中）：

mouse_handler()

有什么想法吗？

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()的函数中获取当前moused-over幻灯片的索引，该函数采用鼠标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隐藏画布对象。

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

1 个答案: