캔버스에 2 개의 이미지 회전

캔버스에 3 개의 이미지를 그리고 2 개의 이미지를 회전해야합니다.캔버스에 2 개의 이미지 회전

이미지는 수직 직선 2 단지 수평 라인 3. 큰 원형 이미지 나 캔버스의 중앙에 1 2 개 이미지를 회전 할 필요가

와 1. 원형 같다.

var canvas = document.getElementById('NewImage'); 
    var context = canvas.getContext('2d'); 
    context.canvas.width = window.innerWidth; 
    context.canvas.height = window.innerHeight*0.7; 
    var imageObj = new Image(); 
    var imageObj2 = new Image(); 
    var imageObj3 = new Image(); 

    imageObj.onload = function() { 
     context.save();  
     context.translate(imageObj.width/2,imageObj.height/2); 
     context.rotate(-10*Math.PI/180); 
     //context.translate(-imageObj.width/2,-imageObj.height/2); 
     context.drawImage(imageObj,-(imageObj.width/2),-(imageObj.height/2),context.canvas.width,context.canvas.height*0.85); 
     context.restore(); 
     context.save(); 
     context.globalCompositeOperation="source-over"; 
     context.translate(imageObj2.width/2,imageObj2.height/2); 
     context.rotate(-10*Math.PI/180); 
     context.translate(-imageObj2.width/2,-imageObj2.height/2); 
     context.drawImage(imageObj2, x, y,context.canvas.width,6); 
     context.restore(); 
     //context.rotate(10*Math.PI/180); 
     context.drawImage(imageObj3, 0, 0,context.canvas.width,context.canvas.height*0.9); 

    }; 
    imageObj.src = 'canvas/inner_circle_blackline_vertical.png'; 
    imageObj2.src = 'canvas/horizontal.png'; 
    imageObj3.src = 'canvas/outer_circle.png';

회전하려고하면 이미지가 가운데로 회전하지 않습니다. 첫 번째 2 개의 이미지가 회전하면 "X"기호처럼 보입니다.

캔버스의 중심에서 어떻게 회전합니까?

감사합니다 :)

출처

2013-07-05 Beginner

@Gajotres 당신이 나를 도와주세요 수는 이? – Beginner

당신이 얻는 것을 보여주는 [피들] (http://jsfiddle.net)을 만들면 조금 더 쉽게 도움이 될 것입니다. –

설계된대로 imageObj2 및 imageObj3은로드되지 않습니다.

다음은 모든 이미지를로드하고 imgs []라는 배열에 저장하는 일반적인 이미지 로더입니다.

모든 이미지가 완전히로드되면 render() 함수가 호출됩니다. 그것이 그림 그리기를 시작하는 곳입니다.

// This is an image loader 
// When render() is called, all your images are fully loaded 
var imgURLs = [ 
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"]; 
var imgs=[]; 
var imgCount=0; 

pre_load(); 

function pre_load(){ 

    for(var i=0;i<imgURLs.length;i++){ 

     var img=new Image(); 
     imgs.push(img); 
     img.onload=function(){   

      if(++imgCount>=imgs.length){ 
       // images are now fully loaded 
       render(); 
      } 

     } 
     img.src=imgURLs[i]; 
    } 
}

render()에서 이미지를 그릴 수 있습니다.

동일한 동작 (이미지 회전)이 반복적으로 수행되므로 회전 된 드로잉을 수행하는 도우미 함수를 만들 수 있습니다. 여기서 도우미 함수는 drawImageAtAngle입니다. 여기

// draw the rotated lines on the canvas 
function render(){ 

    var x=canvas.width/2; 
    var y=canvas.height/2; 

    drawImageAtAngle(imgs[0],x,y,-45); 
    drawImageAtAngle(imgs[2],x,y,45); 
    drawImageAtAngle(imgs[1],x,y,0); 
}

공급 된 각도에 제공된 이미지를 회전하는 도우미 함수 :

여기

function drawImageAtAngle(image,X,Y,degrees){ 
    var radians=degrees*Math.PI/180; 
    var halfWidth=image.width/2; 
    var halfHeight=image.height/2; 
    ctx.beginPath(); 
    ctx.save(); 
    ctx.translate(X,Y); 
    ctx.rotate(radians); 
    ctx.drawImage(image,-halfWidth,-halfHeight); 
    ctx.restore(); 
}

코드와 바이올린입니다 : http://jsfiddle.net/m1erickson/ZShWW/

<!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; padding:10px;} 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // This is an image loader 
    // When render() is called, all your images are fully loaded 
    var imgURLs = [ 
     "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
     "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
     "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"]; 
    var imgs=[]; 
    var imgCount=0; 

    pre_load(); 

    function pre_load(){ 

     for(var i=0;i<imgURLs.length;i++){ 

      var img=new Image(); 
      imgs.push(img); 
      img.onload=function(){   

       if(++imgCount>=imgs.length){ 
        // images are now fully loaded 
        render(); 
       } 

      } 
      img.src=imgURLs[i]; 
     } 
    } 


    // draw the rotated lines on the canvas 
    function render(){ 

     var x=canvas.width/2; 
     var y=canvas.height/2; 

     drawImageAtAngle(imgs[0],x,y,-45); 
     drawImageAtAngle(imgs[2],x,y,45); 
     drawImageAtAngle(imgs[1],x,y,0); 
    } 


    function drawImageAtAngle(image,X,Y,degrees){ 
     var radians=degrees*Math.PI/180; 
     var halfWidth=image.width/2; 
     var halfHeight=image.height/2; 
     ctx.beginPath(); 
     ctx.save(); 
     ctx.translate(X,Y); 
     ctx.rotate(radians); 
     ctx.drawImage(image,-halfWidth,-halfHeight); 
     ctx.restore(); 
    } 





}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>This is the line image</p> 
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"> 
    <p>The line image rotated at center of canvas</p> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

