缩放和平移HTML5画布-库

Zoom and pan HTML5 canvas - library

本文关键字：画布 HTML5 缩放      更新时间：2023-09-26

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

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

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

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>
相关文章：