Блог

Главная - Вопросы по программированию - Плавное масштабирование холста с помощью кнопки вместо колеса мыши

Плавное масштабирование холста с помощью кнопки вместо колеса мыши

#javascript #canvas

#javascript #холст

Вопрос:

Я пытаюсь реализовать что-то вроде плавного масштабирования в приложении Canvas.

Я уже могу увеличить масштаб до предопределенного уровня масштабирования, используя это:

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

Большинство примеров плавного зоммирования относятся к реализациям колесика мыши, но я хотел бы вместо этого использовать кнопку, которая увеличивает масштаб до заранее определенного уровня и обратно.

У меня сложилось впечатление, что реализация имеет какое-то отношение к циклу FOR и какой-то адаптивной задержке, которая увеличивается по мере увеличения количества циклов.

Есть идеи?

Я использую Paper.js как моя библиотека canvas, но это не должно быть фактором при поиске решения.

Ответ №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. Спасибо, Марк. Единственная реальная разница в том, что я могу увеличивать масштаб с помощью paper.view.zoom in paper.js , поэтому нет необходимости заботиться об изменении размера элементов. У вас есть время рассказать мне, что действительно нужно удалить и заменить в вашем примере, чтобы сделать это? Ваш пример работает хорошо.

2. Вместо ctx.drawImage используйте scale переменную paper.view.zoom. В качестве альтернативы вы могли бы использовать .scale для слоев или групп.