缩放和平移 HTML5 画布 - 库
Posted
技术标签:
【中文标题】缩放和平移 HTML5 画布 - 库【英文标题】：Zoom and pan HTML5 canvas - library 【发布时间】：2014-09-14 10:49:10 【问题描述】：我正在尝试实现缩放和平移包含图片的画布。 我找到了这个例子http://phrogz.net/tmp/canvas_zoom_to_cursor.html，但是转换是应用于带有画布的图片，而不是画布本身。 我不完全理解代码，所以我没有设法根据我的需要定制它。 有人可以帮我吗？
或者，如果您可以向我推荐一些适合我需要的好图书馆，那就太好了。 谢谢。
【问题讨论】：
为什么需要移动画布本身而不是画布内的图像？ 因为我有两个重叠的画布元素，一个用于保存图片，另一个用于在其上绘图。所以当图片被移动/缩放时，另一个画布应该跟随。 【参考方案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;
#wrapperposition:relative;
canvasposition: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 画布 - 库的主要内容，如果未能解决你的问题，请参考以下文章
使用 HTML5 Canvas 和 KineticJS 在 Android Webview 上平移、缩放性能不佳