그림을 회전시키는 3가지 솔루션

그림 회전 효과에 대한 연구는 최근 프로젝트에서 그림의 회전 기능을 해야 하기 때문에 연구를 해 봤습니다.다음은 그림이 각 브라우저에서 회전하는 지원 상황을 총괄한다
1. 그림 회전 방안
1) css3은 그림 회전 기능을 실현한다. 지원하는 브라우저는 크롬, Firefox가 있다.opera는 지원하지 않습니다.
구체적인 코드는:-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);상술한 코드는 그림을 시계 방향으로 90도 회전시키는 것이지만 사실은 임의의 도수를 회전시킬 수 있다.그러나 css3을 지원하는 브라우저는 크롬,firefox3만 있습니다.6, 사파리, i 브라우저는 지원되지 않습니다.그럼 IE 씨는 어떻게 할까요?그래서 아래의 방안이 생겼다
2) IE에서 필터로 회전
구체적인 코드는 filter:progid:DXImageTransform입니다.Microsoft.BasicImage(rotation=1);여기의rotation 매개 변수는 0,1,2,3으로 이 숫자에 90을 곱한 후의 회전 각도를 나타낸다.IE에서 임의의 각도를 돌리려면 매트릭스 변환 필터를 사용해야 한다. 우리가 일상적으로 사용하는 과정에서 대부분은 90의 배수를 바꾸는 것을 사용하는데 여기서 임의의 각도를 논의하지 않는다.그러나 문제가 있다. 만약에 i 브라우저가 아니라면 CSS3를 지원하지 않는다면 그림의 회전을 실현한다면 사실 canvas도 그림을 회전할 수 있다.
3) 캔버스로 그림의 회전
canvas는 크롬, Firefox,opera 등 브라우저에서 모두 지원합니다. 그는 자바스크립트를 기반으로 한 그림 API를 가지고 있습니다.우선 canvas+JavaScript를 이용하여 그림의 회전을 어떻게 하는지 살펴보겠습니다.
코드는 다음과 같습니다.

 
  
var test = function(){ 
  
        var canvas = document.getElementById("result"); 
  
        var oImg = document.getElementById("Img");        
  
        canvas.height = 300; 
  
        canvas.width = 200; 
  
        var context = canvas.getContext("2d"); 
  
        context.save(); 
  
        context.translate(200,0); 
  
        context.rotate(Math.PI/3); 
  
        context.drawImage(oImg, 0, 0, 300, 200); 
  
        context.restore(); 
  
        oImg.style.display = "none"; 
  
}; 
  
 
 

상술한 코드는 먼저 canvas 대상을 얻은 다음에 그의 높이를 설정하고 그림을 그리기 시작했다.이것은 canvas의 중심점과 회전 각도를 바꾸고 그림을 canvas에 그려서 저장하고 이전의 그림을 숨깁니다.이런 방법의 실현은 여전히 비교적 매끄럽다.
2. 각종 방안의 대비 css3의 실현 방안은 원시 그림이 차지하는 공간의 크기를 바꾸지 않지만 i의 필터는 그림이 차지하는 공간의 크기를 바꾼다.사실 i 아래에서도 canvas를 지원할 수 있습니다. canvas의 스크립트만 인용하면 됩니다.이것은 구글에서 제공하는 것이다.그러나 이 스크립트는 좀 크다. 압축하기 전에 20여 k가 있는데 나는 i에서 필터를 사용해서 실현하고 다른 브라우저는 canvas 라벨을 사용해서 실현하는 것을 권장한다.