tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
316
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 10.02.12 12:17 #1
    chricken chricken ist offline Mitglied
    Registriert seit
    Feb 2004
    Beiträge
    20
    Hi,
    ich arbeite mich grad in das Thema Canvas ein und habe da ein massives Problem.
    Ich erstelle nämlich eine Diashow, welche die Bilder aus dem sichtbaren Bereich heraus schieben soll.
    Dazu muss ich jedes Bild innerhalb des Canvas einzeln verschieben können.
    Mein bisheriger Code war so aufgebaut, dass mit Hilfe eines Intervalls die Zeichenfunktion aufgerufen wird. Diese kopiert zunächst das nächste Bild in einen neuen Context als Hintergrund. Dann wird das vordere Bild (welches weggewischt wird) an die gewünschte Position kopiert, welche sich ändert.
    Das Problem ist nun, dass das ständige Kopieren, Skalieren und Zuschneiden zu langsam ist. Mit einem einzelnen Bild geht es grade noch, aber später will ich das Bild dynamisch verzerren, in Streifen schneiden und vieles mehr.
    Deshalb wünsche ich eine Möglichkeit, ein Bild einmal kopieren, skalieren und zuschneiden zu müssen und dann nur noch das fertige Element (bzw die fertigen Elemente) zu bewegen.
    Hoffentlich kann jemand helfen, das wäre großartig.

    Vielen Dank
    Chricken

    Wen es interessiert, mein bisheriger Code:
    HTML-Code:
    <!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #leinwand {
      position:relative;
      margin-left:5px;
      margin-right:5px;
      margin-top:5px;
      border:#000 1px solid;
      background:#fff;
      
    }
	#bilder {
		border:#f00 1px solid;
		position:absolute;
		visibility:hidden;
	}
	#weiter {
		background:#fa8;
		width:200px;
		height:200px;
		padding:50px;
		font-size:30px;
	}
  </style>
  
  <script type="application/javascript">
  var canvas;
  var ctx;
  var img;
  var anz_bilder=4;
  var bildbreite=800; //Breite des Bildes
  var bildhoehe=400; //Höhe des Bildes
  
  var posx=0; //Position, welche das Vordergrundbild gerade inne hat
  var posy=0;
  var id_move;
  
	var img = new Image();   // Create new img element 
  	function init(){
		//Alles vorbereiten
		canvas = document.getElementById("leinwand"); 
		ctx = canvas.getContext("2d");
		draw(1);
  	}
	function draw(i){
		ctx.clearRect(0,0,canvas.width,canvas.height);
		
		//Hintergrundbild
		if(i==1){
			img = document.getElementById("bild" + anz_bilder);
		}else{
			img = document.getElementById("bild" + (i-1));
		}
				
		if((img.width/img.height) >= (bildbreite/bildhoehe)){
			var temp = 0; //Um das Ursprungsbild zu zentrieren - ist noch nicht fertig.
			ctx.drawImage(img,temp,0,img.height/(bildhoehe/bildbreite),img.height,0,0,bildbreite,bildhoehe);
		}else{
			var temp = 0;
			ctx.drawImage(img,0,temp,img.width,img.width/(bildbreite/bildhoehe),0,0,bildbreite,bildhoehe);
		}
		
		//bewegtes Bild
		img = document.getElementById("bild" + i);
		if((img.width/img.height) >= (bildbreite/bildhoehe)){
			var temp = 0; //Um das Ursprungsbild zu zentrieren - ist noch nicht fertig.
			ctx.drawImage(img,temp,0,img.height/(bildhoehe/bildbreite),img.height,posx,posy,bildbreite,bildhoehe);
		}else{
			var temp = 0;
			ctx.drawImage(img,0,temp,img.width,img.width/(bildbreite/bildhoehe),posx,posy,bildbreite,bildhoehe);
		}
		posx += 3;
		
		//ggf slideshow stoppen
		if(posx > canvas.width){
			clearInterval(id_move);
		}
	}
	
	function move(i){
		//Slideshow starten
		id_move=setInterval(draw,20,i);
	}
  </script>
</head>
<body onLoad="init()">
<canvas id="leinwand" width="800" height="400"></canvas><br>
<div id="bilder">
<img src="bilder/bild1.jpg" width="480" height="640" id="bild1">
<img src="bilder/bild2.jpg" width="640" height="384" id="bild2">
<img src="bilder/bild3.jpg" width="554" height="554" id="bild3">
<img src="bilder/bild4.jpg" width="640" height="384" id="bild4">
</div>
<div id="weiter" onClick="move(1);">
Klick mich
<div>
</body>
</html>
     
    Zitieren Zitieren
  2. 10.02.12 14:45 #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Erstell dir mehrere canvas Elemente (document.createElement) und halte dort die skalierten Bilder bereit. Dann kannst du die eine canvas auf die andere Zeichnen. drawImage akzeptiert als ersten Parameter auch ein anderes canvas Element.
     
    Zitieren Zitieren
  3. 11.02.12 14:49 #3
    chricken chricken ist offline Mitglied
    Registriert seit
    Feb 2004
    Beiträge
    20
    Vielen Dank für den Tipp.
    Ich stelle aber grad fest, dass meine Angst unbegründet war.
    Als ich anfing sah es noch zweifelhaft aus, aber nun habe ich die Bilder spasseshalber in 60 * 60 Einzelteile zerschnitten, und es läuft einwandfrei auf Standard-PC-Hardware Inklusive Fading, Rotation, etc.
    Bin ziemlich beeindruckt von der Performance des Canvas-Elementes (auch wenn Flash immer noch um den Fakter 3-5 schneller ist )

    Lieben Gruß
    Chricken
     
    Zitieren Zitieren
« Radiobutton stylen | jQuery Tooltip »

Ähnliche Themen

  1. HTML5 - Canvas asynchron zeichnen.
    Von Danielku15 im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 04.10.10, 12:44
  2. Array auf Canvas zeichnen
    Von DerMaaarkus im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 4
    Letzter Beitrag: 04.10.10, 12:36
  3. Canvas neu zeichnen
    Von HTML5er im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 07.10.09, 18:09
  4. Java Canvas Zeichnen
    Von nathaniells freak im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 24
    Letzter Beitrag: 29.05.08, 14:09
  5. HELP!:canvas.rect bewegen!
    Von mangaka im Forum Delphi, Kylix, Pascal
    Antworten: 1
    Letzter Beitrag: 30.04.05, 01:54