Как избежать обрезки изображения при повороте <canvas>? - PullRequest
Новая
       11

Как избежать обрезки изображения при повороте <canvas>?

15 голосов
/ 13 декабря 2008

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

Пример: 

<html>
    <head>
        <title>test</title>
        <script type="text/javascript">
            function startup() {
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                var img = new Image();
                img.src = 'player.gif';
                img.onload = function() {
                    ctx.rotate(5 * Math.PI / 180);
                    ctx.drawImage(img, 0, 0, 64, 120);
                }
            }
        </script>
    </head>
    <body onload='startup();'>
        <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
    </body>
</html>

Ответы [ 4 ]

9 голосов
/ 19 июня 2009

В дополнение к повороту холста перед поворотом вам нужно будет снова использовать «перевод» непосредственно перед размещением изображения, например: 

ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180);  // for 5 degrees like the example from Vincent

А потом, перед добавлением изображения, используйте перевод еще раз 

ctx.translate(-85, -85);

Это сместит (0,0) координату ctx.drawImage (img, 0,0,10,10) обратно к ожидаемой 0,0 координате CANVAS.

5 голосов
/ 13 декабря 2008

Вращение всегда происходит вокруг текущего источника. Поэтому вы можете сначала использовать translate, чтобы перевести холст в положение, вокруг которого вы хотите повернуть (скажем, в центр), а затем повернуть.

, например 

ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180);

Холст теперь вращается вокруг (85, 85).

4 голосов
/ 22 июня 2009

или просто включите функции сохранения и восстановления в canvas 

ctx.save();
ctx.translate(85,85);
ctx.rotate(5 * Math.PI / 180);
ctx.fillRect(10,10,10,10);
ctx.restore();

Если вы хотите вращаться вокруг оси нарисованных объектов, вы должны были бы перевести объекты на x и y. Тогда при создании объекта его местоположение x будет отрицательной половиной его ширины, а y будет отрицательной половиной его высоты.

Пример: 

Square = {
    x:10,
    y:10,
    width:10,
    height:10,
    angle:5
}
ctx.save();
ctx.translate(Square.x,Square.y);
ctx.rotate(Square.angle * Math.PI / 180);
ctx.fillRect(-Square.width/2,-Square.height/2,Square.width,Square.height);
ctx.restore();

Надеюсь, это кому-нибудь поможет:)

0 голосов
/ 22 ноября 2011

Я создал полную функцию, которая упорядочивает изображение по углу и положению 

function drawImage(myContext,imgSrc, x, y, size, rotate) {<br/>
            var halfS = size / 2;<br/>
            var imageCursor = new Image();<br/>
            imageCursor.src = imgSrc;<br/>
            myContext.save();<br/>
            var tX = x - halfS;<br/>
            var tY = y - halfS;<br/>
            myContext.translate(tX, tY);<br/>
            myContext.rotate(Math.PI / 180 * rotate);<br/>
            var dX = 0, dY = 0;<br/>
            if (rotate == 0) { dX = 0; dY = 0; }<br/>
            else if (rotate > 0 && rotate < 90) { dX = 0; dY = -(size / (90 / rotate)); }<br/>
            else if (rotate == 90) { dX = 0; dY = -size; }<br/>
            else if (rotate > 90 && rotate < 180) { dX = -(size / (90 / (rotate - 90))); dY = -size; }<br/>
            else if (rotate == 180) { dX = dY = -size; }<br/>
            else if (rotate > 180 && rotate < 270) { dX = -size; dY = -size + (size / (90 / (rotate - 180))); }<br/>
            else if (rotate == 270) { dX = -size; dY = 0; }<br/>
            else if (rotate > 270 && rotate < 360) { dX = -size + (size / (90 / (rotate - 270))); dY = 0; }<br/>
            else if (rotate == 360) { dX = 0; dY = 0; }<br/>
            myContext.drawImage(imageCursor, dX, dY, size, size);<br/>
            myContext.restore();<br/>
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...