Yüksek DPI tuval

Paul Lewis

Giriş

HiDPI ekranlar harikadır, her şeyin daha akıcı ve net görünmesini sağlar. Ancak geliştiriciler için yeni zorluklar da ortaya çıkarırlar. Bu makalede, HiDPI ekranlar bağlamında tuvalde resim çizmenin benzersiz zorluklarını inceleyeceğiz.

devicePixelRatio özelliği

Baştan başlayalım. HiDPI ekranlar çıkmadan önce bir piksel bir pikseldi (yakınlaştırma ve ölçeklendirmeyi bir süreliğine göz ardı edersek) ve hepsi buydu, hiçbir şeyi değiştirmeniz gerekmiyordu. Bir öğenin genişliğini 100 piksel olarak ayarladıysanız bu ayar geçerli olurdu. Ardından, ilk birkaç HiDPI mobil telefon, pencere nesnesinde biraz gizemli devicePixelRatio özelliğiyle görünmeye başladı ve medya sorgularında kullanılabilir hale geldi. Bu özellik, CSS'deki piksel değerlerinin (mantıksal piksel değeri olarak adlandırılır) oranının, cihazın oluşturma sırasında kullanacağı gerçek piksel sayısına nasıl dönüştürüleceğini anlamamızı sağladı. devicePixelRatio değeri 2 olan bir iPhone 4S'te, 100 piksellik mantıksal değerin 200 piksellik cihaz değerine eşit olduğunu görürsünüz.

Bu ilginç bir bilgi ancak biz geliştiriciler için ne anlama geliyor? İlk zamanlarda, resimlerimizin bu cihazlar tarafından büyütüldüğünü fark etmeye başladık. Öğelerimizin mantıksal piksel genişliğinde resimler oluşturuyorduk ve bunlar çizildiğinde devicePixelRatio tarafından ölçeklendiriliyor ve bulanıklaşıyordu.

Şekil 1: devicePixelRatio nedeniyle büyütülen ve bulanıklaştırılan bir resim

Bu sorunun fiili çözümü, devicePixelRatio ile ölçeklendirilmiş resimler oluşturmak ve ardından CSS kullanarak aynı miktarda küçültmektir. Aynı durum tuval için de geçerlidir.

function setupCanvas(canvas) {
  // Get the device pixel ratio, falling back to 1.
  var dpr = window.devicePixelRatio || 1;
  // Get the size of the canvas in CSS pixels.
  var rect = canvas.getBoundingClientRect();
  // Give the canvas pixel dimensions of their CSS
  // size * the device pixel ratio.
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  var ctx = canvas.getContext('2d');
  // Scale all drawing operations by the dpr, so you
  // don't have to worry about the difference.
  ctx.scale(dpr, dpr);
  return ctx;
}

// Now this line will be the same size on the page
// but will look sharper on high-DPI devices!
var ctx = setupCanvas(document.querySelector('.my-canvas'));
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();