출처

2013-07-05 17:55:42 markE

답해 주셔서 감사합니다. 이 같은 것을 원합니다. 원형 이미지가 생겼으니 이제는 수직선 1 개와 수평선 1 개를 그려야합니다 (가로와 세로 사이의 각도는 90도 여야 함).이 작업을 수행 할 수 있습니다. 하지만 그 후에 나는 그들을 어느 정도 회전시켜야합니다. 둘 사이의 각도를 90 도로 유지해야합니다. 내가 어떻게 할 수 있니? 감사합니다 :) – Beginner

내 대답은 drawImageAtAngle 함수를 사용하면 어떤 각도로든 이미지를 그릴 수 있습니다. 수평 이미지와 수직 이미지 사이에 90도 각도를 지정하려면 지정하는 각도가 90도 다른지 확인하십시오. 예 : drawImageAtAngle (yourHorizImage, 150,150,120) + drawImageAtAngle (yourVertImage, 150,150,210)은 이미지를 90도 간격으로 회전시킵니다. 210도 ~ 120도). 그리고 horiz 및 vert 이미지에 대해 동일한 x, y를 지정하면 같은 중심으로 그려집니다. x, y는 x = canvas.width/2 y = canvas.height/2가됩니다. – markE

매우 포괄적 인 답변입니다. –

는 캔버스의 크기를 사용할 필요가 캔버스의 중심을 찾습니다. 코드에서 이미지의 크기를 사용하고 있습니다.

context.translate(imageObj.width/2,imageObj.height/2);

아마해야합니다 : 캔버스의 중심을 이동

context.translate(canvas.width/2,canvas.height/2);

즉,이 라인이다. 회전은 그 중심 주위에서 발생합니다. 그런 다음 원점을 중심으로 이미지를 그립니다. 그 부분은 옳았다.

그런 다음 회전과 역상을 뒤집습니다.

출처

2013-07-05 16:42:12

나는 그것을 시도했지만 didnt 일. 저는 원형 이미지를 가지고 있습니다. 이제는 수직선과 수평선을 가운데 하나에 그려야합니다 (가로와 세로 사이의 각도는 90도 여야 함). 하지만 그 후에 나는 그들을 어느 정도 회전시켜야합니다. 둘 사이의 각도를 90 도로 유지해야합니다. 내가 어떻게 할 수 있니? 감사합니다 :) – Beginner

캔버스에 2 개의 이미지 회전

답변

관련 문제