CSS Paint API'sı

Surma

Chrome 65'teki yeni olanaklar

CSS Paint API ("CSS Özel Boya" veya "Houdini'nin boyama işleti" olarak da bilinir) varsayılan olarak etkinleştirilmiştir. Bu nedir? Yapabilecekleriniz var mı? Peki, YouTube Create'in işleyişi nasıldır? O zaman okumaya devam edin...

CSS Paint API, bir CSS kodu her çalıştırıldığında programlı bir şekilde resim mülk bir resim bekler. background-image veya border-image gibi mülkler genellikle resim dosyası yüklemek için url() veya yerleşik CSS ile kullanılır linear-gradient() gibi çalışır. Bunları kullanmak yerine artık Boya iş ortağına referans vermek için paint(myPainter).

Boyama çalışma alanı yazma

myPainter adlı bir boyama işçisi tanımlamak için bir CSS boyaması yüklememiz gerekiyor Worklet dosyanıza CSS.paintWorklet.addModule('my-paint-worklet.js') yazın. Bu dosyasını kullanarak bir boya işleti sınıfı kaydetmek için registerPaint işlevini kullanabiliriz:

class MyPainter {
  paint(ctx, geometry, properties) {
    // ...
  }
}

registerPaint('myPainter', MyPainter);

paint() geri çağırmasında ctx öğesini tıpkı bir <canvas> itibarıyla CanvasRenderingContext2D. Nasıl yapıldığını biliyorsanız <canvas> içine çiziyorsanız boyama işliğinde çizim yapabilirsiniz! geometry bize şunu bildirir: yüksekliğini ve genişliğine göre değişiklik gösterir. properties Yapacağım bu makalenin ilerleyen kısımlarında açıklayacağım.

Giriş örneği olarak, bir dama tahtası boyama çalışma alanı yazalım ve <textarea> öğesinin arka plan resmi olarak. (Bir metin alanı kullanıyorum çünkü varsayılan olarak yeniden boyutlandırılabilir):

<!-- index.html -->
<!doctype html>
<style>
  textarea {
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

// checkerboard.js
class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // Use `ctx` as if it was a normal canvas
    const colors = ['red', 'green', 'blue'];
    const size = 32;
    for(let y = 0; y < geom.height/size; y++) {
      for(let x = 0; x < geom.width/size; x++) {
        const color = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(x * size, y * size, size, size);
        ctx.fill();
      }
    }
  }
}

// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);

Geçmişte <canvas> kullandıysanız bu kod size tanıdık gelecektir. Görüntüleyin canlı demo burayı tıklayın.

Arka plan resmi olarak dama tahtası desenli metin alanı
Arka plan resmi olarak dama tahtası desenli metin alanı.

Burada yaygın olarak kullanılan bir arka plan resmi kullanmanın farkı, desenin kullanıcı metin alanını yeniden boyutlandırdığında istek üzerine yeniden çizilir. Bunun anlamı şudur: arka plan resmi de dahil her zaman olması gerektiği kadar yüksek yoğunluklu ekranlar için dengeleme alır.

Bu gerçekten çok güzel bir şey ama aynı zamanda oldukça durağan. Yeni bir e-posta mı yazacak, farklı boyutlarda, aynı deseni ve farklı boyutlarda kareler var mı? Yanıtım hayır.

İş akışınızı parametre haline getirme

Neyse ki, boyama iş akışı diğer CSS özelliklerine erişebilir. properties ek parametresi devreye girer. Sınıfa statik bir inputProperties özelliği için herhangi bir CSS mülkünde yapılan değişikliklere abone olabilirsiniz, özel özellikler dahil. Değerler size properties parametresinden yararlanın.

