Yüksek DPI Tuval

Paul Lewis

Giriş

HiDPI ekranlar harikadır, her şeyin daha düzgün ve temiz görünmesini sağlar. Ancak bu reklamlar, geliştiricilere yeni zorluklar da getiriyor. Bu makalede, HiDPI ekranları bağlamında tuvale resim çizmenin benzersiz zorluklarını inceleyeceğiz.

devicePixelRatio özelliği

En baştan başlayalım. Daha önce HiDPI ekranlarından önce piksel bir pikseldi (yakınlaştırma ve ölçeklendirmeyi bir süre göz ardı edersek) ve bu yüzden etrafta hiçbir şeyi değiştirmeniz gerekmiyordu. Bir öğeyi 100 piksel genişliğe ayarlarsanız, geriye kalan tek şey budur. Daha sonra ilk birkaç HiDPI mobil telefonun, pencere nesnesinde biraz gizemli bir şekilde çalışan devicePixelRatio özelliği ortaya çıkmaya başladı. Bu özellik, medya sorgularında kullanılabilir. Bu özellik, piksel değerlerinin (mantıksal piksel değeri adını verdiğimiz) CSS'nin, oluşturma işlemi söz konusu olduğunda cihazın kullanacağı gerçek piksel sayısına oranını anlamamızı sağladı. devicePixelRatio değeri 2 olan bir iPhone 4S durumunda 100 piksel mantıksal değerin 200 piksel cihaz değerine eşit olduğunu görürsünüz.

Bu ilginç. Peki bu, biz geliştiriciler için ne anlama geliyor? İlk zamanlarda hepimizin, görsellerin bu cihazlar tarafından büyütüldüğünü fark etmeye başlamıştık. Öğelerimizin mantıksal piksel genişliğinde resimler oluşturuyorduk. Resimler, çizildiğinde cihazPixelRatio tarafından büyütülüyor ve bulanık görünüyordu.

Şekil 1 - CihazPixelRatio nedeniyle büyütülmüş ve bulanıklaştırılan bir resim

Bu sorunun fiili çözümü, PixelRatio cihazı tarafından ölçeklendirilen resimler oluşturmak ve ardından CSS'yi kullanarak aynı miktarda küçültmektir. Aynı şey 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();