forum.boolean.name - Canvas

forum.boolean.name (http://forum.boolean.name/index.php)

- JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)

- - Canvas - scale method (http://forum.boolean.name/showthread.php?t=17523)

Canvas - scale method

Код:

    function zoom() {

                        switch(this.id) {

                                case "zoom_in":

                                    scale /= scaleMultiplier;

                                    img_update(scale);

                                    break;

                                case "zoom_out":

                                    scale *= scaleMultiplier;

                                    img_update(scale);

                                    break;

                        }

        }

                                                

        function img_update( scale ) {

                        contextUI.scale(scale, scale);

                        contextUI.drawImage(canvas, 0, 0);

                        context.clearRect(0, 0, w, h);

                        

        }

По клике на кнопки ZoomIn, ZoomOut вызываю функцию zoom().
Функцию img_update( scale ) использую для перерисовки канвас доски. При клике канвас сразу не зумится, но при рисовании начинает зумить.
Что не так? Спасибо.

Ответ: Canvas - scale method

Код:

contextUI.scale(scale, scale);

Ты скейлишь контекст который отрисовывает UI?
Или ты хочешь скейлить сам игровой контекст?

Код:

contextUI.drawImage(canvas, 0, 0);

Ты в контекст для UI рисуешь canvas? canvas - это хендл кртинки, или самой canvas? хендл должен быть картинки.
Вот хорошая справка.
http://www.html5canvastutorials.com/...canvas-images/

Далее ты просто отчищаешь свой контекст и всё.
Если это то чего ты хотел, то у тебя просто будет пусто на экране после зуума.

Открой консоль, думаю у тебя будет ошибка на отрисовки картинки, если это так, тогда у тебя дальнейший код в данной функции не выполниться, следственно функция не будет выполнена полностью.

Также недостаточно информации. Лучше дай ссылку на рабочий пример или забей в http://jsfiddle.net/ ситуацию.
Даю 90% что как забъёшь в jsfiddle сам найдёшь ошибку.

Ответ: Canvas - scale method

canvas - это хендл не картинки, а текущего рисунка на самом canvas элементе.

Ответ: Canvas - scale method

Для получения данных картинки из контекста для canvas переменной, ты используешь toDataURL или getImageData?

Ответ: Canvas - scale method

Цитата:

Сообщение от MoKa (Сообщение 243731)

Для получения данных картинки из контекста для canvas переменной, ты используешь toDataURL или getImageData?

toDataURL()..

Ответ: Canvas - scale method

Тебе нужно сперва создать картинку и присвоить её src аттрибут, и затем когда эта картинка использовать её для отрисовки.
Т.к. dataUrl - это не совсем картинка, а URL 64 Encoded данные картинки.

Что-то типо:

Код:

var img = new Image();

img.onload = function() {

  context.drawImage(this, 0, 0);

};

img.src = dataURL;

Можешь попробовать отрисовать сразу как присвоишь src, т.к. большинство броузеров это сделают синхронно. Но это нужно тестировать.

Также для скейла - я бы перерисовывал данные заново со скейлом, заместо скейлинга прошлой картинки с самой канвы, т.к. как ты понимаешь при зууме назад, у тебя не будет данных картинки по бокам, а при зууме вперёд, у тебя будут размыты пиксели.

Ответ: Canvas - scale method

попробую именно так! ;)