Застрял в javascript подвешенном объеме, пока мои мозги превращаются в яичницу - PullRequest
Новая
       14

Застрял в javascript подвешенном объеме, пока мои мозги превращаются в яичницу

3 голосов
/ 06 марта 2012

РЕДАКТИРОВАТЬ : Я только что нашел что-то, что работает при каждой загрузке страницы, кроме первой (жесткой) загрузки. Это «странный совет, чтобы заставить его работать», потому что он не использует onload. Э.Г.

Это работает при нагрузках 2 ... n: 

case String:
        var img = new Image();
        img.onload = function() {
            //context.drawImage(img,0,0);
        };
        img.src = detail;
        context.drawImage(img,0,0);

Это не работает при любой нагрузке 1 ... n: 

case String:
        var img = new Image();
        img.onload = function() {
            context.drawImage(img,0,0);
        };
        img.src = detail;
        //context.drawImage(img,0,0);

Я не очень рад, что пропускаю самую важную нагрузку (первую), но, по крайней мере, есть некоторый прогресс.

Может ли кто-нибудь помочь мне объяснить, что здесь происходит? Я действительно сбит с толку. Я хочу, чтобы изображение загружалось и каждый раз рисовалось на холсте. Это нереальное ожидание?

Я использую FF 7.0.1 в Ubuntu, мой пользовательский агент: Mozilla / 5.0 (X11; Linux i686; rv: 7.0.1) Gecko / 20100101 Firefox / 7.0.1

РЕДАКТИРОВАТЬ : По-прежнему не удается выполнить все попытки, использованные в комментариях. Я буду продолжать думать об этом. Я думаю, что это как-то связано с тем, что холст больше не доступен (хотя переменная разрешается правильно и в JS Debugger в FF не выдается ошибка).

Я пишу js-фреймворк для рендеринга на canvas, чтобы обеспечить простой API для написания GUI с меньшим количеством кода и более красивого кода, чем при использовании Canvas API. Это просто обертка вокруг холста. Но я не эксперт по JS, хотя я все равно люблю JS.

Следующий код в замыкании может выполнять и получать доступ к области действия переменной img, может вызывать форму оповещения о том, что область действия при загрузке изображения, может изменять свойства стиля img css, но не будет выполнять drawImage в контексте canvas в контекстная переменная.

До закрытия context.fillRect будет работать нормально, но внутри замыкания - нет. Я думаю, что есть кое-что фундаментальное, что я еще не изучил, так как раньше я кодировал подобную нагрузку с помощью кода с закрытием, и все просто работало. Надеюсь, сегодня день, когда я узнаю что-то новое. 

RenderProvider.prototype.drawImage = function(srcElement,context,state,detail) {
    if(detail == undefined || detail == null) {
        alert("Image is not present. Ignoring.");
        return;
    }   
    switch(detail.constructor) { 
        case String:
                alert("Image is from String");
                var img = new Image();
                img.src = detail;//'t.jpg';//'Star-Field.gif';//http://www.google.com/favicon.ico';
                img.onload = function (e) { 
                    alert('Drawing ' + img + ' to ' + context);
                    alert('Context dim ' + context.canvas.width + ',' + context.canvas.height );
                    context.drawImage(img,20,20);
                    return true;
                };          
                img.src = detail;//'t.jpg';//'Star-Field.gif';//'http://www.google.com/favicon.ico';
                break;

Ответы [ 3 ]

1 голос
/ 06 марта 2012

Где определяется эта функция? Если вы определяете эту функцию в коде в тегах сценария, то элемент canvas (и контекст) не будет существовать при разборе кода и не может быть передан.

Также обратите внимание, что замыкание не будет выполняться до тех пор, пока не будет запущен блок, в который оно было включено.

1 голос
/ 06 марта 2012

Я сделал jsfiddle , который работает, если вы хотите поиграть с ним. 

var img = new Image();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
img.src = 'http://www.google.com/favicon.ico';
img.onload = function() {
    context.drawImage(this, 20, 20); 
}​

Обратите внимание, что я использую this вместо img внутри функции обратного вызова. img тоже работает, но более привычно использовать this. Кроме того, вы можете, но img.src = ... после определения функции обратного вызова, и она все еще работает.

0 голосов
/ 06 марта 2012

Вам нужно дождаться события window.onload, а также события загрузки изображения, как предлагает Фил Х. Ты это делаешь? Я протестировал ваш первый образец там, но ждал window.onload, и он работает при первой загрузке. Второй не работает. Я не уверен почему.

...