缩放和平移HTML5画布 - 库

Question

I'm trying to implement zooming and panning a canvas which contains a picture. 我正在尝试实现缩放和平移包含图片的画布。 I found this example http://phrogz.net/tmp/canvas_zoom_to_cursor.html , but the transformations are applied on the picture withing the canvas, not on the canvas itself. 我找到了这个例子http://phrogz.net/tmp/canvas_zoom_to_cursor.html ，但转换是用画布应用于图片，而不是画布本身。 I don't understand the code completely, so I didn't manage to customize it for my needs. 我完全不了解代码，因此我无法根据自己的需要对其进行自定义。 Can someone help me with that? 有人可以帮助我吗？

Or, if you could recommend me some good library suitable for my needs, that would be great. 或者，如果你能推荐一些适合我需要的好图书馆，那就太好了。 Thanks. 谢谢。

Answer 1

Check out the transformation methods available on the context object. 查看上下文对象上可用的转换方法。

Context.scale will allow you to scale your content. Context.scale允许您扩展内容。

Context.translate will allow you to offset the drawing of your content to create your panning effect. Context.translate将允许您偏移内容的绘图以创建平移效果。

If you want 2 overlaying canvases to maintain their aspect ratio then you would scale & translate both canvases by the same amount. 如果您想要2张重叠的画布来保持其宽高比，那么您可以将两幅画布按比例缩放和翻译。

Here's example code and a Demo: http://jsfiddle.net/m1erickson/H6UMN/ 这是示例代码和演示： 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>

缩放和平移HTML5画布 - 库

问题描述

1 个解决方案

解决方案1
8 2014-07-23 15:54:08

缩放和平移HTML5画布 - 库

问题描述

1 个解决方案

解决方案1 8 2014-07-23 15:54:08

解决方案1
8 2014-07-23 15:54:08