Javascript combiné avec Canvas pour obtenir des compétences effect_javascript en matière de rotation d'image

Sur Weibo, nous pouvons faire pivoter les images vers la gauche, la droite, etc., afin que les utilisateurs puissent apprécier les effets d'image sous différentes perspectives. Cet article utilisera des exemples pour vous expliquer comment utiliser Javascript et les technologies associées pour obtenir l'effet de rotation des images. Nous utilisons la balise HTML5 canvas pour faire pivoter les images. Pour les navigateurs comme IE6, 7 et 8 qui ne prennent pas en charge HTML5, nous utilisons les effets de filtre uniques d'IE pour réaliser la rotation des images.

HTML

Nous plaçons une image sur la page, plaçons deux boutons au-dessus de l'image et appelons la fonction rotate() via l'événement onclick pour contrôler la rotation de l'image à gauche ou à droite.

<div id="tool"> 
   <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a> 
   <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a> 
</div> 
<div id="img"> 
   <img src="demo.jpg" width="460" height="305" alt="" id="myimg" /> 
</div> 

Javascript

function rotate(obj,arr){ 
  var img = document.getElementById(obj); 
  if(!img || !arr) return false; 
  var n = img.getAttribute('step'); 
  if(n== null) n=0; 
  if(arr=='left'){ 
    (n==0)? n=3:n--; 
  }else if(arr=='right'){ 
    (n==3)? n=0:n++; 
  } 
  img.setAttribute('step',n); 
  ... 
} 

Nous avons écrit une fonction personnalisée rotate(), dans laquelle le paramètre obj représente l'identifiant de l'objet image à faire pivoter, et le paramètre arr représente le sens de rotation, avec deux valeurs fixes : left (vers la gauche) et à droite (à droite). Nous définissons la variable n pour enregistrer les quatre états de rotation haut, bas, gauche et droite. Lorsque vous cliquez sur le bouton de rotation, l'état de rotation continue peut être garanti, c'est-à-dire que chaque rotation est à nouveau pivotée en fonction de la dernière opération de rotation.

Ensuite, nous devons effectuer différents traitements selon les différents navigateurs. Pour les navigateurs IE, vous pouvez utiliser leurs filtres uniques pour obtenir l'effet de rotation, bien que nous ne recommandons pas d'utiliser des filtres, afin d'être compatible avec les anciennes versions d'IE. , Il a fallu revenir à ce vieux couteau.

function rotate(obj,arr){ 
  ... 
  //对IE浏览器使用滤镜旋转 
  if(document.all) { 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  // 对现代浏览器写入HTML5的元素进行旋转： canvas 
  }else{ 
    ... 
  } 
} 

Dans le code, nous utilisons document.all pour déterminer s'il s'agit d'un navigateur IE, et si c'est le cas, utilisons un filtre. Pour les navigateurs modernes tels que Firefox et Chrome, nous utilisons canevas pour obtenir l'effet de rotation.

function rotate(obj,arr){ 
  ... 
  // 对现代浏览器写入HTML5的元素进行旋转： canvas 
  }else{ 
    var c = document.getElementById('canvas_'+obj); 
    if(c== null){ 
      img.style.visibility = 'hidden'; 
      img.style.position = 'absolute'; 
      c = document.createElement('canvas'); 
      c.setAttribute("id",'canvas_'+obj); 
      img.parentNode.appendChild(c); 
    } 
    var canvasContext = c.getContext('2d'); 
    switch(n) { 
      default : 
      case 0 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(0 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, 0); 
        break; 
      case 1 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(90 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, -img.height); 
        break; 
      case 2 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(180 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, -img.height); 
        break; 
      case 3 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(270 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, 0); 
        break; 
    }; 
  } 
} 

Dans le code, nous créons l'objet élément canevas et attribuons l'image à l'objet canevas. Lorsque la variable n est dans différents états (directions haut, bas, gauche et droite), le canevas est utilisé pour redessiner l'image. .

Bien sûr, il existe une autre solution pour obtenir l'effet de rotation d'image, qui consiste à contourner HTML5 et à cibler différents navigateurs. Par exemple, sous Firefox, vous pouvez utiliser -moz-transform: rotate(); use -webkit-transform: rotate (); Mais ce n'est pas aussi bon que l'implémentation canevas de html5.

Ce qui précède est tout le contenu partagé avec vous dans cet article. J'espère que vous l'aimerez.