在嵌入式GUI開發中，低色深（如RGB565）常常導致圖片漸變出現明顯色帶。

今天給大家帶來一個好消息！

GUI Guider現已支持LVGL圖片抖動處理，內置兩種主流算法：Floyd-Steinberg誤差擴散抖動和閾值抖動。

本文將結合源碼實現，帶你深入理解這兩種算法的原理、特點與工程應用，讓你的界面更細膩、更專業！

什么是圖片抖動（Dithering）

想象一下，你有一盒256色的彩筆，但現在只能用16色來畫同一幅畫。直接的做法是找到最接近的顏色替代，但這樣會產生明顯的色彩分層和失真。

抖動算法就像一個聰明的藝術家，通過巧妙地安排像素的分布，讓人眼在一定距離下看到接近原始色彩的效果。這就是"空間換色彩"的思想。

誤差擴散抖動算法

原理簡介：

Floyd-Steinberg算法是一種經典的誤差擴散抖動方法。其核心思想是：當前像素的量化誤差不應浪費，而應傳遞給鄰近像素，從而整體提升視覺效果。

實現算法流程：

1.將每個像素的RGB值映射到21個等級（step約為12.75），以適應低色深顯示。

2.計算原始像素與量化后像素的誤差。

3.按照Floyd-Steinberg權重，將誤差分配給右側、正下、左下和右下的像素。

源碼實例片段：

constquantize= (value) => {
conststep =255/ (21-1);
returnMath.round(value / step) * step;
};
//
誤差擴散到鄰近像素
diffuseError(1,0,7/16);//
右側
diffuseError(-1,1,3/16);//
左下
diffuseError(0,1,5/16);//
正下
diffuseError(1,1,1/16);//
右下

閾值抖動算法

原理簡介:

閾值抖動采用預定義的閾值矩陣，根據像素在矩陣中的位置決定其量化方式。每個像素獨立處理，天然支持并行計算。

實現流程：

閾值矩陣設計:

使用8×8的閾值矩陣，分別針對RGB三個通道設計不同的閾值分布：

letred_thresh = [
1,7,3,5,0,8,2,6,
7,1,5,3,8,0,6,2,
// ... 64
個值的
8x8
矩陣
]

這種分離式設計有特殊考慮：

2. 基于像素位置計算閾值矩陣索引：

let threshold_id = ((y & 7) << 3) + (x & 7);

3. RGB565格式適配：針對RGB565格式，分別對紅、綠、藍通道做位掩碼處理，保證色彩映射準確。

算法特點：

算法對比與選擇建議：

若在GUI Guider中遇到圖片顯示出現色帶問題，建議在圖片屬性設置中嘗試更換不同的圖像渲染算法，以改善圖像質量：

實際應用建議：

漸變和照片類圖片優先選擇Floyd-Steinberg算法，追求最佳視覺體驗

UI圖標、純色塊、實時渲染場景優先選擇閾值抖動算法，追求極致效率

總結

兩種抖動算法各有優勢：

Floyd-Steinberg-適合追求高質量的場景，特別是照片和復雜圖像

閾值抖動-適合對性能要求較高的實時應用和UI圖標

在使用GUI Guider的嵌入式GUI開發中，根據具體的硬件平臺和應用需求選擇合適的算法，可以在性能和視覺效果之間找到最佳平衡點。理解這些算法的原理，不僅能幫助我們更好地使用現有工具，還能在需要時進行定制優化，打造更出色的用戶界面體驗。