缩放和平移 HTML5 画布 - 库答案

【问题标题】：Zoom and pan HTML5 canvas - library缩放和平移 HTML5 画布 - 库
【发布时间】：2014-09-14 10:49:10
【问题描述】：

我正在尝试实现缩放和平移包含图片的画布。我找到了这个例子http://phrogz.net/tmp/canvas_zoom_to_cursor.html，但是转换是应用于带有画布的图片，而不是画布本身。我不完全理解代码，所以我没有设法根据我的需要定制它。有人可以帮我吗？

或者，如果您可以向我推荐一些适合我需要的好图书馆，那就太好了。谢谢。

【问题讨论】：

为什么需要移动画布本身而不是画布内的图像？
因为我有两个重叠的画布元素，一个用于保存图片，另一个用于在其上绘图。所以当图片被移动/缩放时，另一个画布应该跟随。

标签： javascript jquery html canvas zooming

【解决方案1】：

查看上下文对象上可用的转换方法。

Context.scale 将允许您扩展内容。

Context.translate 将允许您偏移内容的绘制以创建平移效果。

如果您希望 2 个重叠的画布保持它们的纵横比，那么您可以将两个画布缩放和平移相同的量。

这是示例代码和演示：http://jsfiddle.net/m1erickson/H6UMN/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #wrapper{position:relative;}
    canvas{position:absolute; border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas1=document.getElementById("canvas1");
    var ctx1=canvas1.getContext("2d");

    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();
    var cw=canvas.width;
    var ch=canvas.height;

    var scaleFactor=1.00;
    var panX=0;
    var panY=0;

    var circleX=150;
    var circleY=150;
    var radius=15;

    drawTranslated();

    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#scaledown").click(function(){ scaleFactor/=1.1; drawTranslated(); });
    $("#scaleup").click(function(){ scaleFactor*=1.1; drawTranslated(); });
    $("#panleft").click(function(){ panX-=10; drawTranslated(); });
    $("#panright").click(function(){ panX+=10; drawTranslated(); });

    function drawTranslated(){

        ctx.clearRect(0,0,cw,ch);
        ctx.save();
        ctx.translate(panX,panY);
        ctx.scale(scaleFactor,scaleFactor);
        ctx.beginPath();
        ctx.rect(circleX-radius,circleY-radius,radius*2,radius*2);
        ctx.closePath();
        ctx.fillStyle="blue";
        ctx.fill();
        ctx.restore();

        ctx1.clearRect(0,0,cw,ch);
        ctx1.save();
        ctx1.translate(panX,panY);
        ctx1.scale(scaleFactor,scaleFactor);
        ctx1.beginPath();
        ctx1.arc(circleX,circleY,radius,0,Math.PI*2);
        ctx1.closePath();
        ctx1.fillStyle="red";
        ctx1.fill();
        ctx1.restore();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <button id=scaledown>Scale Down</button>
    <button id=scaleup>Scale Up</button>
    <button id=panleft>Pan Left</button>
    <button id=panright>Pan Right</button><br>
    <div id=wrapper>
        <canvas id="canvas" width=350 height=300></canvas>
        <canvas id="canvas1" width=350 height=300></canvas>
    </div>
</body>
</html>

【讨论】：