2012-06-26 38 views
19

Bir tuval öğesine resim çiziyorum. Daha sonra bu işlemin bitmesine bağlı olan bir kodum var. Kodum şunun gibi:HTML5 Tuval: Çizim bittiğinde Olay alın

var myContext = myCanvasElement.getContext('2d'), 
    myImg = new Image(); 

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
}; 

myImg.src = "someImage.png"; 

Şimdi, drawImage tamamlandığında bildirim almak istiyorum. Spekülasyonları kontrol ettim ama bir olay veya geri arama fonksiyonunu geçme olasılığı bulamadım. Şimdiye kadar sadece bir zaman aşımı belirledim, ama bu açıkça çok sürdürülebilir değil. Bu sorunu nasıl çözersiniz?

cevap

16

Neredeyse tüm Javascript işlevleri gibi, drawImagesenkron.

Bu, yalnızca yapması gerekeni yaptıktan sonra geri dönecektir.

+0

... :( – Alnitak

+0

hiçbir zaman doğru ben tekrar okudum ve mükemmel şekilde anlamış ediyoruz, sadece yeni bir hayal "Senkronize" demek ha? Bu yüzden benim yorumumu silmeye son verdim. – Loktar

+1

@Loktar umarım benim düzenlemem sadece bunu yapmak için yeterli ekler :) – Alnitak

4

Görüntü yüklendiğinde zaten bir olayınız var ve bir şey (draw) yapıyorsunuz. Neden başka bir şey yapmıyorsunuz ve drawImage'dan sonra ne yapmak istediğinizi yapacak olan işlevi çağırın? Gerçekten sadece:

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
    notify(); // guaranteed to be called after drawImage 
}; 
+5

drawImage sonra çağrılacak gibi görünmüyor ... Ben sadece yapılan test bana drawImage yöntemi senkronize yapılmadı gösterdi – BBog

4

Jef Claes oldukça iyi on his website bunu açıklıyor:

Tarayıcılar yük görüntüleri uyumsuz komut zaten yorumlanır ve idam ediliyor ise. Görüntü tam olarak yüklenmemişse, tuvalin oluşturulmasında başarısız olur.

Neyse ki bu çözmek zor değil. Resimden bir geri arama gelinceye kadar çizimini başlatmak için beklemek zorundayız, numaralı yükleme işlemi tamamlandı.

<script type="text/javascript">   
window.addEventListener("load", draw, true); 

function draw(){          
    var img = new Image(); 
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";     
    img.onload = function(){ 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d');  

     context.drawImage(img, 0, 0);   
    };    
}      

@Loktar cevabı inceltmeden tamamen daha açıklamak zor, sanırım