회전으로 이미지 컷오프를 피하는 방법?

StackOverflow https://stackoverflow.com/questions/365284

  •  21-08-2019
  •  | 
  •  

문제

캔버스를 사용하여 이미지를 회전하면 차단됩니다. 어떻게 피해야합니까? 이미 이미지보다 캔버스 요소를 더 크게 만들었지 만 여전히 가장자리를 차단하고 있습니다.

예시:

<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>
도움이 되었습니까?

해결책

회전은 항상 현재 기원 주변에서 발생합니다. 따라서 먼저 번역을 사용하여 캔버스를 회전하려는 위치 (예 : 중심)로 번역 한 다음 회전 할 수 있습니다.

예를 들어

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

캔버스는 이제 주위에 회전합니다 (85, 85).

다른 팁

회전하기 전에 캔버스를 회전시키는 것 외에도 이미지를 배치하기 직전에 다시 "번역"을 사용해야합니다.

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

그리고 이미지를 추가하기 직전에 다시 번역하십시오.

ctx.translate(-85, -85);

이것은 Ctx.DrawImage (IMG, 0,0,10,10)의 (0,0) 좌표를 캔버스의 예상 0,0 좌표로 다시 이동합니다.

또는 단순히 캔버스에 저장 및 복원 기능을 포함 시키십시오.

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();

이것이 누군가를 돕기를 바랍니다 :)

각도와 위치에 따라 이미지를 배열하는 완전한 기능을 만들었습니다.

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/>
        }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top