UIWebView с отображением HTML5 Canvas & Retina - PullRequest
Новая
       28

UIWebView с отображением HTML5 Canvas & Retina

5 голосов
/ 10 декабря 2010

Мое приложение имеет UIWebView, который обслуживает локальный контент. Если я возьму изображение размера сетчатки и использую его в качестве фона для тела, я могу сделать его правильно масштабируемым, используя свойство CSS -webkit-background-size. Это дает мне четкое, четкое изображение на iPhone 4.

Однако тег HTML5 Canvas не так уж и полезен. Когда я использую команду drawImage, чтобы поместить изображение с тем же размером сетчатки в холст HTML5, оно становится гигантским - далеко за пределами физического экрана. Это код, который я использую: 

ctx.drawImage(retinaImage, 0, 0)

Если я попытаюсь разместить параметры высоты и ширины на drawImage, изображение уменьшится до размеров экрана, но оно будет блочным и пиксельным. Не четкий, как фон CSS.

Есть ли уловка, которую я могу использовать для HTML5 Canvas, которая эквивалентна свойству CSS -webkit-background-size?

Спасибо!

Обновление:

Вот последний код, который я использовал для решения этой проблемы. Надеюсь, это поможет кому-то еще в будущем: 

        if (window.devicePixelRatio == 2) {
            myCanvas.setAttribute('height', window.innerHeight * 2);
            myCanvas.setAttribute('width', window.innerWidth * 2);
            ctx.scale(2, 2);
        } else {
            myCanvas.setAttribute('height', window.innerHeight);
            myCanvas.setAttribute('width', window.innerWidth);
        }

1 Ответ

4 голосов
/ 25 марта 2011

Check http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and. Похоже, если вы умножите размеры на DevicePixelRatio, то масштабируйте по этому соотношению, и оно должно работать.

Вот какой-то псевдокод, который работал для меня. 

var ctx = myCanvasElem.getContext("2d");
ctx.attr("width", width * window.devicePixelRatio);
ctx.attr("height", height * window.devicePixelRatio);
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.drawImage(img, x, y, width, height);

Дайте мне знать, если это решит это для вас!

...