logo标签列表

缩放和平移HTML5画布 - 库

javascriptjqueryhtmlcanvaszooming
10
我正在尝试实现对包含图片的画布进行缩放和平移。我找到了这个例子，但是变换应用在画布内部的图片上，而不是画布本身。我没有完全理解代码，因此无法按照我的需要进行自定义。有人能帮我吗？
或者，如果您可以为我的需求推荐一些好的库，那就太棒了。谢谢。
3
为什么需要移动画布本身而不是画布内部的图像？ - Timothy Groote
1
因为我有两个叠加的画布元素，一个用于容纳图片，另一个用于在其上绘图。因此，当图片被移动/缩放时，另一个画布应该跟随移动。 - nena
1个回答
12

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

Context.scale可以让您缩放内容。

Context.translate可以让您偏移绘制内容以创建平移效果。

如果您想让两个重叠的画布保持它们的纵横比，则应将两个画布按相同的比例进行缩放和平移。

以下是示例代码和演示：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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接