HTML5画布调整图像大小点击缩放

Question

HTML5画布调整图像大小点击缩放

5

我有一张地图图片，想要使用HTML5和jQuery制作类似谷歌地图的界面。我想实现以下操作：

• Double click on pan in without changing the size of the containing div

• Click on a building to bring up a pop up of information on that building

• Click and drag to pan

我现在拥有的代码是画布中的图像。我找到了几个可以显示图像“缩放”的代码，但要么调整容器div的大小，要么不够平滑和响应。它只会跳转到更大的尺寸，而我希望缩放是有动画效果的。

地图上会有几座建筑物被“固定”，用户可以单击它们以获取有关该建筑物的信息。

以下是代码：

JS:

$( document ).ready( function() {
var canvas = document.getElementById( 'canvas' );
var context = null;
var map = null;

if( canvas.getContext )
{
    context = canvas.getContext( '2d' );

    $( '#map' ).load( function( evt ) {
        context.drawImage( evt.currentTarget, 10, 10 );
    } );

    map = new Image();
    map.onload = function() {
        context.drawImage( this, 20, 20 );
    };
    map.src = 'images/asu_poly_map.png';
} else {
    alert( 'Your browser does not support canvas.' );
}
} );

HTML:

<div id="map">

<canvas id="canvas" width="1055" height="600"></canvas>

</div>

CSS：

#map {
margin:0 auto;
margin-top : 180px;
width : 1200px;
}

编辑后添加：我假定它与这个类似，但是无法弄清如何将其应用于从服务器上绘制到画布上的图像。

缩放并平移至指定点

- Jen

为您创建了一个基础的 JSFiddle：http://jsfiddle.net/CMse5/ - Dan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan · Accepted Answer

哇！我把一堆StackOverflow参考整合成了适合你的东西：http://jsfiddle.net/CMse5/1/

这里是代码：

HTML:

<div id="map">
    <canvas id="canvas" width="300" height="300"></canvas>
</div>

CSS：

canvas {
    border: 1px solid black;
}

JS：

$( document ).ready( function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var scale = 1.5;
var originx = 0;
var originy = 0;
var imageObj = new Image(); 
    imageObj.src = 'http://placehold.it/300x300';

function draw(){
    // From: http://goo.gl/jypct
    // Store the current transformation matrix
    context.save();

    // Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    context.restore();

    // Draw on transformed context    
    context.drawImage(imageObj, 0, 0, 300, 300);

}
setInterval(draw,100);

canvas.onmousewheel = function (event){
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    var wheel = event.wheelDelta/120;//n or -n


    //according to Chris comment
    var zoom = Math.pow(1 + Math.abs(wheel)/2 , wheel > 0 ? 1 : -1);

    context.translate(
        originx,
        originy
    );
    context.scale(zoom,zoom);
    context.translate(
        -( mousex / scale + originx - mousex / ( scale * zoom ) ),
        -( mousey / scale + originy - mousey / ( scale * zoom ) )
    );

    originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );
    originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );
    scale *= zoom;
}

} );

此外，您提到需要平滑地动画缩放。为实现此目的，您需要在每一帧中平滑缩放。因此，在您的绘制函数中，每一帧都要缓慢地从原始比例过渡到新的比例。您肯定会想要改用requestAnimationFrame，以获得更好的帧率。

也许更简单的方法是使用Canvas / DOM混合，对图像使用CSS3变换和动画，这将为您处理所有缓动。如果需要，您可以叠加任何必要的canvas元素。

HTML5画布调整图像大小 点击缩放

HTML5画布调整图像大小点击缩放