Paint API
CSS Paint API ile özel çizim öğrenirsin.
registerPaint ve paint yöntemi
Bir paint worklet'i registerPaint('isim', sınıf) ile kaydedersin. Sınıfın paint(ctx, geometry, properties) yöntemi çizimi yapar. ctx, Canvas'a benzeyen bir çizim bağlamıdır; geometry kutunun genişlik ve yüksekliğini, properties okunan CSS değişkenlerini verir.
Worklet, inputProperties alanıyla hangi değişkenleri okuyacağını bildirir. Tarayıcı yalnızca bu değişkenler değişince worklet'i yeniden çağırır.
inputProperties ile değişken okuma
Worklet, static get inputProperties() { return ['--tile-color']; } yazarak okuyacağı değişkenleri bildirir. paint yönteminde properties.get('--tile-color') çağrısı bir CSSStyleValue döndürür; .toString() ile rengi alırsın.
Böylece CSS'ten --tile-color: #f59e0b yazdığında worklet otomatik yeniden çizer. Bu, Paint API'nin CSS ile canlı bağlantı kurduğu yerdir.
Uygulama Avatar maskesini CSS'te yaz
Aşağıdaki CSS'i tamamla. .avatar bildiriminde --avatar-radius: 12 ve mask-image: paint(rounded) olsun.
Örnek çözümü göster
/* avatar maskesi */
.avatar {
--avatar-radius: 12;
mask-image: paint(rounded);
}Kendini test et
-
paint yönteminin ctx parametresi ne sağlar?
class TilePainter { paint(ctx, geom) { /* ctx ne sağlar? */ } }- Canvas benzeri çizim bağlamı
- Ağ isteği bağlamı
- Yalnızca metin dizesi
- DOM ağacı kökü
Cevabı göster
Canvas benzeri çizim bağlamı — Doğru. ctx, Canvas'a benzeyen bir çizim bağlamıdır; fillRect, arc gibi yöntemler içerir.
-
Worklet'in okuyacağı değişkeni tanımla
.tile { --tile-color: ____; background: paint(tile); }Cevabı göster
.tile { --tile-color: #f59e0b; background: paint(tile); } -
Yöntem ve alanları rolüne eşle
- registerPaint
- Worklet kaydeder
- paint(ctx, geom, props)
- Çizimi yapar
- inputProperties
- Okunacak değişkenler
- properties.get()
- Değer nesnesi verir