Question

我正在尝试在Canvas应用程序中实现类似平滑缩放的功能。

我已经可以使用它来缩放到预定义的缩放级别：

 $("#zoomToView").click(function () {
    paper.view.zoom=5.0;
    });

平滑zomming的大多数示例都与鼠标滚轮实现有关，但我想使用一个按钮来缩放到预定义的级别并返回。

我的印象是，实现与FOR循环有关，某种自适应延迟随着循环次数的增加而变大。

有什么想法吗？

我使用Paper.js作为我的画布库，但这不应该是找到解决方案的一个因素。

Answer 1

以下是使用原生画布的示例，但如果需要，您可以替换paper.js。

这个概念是连续运行一个动画循环，只有在按钮关闭时才会调整图像大小。

http://jsfiddle.net/SW5jL/3/

示例代码：

<!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; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var cw=canvas.width;
    var ch=canvas.height;
    var iw,ih;

    var img=new Image();
    img.onload=start;
    img.src="https://www.w3schools.com/css/img_fjords.jpg";
    function start(){
        iw=img.width;
        ih=img.height;

        $("#test").mousedown(function(){ doAnimation=true; });
        $("#test").mouseup(function(){ doAnimation=false; });
        $("#test").mouseout(function(){ doAnimation=false; });

        requestAnimationFrame(animate);

        ctx.drawImage(img,cw/2-iw/2,ch/2-ih/2);

    }

    var scale=1.00;
    scaleDirection=0.01;
    var minScale=0.50;
    var maxScale=1.50;
    var doAnimation=false;

    function animate(){

        requestAnimationFrame(animate);

        if(doAnimation){

            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.drawImage(img,
                0,0,iw,ih,
                (cw-iw*scale)/2,(ch-ih*scale)/2,iw*scale,ih*scale
            );

            scale+=scaleDirection;
            if(scale<minScale || scale>maxScale){
                scaleDirection*=-1;
                scale+=scaleDirection;
            }

        }

    }

}); // end $(function(){});
</script>
</head>
<body>
    <button id="test">Animate</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

通过按钮而不是鼠标滚轮在画布中平滑缩放

1 个答案: