✔ Bild um x° drehen

[Quaese]

Hi,

unter http://sourceforge.net/projects/excanvas/ findet sich sogar eine Bibliothek, mit deren Hilfe diese Features für den IE in abgespeckter Version simuliert werden.

Was mich wundert, dass der Opera 9.6 das canvas-Element nicht anzeigt - denn laut Opera-Doku sollte es seit Version 9 zur Verfügung stehen. Meine 9.52er Version zeigt es auch an.

Ciao
Quaese

 

[Maik]

Sorry, ich muß meine Aussage da leicht revidieren: Opera 9.6 wirft die Meldung überhaupt nicht aus, rendert aber auch nicht das Grafikelement in den <canvas>-Tag - zumindest seh ich da nichts, die Fehlerkonsole hat aber auch nichts zu beanstanden.

mfg Maik

 

[Nord-Süd-Richtung]

Hi,

also wenn bei mir die Grafikreferenz nicht stimmt, wie kann ich diese denn stimmig machen?

 

[Maik]

In dieser Scriptzeile wird der Pfad zur Grafikdatei gesetzt:

    objImg.src = "bild.jpg";  // Breite: 120 px, Höhe: 120px

mfg Maik

 

[Nord-Süd-Richtung]

Hi,

verdammt, ich hatte das irgendwie falsch verstanden... Ok super, bei mir klappt es (ich dachte der Rahmen sollte sich drehen...)
Ich bin begeister!
Nur wie kann ich die mehrfach Darstellung vermeiden?

 

[Quaese]

Hi,

mit der Methode clearRect des Kontext-Objekts lässt sich der canvas-Bereich löschen.

Schau dir mal das Beispiel hier an - beim Betätigen des linken Buttons wird dort das Bild ohne Drehung gezeichnet, die rechte Schaltfläche dreht es um 120°.

Ciao
Quaese

 

[Nord-Süd-Richtung]

Hi,

danke für den Tipp, aber das Bild dreht sich dann ja nur einmal, oder? Gibt es keine Möglichkeit, das alte Bild zu löschen, und dann das neue zu Zeichnen?

 

[Quaese]

Hi,

ich weiss nicht, ob ich dich richtig verstanden habe.

Du kannst doch die Funktion zum Drehen dahingehend abändern, dass sie neben dem Drehwinkel eine Bildquelle entgegennimmt. Handelt es sich beim aktuellen Bildobjekt nicht um das gewünschte, wird es erstellt und die Funktion erneut aufgerufen.

Beispiel

function rotateIt(lngPhi, strImg){
  // Falls das Bildobjekt nicht existiert ODER ein anderes Bild angezeigt werden soll
  // => Bild neu generieren und Funktion erneut aufrufen
  if((typeof objImg=="undefined") || (objImg.src.search(new RegExp(strImg))==-1)){
    objImg = new Image();
    objImg.onload = function(){
      rotateIt(lngPhi, strImg);
    }
    objImg.src = strImg;

    return;
  }

  clearIt();                                // Canvas leeren
  objContext.save();                        // Kontext "speichern"
  objContext.translate(120, 120);           // Ursprung verschieben
  objContext.rotate((lngPhi*Math.PI/180));  // Context drehen
  objContext.drawImage(objImg, -75, -60);   // Bild zentriert zeichnen
  objContext.restore();                     // Kontext wiederherstellen
}

Ciao
Quaese

 

[Nord-Süd-Richtung]

Hi,

ich weiß nicht ob ich dich richtig verstehe. Ich möchte die Funktion gerne so umschreiben, das man damit z.b. das Bild eines Autoreifens (oder so) zum Drehen bekommt.
Mein jetztiger Versuch scheitert an der "Bewegung" an sich, das heißt, es hat sich vorher einmal gedreht, hat aber die alten Bilder dagelassen. Jetzt bin ich soweit, das es sich einmal dreht, und dann ist schluss:

function rotateIt(lngPhi, strImg){
  if( (typeof objImg=="undefined") || (objImg.src.search(new RegExp(strImg))==-1) ){
    objImg = new Image();
    objImg.onload = function(){
      rotateIt(lngPhi, strImg);
    }
    objImg.src = strImg;

    return;
  }

  clearIt();                                // Canvas leeren
  objContext.save();                        // Kontext "speichern"
  objContext.translate(6, 6);           // Ursprung verschieben
  objContext.rotate((lngPhi*Math.PI/180));  // Context drehen
  objContext.drawImage(objImg, 50, 50);   // Bild zentriert zeichnen
  objContext.restore();                     // Kontext wiederherstellen
}

function clearIt(){
        objContext.clearRect(0, 0, 240, 240);
}
setInterval("rotateIt(6, 'bild.jpg')", 1500);

 

[Quaese]

Hi,

schau dir mal dieses Beispiel an - mit animierter Drehung.

Ciao
Quaese