HTML5 Canvas 调整图片大小 点击放大

Posted 2023-03-05

【中文标题】HTML5 Canvas 调整图片大小 点击放大

【英文标题】：HTML5 Canvas Resize image Click to Zoom

【发布时间】：2013-04-14 15:00:23

【问题描述】：

我在画布中有一张地图图像，我想使用 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"  ></canvas>

</div>

CSS：

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

编辑添加： 我假设它会与此类似，但无法弄清楚如何将其应用到服务器上正在绘制到画布上的图像。

Zoom in on a point (using scale and translate)

【问题讨论】：

为你创建了一个基础小提琴：jsfiddle.net/CMse5

【参考方案1】：

轰隆隆！我将一堆 *** 引用组合成适合你的东西：http://jsfiddle.net/CMse5/1/

代码如下：

HTML：

<div id="map">
    <canvas id="canvas"  ></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，这样你就能得到更好的帧率。

使用画布/DOM 混合，并在图像上使用 CSS3 转换和动画可能会更简单，它会为您处理所有的缓动。如果需要，您可以覆盖任何必要的画布。

【讨论】：

请注意，对于动画循环，最好使用 requestAnimationFrame 而不是 setInterval。

jsfiddle.net/CMse5/4 -- 带有requestAnimationFrame循环，用连续的鼠标滚轮绘制非常流畅，比如苹果触控板。

我把我的图片放在那里，但我没有让它做任何事情。

jsfiddle.net/CMse5/4 这是链接。我不确定是否需要更改设置或其他什么？当我双击图像时，没有任何反应。 ://

这是一个重复的链接。你救了小提琴吗？