Skia Canvas: Node için HTML Canvas çizim API'sinin tarayıcısız uygulaması

 (skia-canvas.org)
4 puan yazan GN⁺ 2024-12-04 | 1 yorum | WhatsApp'ta paylaş

Giriş

  • Skia Canvas, Node.js üzerinde HTML Canvas çizim API'sini tarayıcı olmadan uygulayan bir kütüphanedir.
  • Google'ın Skia grafik motorunu temel alır ve Chrome'daki <canvas> öğesine benzer sonuçlar üretir.
  • Masaüstü ve sunucu ortamlarında donanım hızlandırmalı grafikler render etmek veya çeşitli görüntü formatları üretmek için uygundur.

Başlıca özellikler

  • Render işlemi GPU üzerinde gerçekleşir; hızlı ve kompakt yapıdadır ve işleri Rust ile C++ ile yazılmış native kodla yürütür.
  • OS'nin native grafik pipeline'ını kullanarak pencerelere render edebilir ve tarayıcıya benzer bir UI event framework'ü sunar.
  • Raster (JPEG, PNG, WEBP) ve vektör (PDF, SVG) formatlarında görüntüler üretebilir.
  • Görüntüleri dosya olarak kaydedebilir, buffer olarak döndürebilir veya dataURL dizesi olarak encode edebilir.
  • Asenkron render ve dosya I/O için kullanıcı tarafından yapılandırılabilen worker pool içinde native thread'ler kullanır.
  • Verilen bir canvas üzerinde birden fazla 'sayfa' oluşturabilir ve bunları tek bir çok sayfalı PDF ya da birden fazla dosyaya kaydedilmiş görüntü dizisi olarak çıktılayabilir.
  • Verimli boolean işlemleri veya noktadan noktaya enterpolasyon kullanarak Bézier path'lerini sadeleştirebilir, yumuşatabilir, birleştirebilir, çıkarabilir ve atomize edebilir.
  • Ölçekleme, döndürme ve dönüşümlere ek olarak 3D perspektif dönüşümleri sunar.
  • Bitmap tabanlı pattern'lerin yanı sıra vektör tabanlı texture'larla şekilleri doldurabilir ve özel marker'larla çizgi çizebilir.
  • CSS filter görüntü işleme operatörlerini tam olarak destekler.
  • Çok satırlı, kelime kaydırmalı metinler, satır bazında metin metrikleri, small caps, ligatures ve diğer OpenType özellikleri dahil zengin tipografi kontrolü sunar.
  • Sistem dışı font'ları yerel dosyalardan yükleyip kullanabilir.

Örnek kullanım

Görüntü dosyası oluşturma

  • Canvas kullanarak 400x400 boyutunda bir canvas oluşturup 2D context alınır.
  • createConicGradient kullanarak renk gradient'i ekleyip dikdörtgen çizen bir örnek sunulur.
  • Asenkron render fonksiyonu ile görüntüyü kaydetme, buffer'a dönüştürme veya string olarak embed etme yöntemleri açıklanır.

Çok sayfalı dizi

  • Farklı renklerde sayfalar oluşturup bunları çok sayfalı bir PDF dosyası olarak ya da ayrı görüntü dosyaları olarak kaydetme yöntemi açıklanır.

Pencerede render etme

  • Window kullanarak 300x300 boyutunda bir pencere oluşturup draw event'i üzerinden bir daire çizme yöntemi açıklanır.

İlgili okumalar

1 yorum

 
GN⁺ 2024-12-04
Hacker News görüşleri

  • https://windowjs.org, Skia’yı saran, onu Canvas API olarak sunan ve gömülü v8 ile küçük bir runtime sağlayan bir projedir

    • Proje ilk kez 3 yıl önce açık kaynak olarak yayımlandı
    • WebGL, ses vb. özellikleri de sunarak masaüstünde JavaScript tabanlı oyunlar için bir platform haline getirme planı vardı
    • Başka projeler ve yaşamdaki değişiklikler nedeniyle geliştirme durdu, ancak Canvas’ı tarayıcı dışında da kullanmayı mümkün kılan bu projeyi görmek sevindirici

  • Node ile uyumlu bir Canvas uygulamasıyla ilgileniyorsanız, şunlara bakabilirsiniz

    • canvaskit-wasm, Skia projesi tarafından sağlanıyor ve GPU hızlandırmayı desteklemiyor gibi görünüyor
    • @napi-rs/canvas, en hızlı binding’i sunuyor
    • node-canvas, Skia yerine Cairo kullanıyor

  • Bu tür kütüphanelerin kullanım amacına dair merak var

    • Masaüstünde daha iyi native kütüphaneler olabileceği görüşü var

  • Skia, Node’u destekleyen bir WASM derlemesi olan CanvasKit’i sunuyor; bu modül ise onun Rust binding’i

    • Her yaklaşımın artıları ve eksileriyle ilgileniliyor

  • Rust crate için bir wrapper’a benzer olup olmadığı soruluyor

  • Node/Web için benzer bir şey yapılmış; kusursuz değil ama iyi

    • SDL kullanarak işletim sisteminde pencere oluşturabiliyor
    • Belgeler ve örnekler incelenebiliyor

  • Önceki denemelerde Node-Gyp kurulumu gerektiği için zorlayıcı olmuştu

    • Bu proje uzun zamandır bekleniyordu

  • Bu, basit bir rendering API’sinden fazlası

    • İşletim sisteminin native grafik pipeline’ını kullanarak bir pencereye render edebiliyor ve tarayıcıya benzer bir UI event framework’ü sunuyor
    • WebGPU desteği için wgpu, WebGL desteği için de ANGLE eklenebilir

  • https://malmal.io üzerinde sunucuda çizilen tile’ları render etmek için kullanılıyor ve son derece iyi çalışıyor

  • MapLibre’ı sunucu tarafında render etmeye yardımcı olup olmayacağı merak ediliyor

    • Harita thumbnail’ları sağlamak için