javascript 缩放和平移 HTML5 画布 - 库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24907322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoom and pan HTML5 canvas - library
提问by nena
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. I don't understand the code completely, so I didn't manage to customize it for my needs. Can someone help me with that?
我正在尝试实现缩放和平移包含图片的画布。我找到了这个例子http://phrogz.net/tmp/canvas_zoom_to_cursor.html，但转换是应用在画布上的图片上，而不是画布本身。我不完全理解代码，所以我没有设法根据我的需要定制它。有人可以帮我吗？
Or, if you could recommend me some good library suitable for my needs, that would be great. Thanks.
或者，如果您能向我推荐一些适合我需要的优秀库，那就太好了。谢谢。
回答by markE
Check out the transformation methods available on the context object.
查看上下文对象上可用的转换方法。
Context.scalewill allow you to scale your content.
Context.scale将允许您扩展您的内容。
Context.translatewill 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>
