與CSS油漆API結合生成斑點

利用CSS油漆API的力量來召喚生成斑點！本教程探討了使用Houdini家族的一部分CSS Paint API的定制，隨機斑點形狀的創建。我們將建立一個生成的斑點工作點，利用JavaScript和CSS自定義屬性來控制和響應能力。

生成設計引入了機會元素，定義規則並讓隨機性指導結果。將其視為使用郵票和骰子來創建獨特的模式 - 我們將使用代碼使用類似的原理。 CSS Paint API提供了對CSS的低水平訪問權限，從而可以通過JavaScript Worklets創建編程圖像。 Worklet是一個帶有paint()函數的JavaScript類，可為CSS屬性生成圖像。

我們將構建一個生成的Blob Worklet，接受CSS自定義屬性作為控制其外觀的輸入。這提供了一種表演劑，乾淨的方法，避免了雜物。該工作點在單獨的線程上運行，以防止UI放緩。

這是工作人員功能的預覽：

• 作為背景圖像： Blob Worklet動態生成背景圖像，無縫地調整元素調整大小和自定義屬性更改。
• 生成圖像面具：工作點充當面具，為設計添加了獨特的有機曲線。不斷變化的性質使UI保持新鮮。

儘管存在創建斑點的其他方法（例如Blobmaker， border-radius ），但CSS Paint API提供了出色的表現力和性能。它允許通過CSS自定義屬性（ --blob-seed ， --blob-num-points ， --blob-variance ， --blob-smoothness ， --blob-fill ）進行精確控制，而不是手動調整。 API的多線程自然可以確保即使具有復雜的生成視覺效果，也可以確保閃耀的性能。

瀏覽器支持和多填充： CSS Paint API享有越來越多的支持，但並不普遍。我們將使用css-paint-polyfill來確保使用@supports探索優雅的後備機制。

開發設置：一個簡單的開發環境（使用npm install和npm run start在克隆的工作點啟動式存儲庫上），以便於易於開發和實時重新加載。此設置處理HTTPS或Local主機服務，以防止CORS問題。

工作點實施：

1. 初始化： Blob類定義並在registerPaint("blob", Blob)中註冊。
2. paint()函數：此功能接收2D圖形上下文（ ctx ），元素幾何（ geometry ）和自定義屬性（ properties ）。
3. 輸入屬性： inputProperties Getter定義了工作場所接受的自定義屬性。
4. 屬性解析：輔助功能（ propToString ， propToNumber ）分析自定義屬性值。
5. 偽數數生成： mulberry32 PRNG確保基於種子值（ --blob-seed ）的一致隨機性。這避免了視覺閃爍的重新租賃。
6. 斑點的生成：斑點的形狀是通過繪製圓圈周圍的點，隨機調整其向中心的位置而創建的，並通過它們繪製catmull-rom樣條。 lerp功能有助於此調整。 spline函數（來自@georgedoescode/generative-utils ）生成平滑曲線。
7. 隨機種子：種子值使用document.querySelector(".worklet-canvas").style.setProperty("--blob-seed", Math.random() * 10000);對於每個頁面上的變化斑點形狀。
8. Polyfill＆Hallback：使用CSS["paintWorklet"]檢查和@supports規則為不支持的瀏覽器提供@supports規則提供@supports規則，為多文件加載。

該全面的指南使您使用CSS Paint API創建動態和視覺上吸引人的生成斑點。嘗試自定義屬性，以微調斑點的外觀並探索其在UI設計中的不同應用。

以上是與CSS油漆API結合生成斑點的詳細內容。更多資訊請關注PHP中文網其他相關文章！