Javascript kombiniert mit Canvas, um Bildrotationseffekte zu erzielen_Javascript-Fähigkeiten

Auf Weibo können wir Bilder nach links, rechts usw. drehen, sodass Benutzer die Bildeffekte aus verschiedenen Perspektiven genießen können. In diesem Artikel wird anhand von Beispielen erläutert, wie Sie mithilfe von Javascript und verwandten Technologien den Rotationseffekt von Bildern erzielen. Wir verwenden das HTML5-Canvas-Tag, um Bilder zu drehen. Für Browser wie IE6, 7 und 8, die HTML5 nicht unterstützen, verwenden wir die einzigartigen Filtereffekte des IE, um eine Bilddrehung zu erreichen.

HTML

Wir platzieren ein Bild auf der Seite, platzieren zwei Schaltflächen über dem Bild und rufen über das onclick-Ereignis die Funktion „rotate()“ auf, um zu steuern, dass sich das Bild nach links oder rechts dreht.

<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); 
  ... 
} 

Wir haben eine benutzerdefinierte Funktion rotieren() geschrieben, in der der Parameter obj die ID des zu drehenden Bildobjekts darstellt und der Parameter arr die Drehrichtung mit zwei festen Werten darstellt: left (nach links) und rechts (nach rechts). Wir legen die Variable n fest, um die vier Rotationszustände „oben“, „unten“, „links“ und „rechts“ aufzuzeichnen. Wenn Sie auf die Schaltfläche „Drehen“ klicken, kann der kontinuierliche Rotationszustand garantiert werden, d. h. jede Drehung wird basierend auf dem letzten Rotationsvorgang erneut gedreht.

Dann müssen wir je nach Browser eine unterschiedliche Verarbeitung durchführen. Sie können deren einzigartige Filter verwenden, um den Rotationseffekt zu erzielen, obwohl wir die Verwendung von Filtern nicht empfehlen, um mit älteren Versionen des IE kompatibel zu sein , Wir mussten zu diesem alten Messer zurückkehren.

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

Im Code verwenden wir document.all, um festzustellen, ob es sich um einen IE-Browser handelt. Wenn ja, verwenden wir einen Filter. Bei modernen Browsern wie Firefox und Chrome verwenden wir Canvas, um den Rotationseffekt zu erzielen.

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; 
    }; 
  } 
} 

Im Code erstellen wir das Canvas-Elementobjekt und weisen das Bild dem Canvas-Objekt zu. Wenn sich die Variable n in verschiedenen Zuständen befindet (oben, unten, links und rechts), wird die Leinwand zum Neuzeichnen des Bildes verwendet .

Natürlich gibt es eine andere Lösung, um den Bildrotationseffekt zu erzielen, nämlich HTML5 zu umgehen und auf verschiedene Browser abzuzielen. Unter Firefox können Sie beispielsweise -moz-transform: rotation(); verwenden Verwenden Sie -webkit-transform: rotation (); Dies ist jedoch nicht so gut wie die Canvas-Implementierung von HTML5.

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, dass er Ihnen gefällt.