<!-- index.html -->
<!doctype html>
<style>
  textarea {
    /* The paint worklet subscribes to changes of these custom properties. */
    --checkerboard-spacing: 10;
    --checkerboard-size: 32;
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

// checkerboard.js
class CheckerboardPainter {
  // inputProperties returns a list of CSS properties that this paint function gets access to
  static get inputProperties() { return ['--checkerboard-spacing', '--checkerboard-size']; }

  paint(ctx, geom, properties) {
    // Paint worklet uses CSS Typed OM to model the input values.
    // As of now, they are mostly wrappers around strings,
    // but will be augmented to hold more accessible data over time.
    const size = parseInt(properties.get('--checkerboard-size').toString());
    const spacing = parseInt(properties.get('--checkerboard-spacing').toString());
    const colors = ['red', 'green', 'blue'];
    for(let y = 0; y < geom.height/size; y++) {
      for(let x = 0; x < geom.width/size; x++) {
        ctx.fillStyle = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.rect(x*(size + spacing), y*(size + spacing), size, size);
        ctx.fill();
      }
    }
  }
}

registerPaint('checkerboard', CheckerboardPainter);

Artık aynı kodu tüm farklı dama tahtaları için kullanabiliriz. Ama hatta Artık Geliştirici Araçları'na gidip değerlerle uğraşabiliriz. kadar kolaylaşır.

Boyama iş uygulamasını desteklemeyen tarayıcılar

Yazma sırasında yalnızca Chrome'da boyama iş uygulaması bulunuyordu. Oradayken diğer tüm tarayıcı tedarikçilerinden gelen olumlu sinyaller olmasına rağmen fazla bir ilerleme yok. Güncel bilgilerden haberdar olmak için Is Houdini More Ready? (Houdini Henüz Hazır mı?) başlıklı makaleyi inceleyin. gerekir. Bu arada, mutlaka test etmek için boya için destek olmasa bile kodunuzun çalışmaya devam etmesini sağlayacak geliştirme yapabilirsiniz. İşlerin beklendiği gibi çalışmasını sağlamak için kodunuzu şu iki yer vardır: CSS ve JS.

JS'deki boyama işliği desteği, CSS nesnesi kontrol edilerek yapılabilir: js if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('mystuff.js'); } CSS tarafında iki seçeneğiniz vardır. @supports aşağıdakileri kullanabilirsiniz:

@supports (background: paint(id)) {
  /* ... */
}

Daha basit bir yöntem de CSS'nin geçersiz hale gelmesi ve bunun sonucunda bilinmeyen bir işlev içeriyorsa özellik bildiriminin tamamını yoksayar. Eğer bir özelliği iki kez belirtirsiniz: İlk önce boyama işsizi, sonra da ilerlemeyi artırırsınız:

textarea {
  background-image: linear-gradient(0, red, blue);
  background-image: paint(myGradient, red, blue);
}

Boya işçisi desteği olan tarayıcılarda background-image ilkinin üzerine yazacak. Desteklenmeyen tarayıcılarda ikinci beyan geçersiz olduğu için silinecek. yürürlükte kalmaya devam eder.

CSS Boya Polyfilli

Birçok kullanım alanında, CSS Boya Polyfilli, , modern tarayıcılara CSS Özel Boyama ve Boyama İş Akışı desteği ekler.

Kullanım alanları

Boya işçiliklerinin birçok kullanım alanı vardır. Bunların bazıları diğerleri. Bunlardan biri, boyutu küçültmek için boya işçisi kullanmaktır. bir e-posta alırsınız. Çoğu zaman öğeler sadece süslemeler oluşturmak için eklenir kullanabilirsiniz. Örneğin, Materyal Tasarım Lite'taki düğme uygulamak için ek 2 <span> öğesi içerir. arındırılmasını sağlar. Çok sayıda düğmeniz varsa bu sayı oldukça fazla olabilir. mobil cihazlarda performansın düşmesine yol açabilir. Şu durumda: boya iş akışını kullanarak dalga efektini uygulama bunun yerine, 0 ek öğe ve yalnızca bir boyama işliğiniz olur. Ayrıca, özelleştirilmesi çok daha kolay olan bir parametre haline getirecektir.

Boya iş uygulamasını kullanmanın bir başka iyi tarafı da, çoğu senaryoda, çözümün boyutu, bayt cinsinden küçüktür. Tabii ki bir de sağlayan bir tekliftir. Boya kodunuz, kanvasın boyutu veya parametresi değişir. Kodunuz karmaşıksa ve uzun sürüyorsa tuhaf. Chrome, boya iş akışlarını ana iş parçacığının dışına taşımaya Hatta uzun süreli boya işçileri bile ana makinenin yanıt verme hızını ileti dizisi.

Bana göre en heyecan verici beklenti, boya iş akışının verimli bir şekilde bir tarayıcının henüz sahip olmadığı CSS özelliklerinin çoklu doldurma işlemi. Mesela şöyle bir örnek verebiliriz: kadar konik gradyanları çoklu dolduracak şekilde yerel olarak Chrome'a geliyorlar. Başka bir örnek: Bir CSS toplantısında artık birden çok kenarlık renginiz olabileceğine karar verdi. Bu toplantıda Devam ediyor. İş arkadaşım Ian Kilpatrick bu yeni CSS için çoklu dolgu yazdı davranışını daha iyi anlamanızı sağlar.

"Kalıpların" dışında düşünme

Çoğu kullanıcı arka plan resimleri ve kenarlık resimleri üzerine düşünmeye hakkında bilgi edineceğiz. Boya işletimi için daha az sezgisel kullanımlardan biri DOM öğelerinin rastgele şekillere sahip olmasını sağlamak için mask-image. Örneğin bir elmas:

Elmas şeklindeki bir DOM öğesi.
Elmas şeklindeki bir DOM öğesi.

mask-image, öğenin boyutuyla aynı boyutta bir resim çeker. maske resmi şeffaf, öğe de şeffaf. Maskenin bulunduğu bölgeler resim opak, öğe opak.

Artık Chrome'da

Boya çalışma alanı bir süredir Chrome Canary'de bulunuyor. Chrome 65'te varsayılan olarak etkindir. Devam edin ve yeni olasılıkları deneyin sonra ne yaptığınızı gösterin. Daha fazla ilham almak için Vincent De Oliveira'nın koleksiyonuna göz atın.