3

キャンバスがあり、その上に画像を描画しました:

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イベントもありますか？

4

3 に答える 3

6

ライブラリを使用するオプションとして、バニラの Javascript 実装を次に示します。

基本的に、canvas 要素で両方ともmousemoveとの2 つのイベントをリッスンするだけで済みます。mouseoutstart と 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% 以外の倍率を使用したデモ。

于 2013-06-17T20:38:16.137 に答える
3

「ズーム」の鍵は、ユーザーに画像を半分の解像度で表示することです。

次に、「拡大」するには、フル解像度の画像の一部を小さな「ビューポート」に表示するセカンダリ キャンバスをポップアップします。

これを出発点として使用できます。

KineticJS を使用して構築されていますが、コードはそのままの Canvas/JS でも同じです。

キネティック JS 画像拡大鏡

于 2013-06-17T17:54:22.877 に答える