캔버스 이미지 재배치 및 회전 (가운데)

캔버스에는 이미지와 직사각형이 있습니다. 이미지는 캔버스의 중심을 중심으로 회전해야하므로 중심에 배치하지만 번역하면 객체를 드래그 할 수 없습니다 (이유는 알 수 없음).캔버스 이미지 재배치 및 회전 (가운데)

드래그 할 때 이미지와 직사각형을 함께 드래그 할 수 있어야합니다. 회전 할 때 이미지 만 회전 할 수 있어야하고 사각형은 정적이어야합니다 (그대로 회전).

누구나 다음 코드를 도움이 될 수 있습니까?

    var canvas = document.getElementById("canvas"); 
 
        var ctx = canvas.getContext("2d"); 
 
    
 
        var canvasOffset = $("#canvas").offset(); 
 
        var offsetX = canvasOffset.left; 
 
        var offsetY = canvasOffset.top; 
 
    
 
        var startX; 
 
        var startY; 
 
        var isDown = false; 
 
    
 
    
 
        var pi2 = Math.PI * 2; 
 
        var resizerRadius = 6; 
 
        var rr = resizerRadius * resizerRadius; 
 
        var draggingResizer = { 
 
         x: 0, 
 
         y: 0 
 
        }; 
 
        var imageX = 0; 
 
        var imageY = 0; 
 
        var imageWidth, imageHeight, imageRight, imageBottom; 
 
        var draggingImage = false; 
 
        var startX; 
 
        var startY; 
 
    
 
        var img = new Image(); 
 
        img.onload = function() { 
 
         imageWidth = img.width; 
 
         imageHeight = img.height; 
 
         imageRight = imageX + imageWidth; 
 
         imageBottom = imageY + imageHeight 
 
         draw(); 
 
        } 
 
        img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png"; 
 
    
 
        var x = canvas.width/2, y = canvas.height/2; 
 
    
 
        function draw() { 
 
         canvas.width = canvas.width; 
 
         ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
         ctx.save(); 
 
         
 
         //I have problem here! 
 
         //ctx.translate(x + imageX, y + imageY); 
 
    
 
         ctx.rotate($('#rvalue').val() * Math.PI/180); 
 
         ctx.drawImage(img, imageX, imageY); 
 
         ctx.restore(); 
 
         
 
         ctx.rect(imageX + 160, imageY + 30, 120, 40); 
 
         ctx.strokeStyle = "red"; 
 
         ctx.stroke(); 
 
        } 
 
    
 
    
 
        function hitImage(x, y) { 
 
         return (x > imageX && x < imageX + imageWidth && y > imageY && y < imageY + imageHeight); 
 
        } 
 
    
 
    
 
        function handleMouseDown(e) { 
 
         startX = parseInt(e.clientX - offsetX); 
 
         startY = parseInt(e.clientY - offsetY); 
 
         draggingImage = hitImage(startX, startY); 
 
        } 
 
    
 
        function handleMouseUp(e) { 
 
         draggingImage = false; 
 
         draw(); 
 
        } 
 
    
 
        function handleMouseOut(e) { 
 
         handleMouseUp(e); 
 
        } 
 
    
 
        function handleMouseMove(e) { 
 
         if (draggingImage) { 
 
          imageClick = false; 
 
          mouseX = parseInt(e.clientX - offsetX); 
 
          mouseY = parseInt(e.clientY - offsetY); 
 
          var dx = mouseX - startX; 
 
          var dy = mouseY - startY; 
 
          imageX += dx; 
 
          imageY += dy; 
 
          imageRight += dx; 
 
          imageBottom += dy; 
 
          startX = mouseX; 
 
          startY = mouseY; 
 
          draw(); 
 
         } 
 
        } 
 
    
 
    
 
        $("#canvas").mousedown(function(e) { 
 
         handleMouseDown(e); 
 
        }); 
 
        $("#canvas").mousemove(function(e) { 
 
         handleMouseMove(e); 
 
        }); 
 
        $("#canvas").mouseup(function(e) { 
 
         handleMouseUp(e); 
 
        }); 
 
        $("#canvas").mouseout(function(e) { 
 
         handleMouseOut(e); 
 
        }); 
 
        $("#rotate").click(function(event) { 
 
         var c = parseInt($('#rvalue').val()); 
 
         $('#rvalue').val(c + 90); 
 
         draw(); 
 
        });

<!DOCTYPE HTML> 
 
     <html lang="en"><head> 
 
      <meta charset="UTF-8" /> 
 
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
      <style type="text/css">#canvas { border: 1px solid #000; }</style> 
 
     </head> 
 
     <body> 
 
      <input type=text value="0" id="rvalue" /> 
 
      <button id=rotate>Rotate</button><br> 
 
       <canvas id="canvas" width=600 height=400></canvas> 
 
     </body> 
 
    </html>

출처

2014-11-10 Pujan Srivastava

나는 캔버스 약간 녹슨 해요,하지만, 번역, 다시 번역 회전, 그리고 그릴 도움이 될 것이다?

ctx.translate(centerx, centery); 
ctx.rotate($('#rvalue').val() * Math.PI/180); 
ctx.translate(-centerx, -centery); 

ctx.drawImage(img, imageX, imageY);

출처

2014-11-11 01:15:18 WonderfulDay

감사 @WonderfulDay, 단순한 접근 방식.! 좋은 하루 되세요. –

캔버스 이미지 재배치 및 회전 (가운데)

답변

관련 문제