Создание масштаба изображения при наведении курсора мыши на «холст»

У меня есть холст, и я нарисовал на нем изображение:

var imageObj = new Image();
imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://localhost:8080/apache_pb2.png';

но я хочу scale изображение при наведении курсора мыши. Итак, я попробовал этот код:

imageObj.onmouseover = function() {
    context.scale(2, 2);
}

думал, что мне повезет, но нет, он даже не срабатывает.

Однако, чтобы добавить оскорбление к травме, я не могу найти окончательную ссылку на холсте HTML5, поэтому довольно сложно определить, что доступно в объекте Image.

Как я могу присоединиться к событию onmouseover? Есть ли вообще событие onmouseover?


html html5-canvas
person Mike Perrenoud    schedule 17.06.2013    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Как вариант использования библиотеки, вот ванильная реализация Javascript.

В основном нам нужно прослушивать только два события, mousemove и mouseout, оба в элементе холста. Мы просто рисуем изображение половинного размера на холсте в начале и в mouseout. Мы рисуем изображение «увеличенное» (полный размер), когда мышь находится в месте, отрицательном по отношению к положению мыши:

Как показано по ссылке выше -

Получить и нарисовать изображение:

var img = document.createElement('img');
img.onload = function() {

    //init geometry
    canvas.width = img.width>>1; //we'll show image at half size
    canvas.height = img.height>>1;

    //drawimage
    doCanvas();

    //add event listener we need
    canvas.addEventListener('mouseout', doCanvas, false);
    canvas.addEventListener('mousemove', move, false);
}

//some image...
img.src ="http://i.imgur.com/pULaM45.jpg";

function doCanvas() {
    ctx.drawImage(img, 0, 0, img.width>>1, img.height>>1);
}

На mousemove перемещайтесь:

function move(e) {
    var pos = getMousePos(canvas, e);
    ctx.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}

mouseout мы просто сбрасываем, вызывая doCanvas().

Это работает без какого-либо сложного масштабирования, поскольку изображение отображается с масштабом 50%, поэтому, когда положение мыши находится в правом нижнем углу, который соответствует другой половине (четверти) изображения.

Если вы хотите, скажем, сначала показать изображение на 25% от полного размера, вам нужно масштабировать координаты мыши с помощью коэффициента масштабирования.

Демонстрация с использованием других коэффициентов масштабирования, кроме 50%.

person Community    schedule 17.06.2013

arrow_upward
3
arrow_downward

Ключ к «масштабированию» — показать пользователю изображение в половинном разрешении.

Затем, чтобы «увеличить», вы открываете дополнительный холст, показывающий часть изображения с полным разрешением в меньшем «окне просмотра».

Вы можете использовать это как отправную точку.

Он построен с использованием KineticJS, но код будет таким же в чистом Canvas/JS.

Кинетическая лупа изображений JS

person markE    schedule 17.06.2013

arrow_upward
2
arrow_downward

Canvas не имеет «графа сцены». Он забывает, что вы сделали сразу же после того, как вы это сделали. Это всего лишь пиксели, поэтому холст не знает, есть ли какое-либо изображение для наведения или масштабирования.

context.scale() не влияет на предыдущие операции. Он только изменяет координаты/размеры для последующих команд рисования.

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

Если вы не делаете ничего более сложного, чем это, то <canvas> — плохой инструмент для этой задачи. Возможно, вам лучше использовать <img> и CSS :hover или немного изменить JS style.width.

Вы также можете добиться этого с помощью SVG, в котором есть граф сцены и обработчики событий мыши.

person Kornel    schedule 17.06.2013