ライブラリを使用するオプションとして、バニラの Javascript 実装を次に示します。
基本的に、canvas 要素で両方ともmousemove
との2 つのイベントをリッスンするだけで済みます。mouseout
start と on で半分のサイズの画像をキャンバスに描画するだけ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% で表示されているため、複雑なスケーリングなしで機能し、マウスの位置が画像の残りの半分 (4 分の 1) に対応する右下隅にある場合です。
たとえば、最初に画像をフルサイズの 25% で表示したい場合は、マウス座標を倍率でスケーリングする必要があります。
50% 以外の倍率を使用したデモ。