Определение размеров изображения, нарисованного на холсте, и когда мышь находится над изображением - PullRequest
Новая
       11

Определение размеров изображения, нарисованного на холсте, и когда мышь находится над изображением

0 голосов
/ 15 сентября 2010

У меня есть анимация на холсте, где у меня есть несколько изображений (нарисованных с использованием 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 в порядке slides[i].scale от наименьшего к наибольшему, а затем рисует изображения, начиная с slides[0].

Вкл. $(document).ready() Я запускаю функцию init, которая, помимо прочего, добавляет прослушиватель событий на холст: 

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

Цель этого обработчика - определить, где находится мышь и находится ли мышь над одним из слайдов (что изменит <div> на странице с помощью jQuery).

Вот моя проблема - я пытаюсь выяснить, как определить, на каком слайде находится мышь в любой момент времени. По сути, мне нужен код для заполнения следующей логики (скорее всего, в функции mouse_handler()): 

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

Есть мысли?

1 Ответ

0 голосов
/ 15 сентября 2010

Похоже, мне просто нужно немного поспать, прежде чем я смог это понять.

У меня есть все, что мне нужно, чтобы определить размер изображения и его размещение на холсте.

Я добавил следующую функцию к своему 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 есть кое-что, и я даже не думал о реализации excanvas.js для пользователей IE.Для браузеров, в которых отсутствует поддержка canvas, объект canvas просто скрывается с помощью display:none.

...