水平旋轉圖像onClick

這工作垂直，但我想通過點擊圖像水平旋轉。無法弄清楚這一點！或者也可能有一個更簡單的方法來做到這一點。水平旋轉圖像onClick

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Flip Image</title> 
     <style> 
      canvas{border:1px solid #333} 
      img{display:none;} 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  </script> 
     <script type="text/javascript"> 
      $(window).load(function(){ 

       var immagine = $('img')[0] 
       alt=immagine.height 
       lar=immagine.width 
       $('<canvas width="'+lar+'" height="'+alt+'"></canvas>').appendTo('body') 
       var ca=$('canvas').get(0) 
       ctx=ca.getContext('2d') 
       ctx.drawImage(immagine, 0, 0); 

       $('canvas').click(function(){ 
        ctx.translate(lar-1, alt-1); 
        ctx.rotate(Math.PI); 
        ctx.drawImage(immagine, 0, 0, lar, alt); 
       }) 

      }) 
     </script> 
    </head> 
    <body> 
     <!-- onclick rotate image horizontally--> 
     <img src="myimage.jpg"> 

     <br><Br> 

    </body> 
</html>

謝謝！

來源

2014-03-04 Andre

這可能有助於http://stackoverflow.com/questions/968642/rotate-image-clockwise-or-anticlockwise -inside-a-div-using-javascript – user2728841

您可以通過一個簡單的數學邏輯將圖像旋轉到任意角度。例如，如果你想旋轉圖像到90度。只需使用：

ctx.rotate(90 * Math.PI/180);

您可以在上面的代碼中設置您想要的角度並旋轉圖像。

UPDATE 我正在根據您的需要添加一些代碼。在畫布上點擊，這將在一個方向旋轉圖像。

var angleInDegrees=0; 

$('canvas').click(function(){ 
    angleInDegrees+=90; 
    drawRotated(angleInDegrees); 
}) 
function drawRotated(degrees){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.save(); 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.rotate(degrees*Math.PI/180); 
    ctx.drawImage(image,-image.width/2,-image.width/2); 
    ctx.restore(); 
}

來源

2014-03-04 15:26:47

我在代碼中添加了該代碼，但不幸的是它不工作！ – Andre

這是否做了任何改變旋轉？你試過什麼角度？ –

一點都沒有改變，你能展示一下你在說什麼嗎？謝謝 – Andre

我同意Rajesh的評論，你可以設置你的角度，並根據之前執行的翻譯進行旋轉。有時候我更喜歡在畫布上使用webkit。這裏是一個使用CSS webkit水平旋轉的小提琴，在我看來這更簡單。 Horizontal Rotation Using Webkit

.rotate img{ 
-webkit-transform: rotateY(180deg); 
-webkit-transition: -webkit-transform 1s, z-index 0s 0.25s; 
z-index: -2; }

來源

2014-03-04 16:08:32 XNull

但這不是我正在尋找的，我有一個圖像垂直顯示，我想點擊它，並讓它水平顯示。 – Andre

嗯，我對y軸的翻轉感到困惑。然後你可以使用'-webkit-transform：rotate（90deg）;'不用Y. [檢查更新的jsfiddle]（http://jsfiddle.net/youssefselim/8SV8T/3/） – XNull

比瀏覽器兼容性問題，它在Firefox中工作。 – Andre

檢查的jsfiddle可以幫助它

.imageRotateHorizontal{ 
    -moz-animation: spinHorizontal .8s infinite linear; 
    -o-animation: spinHorizontal .8s infinite linear;  
    -webkit-animation: spinHorizontal .8s infinite linear; 
    animation: spinHorizontal .8s infinite linear; 
} 

@keyframes spinHorizontal { 
    0% { transform: rotateY(0deg); } 
    100% { transform: rotateY(360deg); } 
}

http://jsfiddle.net/AB277/7/

來源

2015-10-16 16:48:10

水平旋轉圖像onClick

回答

相關問題