Yüksek DPI Tuval

Giriş

HiDPI ekranlar güzeldir, her şeyin daha düzgün ve temiz görünmesini sağlar. Ancak geliştiricilere yeni zorluklar da sunuyor. 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 olmadan önce bir piksel bir pikseldi (yakınlaştırma ve ölçeklendirmeyi bir kenara bırakırsak) ve bu kadardı, hiçbir şeyi değiştirmeniz gerekmiyordu. Bir öğeyi 100 piksel genişliğinde ayarladıysanız bununla ilgili yapmanız gereken her şey bu. Ardından, ilk birkaç HiDPI mobil telefon, window nesnesinde biraz gizemli olan ve medya sorgularında kullanılabilen devicePixelRatio mülküyle piyasaya çıkmaya başladı. Bu özellik, CSS'deki piksel değerlerinin (mantıksal piksel değeri olarak adlandırdığımız) cihazın oluşturma işlemi sırasında kullanacağı gerçek piksel sayısına nasıl dönüştüğünü anlamamıza olanak tanıdı. devicePixelRatio değeri 2 olan bir iPhone 4S'te 100 piksel mantıksal değerinin 200 piksel cihaz değerine eşit olduğunu görürsünüz.

Bu ilginç bir konu. Peki bu durum geliştiriciler için ne anlama geliyor? İlk günlerde hepimiz resimlerimizin bu cihazlar tarafından ölçeklendirildiğini fark etmeye başladık. Öğelerimizin mantıksal piksel genişliğinde resimler oluşturuyorduk. Bu resimler çizildiğinde devicePixelRatio tarafından ölçeklendiriliyor ve bulanık oluyordu.

Bunun fiili çözümü, cihazPixelRatio tarafından ölçeklendirilen resimler oluşturmak ve ardından CSS'yi 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();