Изображение не вращается внутри холста - PullRequest
Новая
       8

Изображение не вращается внутри холста

0 голосов
/ 28 февраля 2019

Я искал через stackoverflow и нашел некоторый код, который поможет вращать изображение, но он не работает.Я не вижу никаких ошибок, и он получает радианы и градусы, поэтому все должно работать, но изображение внутри холста не поворачивается.

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

<script type="text/javascript">

    var mouseDown = false;
    var intID;
    var mouse_x = 0;
    var mouse_y = 0;        
    var canvas;            
    var img;

    function init()
    {
        canvas = document.getElementById("wheelCanvas");
        img = new Image();
        img.src = 'images/wheel.png';

        img.onload = function() {
            var ctx = canvas.getContext("2d");        

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, img.width, img.height);
        }

        canvas.onmousedown = function(event)
        {
            mouseDown = true;
            intID = setInterval(rotateWheel, 100);                
        }

        canvas.onmouseup = function(event)
        {
            mouseDown = false;
            clearInterval(intID);
        }

        canvas.onmousemove = function(event)
        {
            if(mouseDown)
            {
                mouse_x = event.pageX;
                mouse_y = event.pageY;
            }
        }

        document.onmouseup = function(event)
        {
            mouseDown = false;
            clearInterval(intID);
        }
    }

    function rotateWheel()
    {
        var ctx = canvas.getContext("2d"); 

        var center_x = canvas.width / 2;
        var center_y = canvas.height / 2;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = Math.round((radians * (180 / Math.PI) * -1) + 180);

        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.translate(425,425);
        ctx.rotate(degree*(Math.Pi/180));
        ctx.drawImage(img, -img.width/2, -img.height/2);
        ctx.restore();
        console.log(degree);

        if(!mouseDown) { clearInterval(intID); }
    }
</script>

1 Ответ

0 голосов
/ 28 февраля 2019

Вы набрали "Math.Pi" вместо "Math.PI" в строке 

    ctx.rotate(degree*(Math.Pi/180));

Рабочая скрипка: https://jsfiddle.net/ezvj9rns/

...