Question

我试图实现缩放和平移包含图片的画布。我找到了这个例子http://phrogz.net/tmp/canvas_zoom_to_cursor.html，但转换是用画布应用于图片，而不是画布本身。我完全不了解代码，所以我没有设法根据自己的需要进行自定义。有人可以帮我吗？

或者，如果您可以向我推荐一些适合我需求的好图书馆，那就太棒了。感谢。

Answer 1

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

Context.scale可让您扩展内容。

Context.translate将允许您偏移内容的绘图以创建平移效果。

如果您想要2张重叠的画布来保持其宽高比，那么您可以缩放＆amp;将两幅画布翻译相同的数量。

以下是示例代码和演示：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 个答案: