Duilib 是 Windows 系統(tǒng)下的開源的 DirectUI 界面庫（遵循 BSD 協(xié)議），完全免費(fèi)，可用于商業(yè)軟件開發(fā)。

Duilib 可以簡單方便地實現(xiàn)大多數(shù)界面需求，包括換膚、換色、透明等功能，支持多種圖片格式，使用 XML 可以方便地定制窗口，能較好地做到 UI 和邏輯相分離，盡量減少在代碼里創(chuàng)建 UI 控件。目前，Duilib 已經(jīng)在國內(nèi)有較為廣泛的使用。

網(wǎng)易在研發(fā)網(wǎng)易易信 PC 版時引入 Duilib，經(jīng)過多年開發(fā)和改進(jìn)，由網(wǎng)易云信在2019年4月開源。（github 地址：https://github.com/netease-im...）

網(wǎng)易 Duilib 使用 C++11 重寫，在其原有基礎(chǔ)上做了較大重構(gòu)，搭配谷歌的基礎(chǔ)組件 Base 庫、基于 Chromium 的 WebView 框架 CEF 以及常用的 UI 組件，形成了一套功能強(qiáng)大、簡單易用的完整桌面 UI 開發(fā)框架。

框架中提供了多線程模型、高精度定時器、基本的 xml 解析、zip 解壓等功能；封裝了一層渲染接口和全局樣式資源的統(tǒng)一管理；并且對 DPI 適配、多語言、虛擬鍵盤、手寫板等功能增加了支持；在上層提供了豐富的控件。

開發(fā)框架中集成了 Chromium 中 base 庫的線程模型和消息隊列，base 中包含了多種消息循環(huán)、異步操作接口。

base 線程消息循環(huán)

網(wǎng)易 Duilib 框架中的 UI 消息循環(huán)、工作線程都完全依托 base 的線程模型。使用 base 的異步通信能力，我們可以將耗時的工作（如資源解析）放到輔助線程來減輕 UI 線程的壓力。

base異步通信

同時，網(wǎng)易 Duilib 中的各種基礎(chǔ)組件，都已經(jīng)繼承了 base 中的生命周期檢測能力，每個任務(wù)在執(zhí)行時都會先檢查與之綁定的對象是否存活，確保多線程操作不會因野指針而導(dǎo)致崩潰。實際項目開發(fā)中，使用base的線程模型，我們可以非常簡單做到 UI 線程、數(shù)據(jù)庫線程、網(wǎng)絡(luò)線程、其他工作線程之間的通信與交互，有效提升開發(fā)速度。

網(wǎng)易 Duilib 框架提供了更加完整和豐富的功能，以滿足不同真實業(yè)務(wù)場景的需求：

• 豐富的控件、簡易的布局

• 靈活的控件組合、事件處理方式

• 模塊化支持

• 優(yōu)化渲染效率

• 異形窗體支持

• DPI 適配支持

• 多國語言支持

• 通用樣式支持

• 虛表控件支持

• 虛擬鍵盤支持

• 實用的多線程支持

• CEF webview 支持

• 控件動畫、GIF 動畫支持

• 觸控設(shè)備支持（Surface、Wacom）

• 抽象渲染接口（為其他渲染引擎提供支持）

網(wǎng)易 Duilib 中，增加了控件與容器的尺寸自適應(yīng)功能，免去繁瑣的手寫尺寸。同時增強(qiáng)了布局能力，搭配控件的一些定位屬性，可以使用少量 xml 代碼來完成更加強(qiáng)大的布局效果。

新增的絕對布局

現(xiàn)在的 UI 庫中，把布局、容器、控件等邏輯組件拆分開，讓不同的布局可以與任意容器進(jìn)行靈活的組件。并且弱化了容器與控件的區(qū)別，基礎(chǔ)控件使用模版來編寫，上層使用時可以讓它繼承不同的控件或模版，讓控件本身也可以是容器：

typedef LabelTemplate<Control> Label; typedef LabelTemplate<Box> LabelBox; typedef ButtonTemplate<Control> Button; typedef ButtonTemplate<Box> ButtonBox; typedef CheckBoxTemplate<Control> CheckBox; typedef CheckBoxTemplate<Box> CheckBoxBox;

基礎(chǔ)控件繼承了容器后，就可以擁有控件本身的行為+容器的組合能力。這樣做的優(yōu)點是如果一個基礎(chǔ)組件在 UI 上無法滿足需求，那么就讓他成為容器去任意組合其他的 UI 組件，提升控件的表現(xiàn)能力。同時控件支持在 xml 中編寫簡單的事件處理邏輯，把一些功能簡單的UI控制邏輯放在 xml 中。

CEF（Chromium Embedded Framework）是基于谷歌 Chromium 瀏覽器內(nèi)核封裝出的跨平臺 web browser 組件。

CEF 內(nèi)部有完整的一套消息循環(huán)，我們將網(wǎng)易 Duilib 框架中的 base 線程模型與 CEF 消息循環(huán)組合在一起。同時封裝CEF的離屏渲染模式（OSR）、窗口模式為網(wǎng)易 Duilib 中的控件 CefControl、CefNativeControl，讓 CEF 的 WebView 能力完整的嵌入到網(wǎng)易 Duilib 中。最后我們封裝了js與native的通信能力 JsBridge。

CEF執(zhí)行流程

如此，我們可以使用 CefControl、CefNativeControl 來做單純的 web 展示控件，也可以以 WebView 為核心，網(wǎng)易 Duilib 為輔助，開發(fā) web app。UI 層的展現(xiàn)都由 web 頁面負(fù)責(zé)，底層的核心邏輯、數(shù)據(jù)庫、網(wǎng)絡(luò)等由 C++ 負(fù)責(zé)，web 與 C++ 使用 JsBridge 通信。

有道精品課是網(wǎng)易旗下在線教育平臺，教師通過在線直播的方式對學(xué)生授課，需要一個支持直播、聊天、課件分享、手寫板、web、答題互動等功能的客戶端讓老師使用，因此有道精品課教師端應(yīng)運(yùn)而生。

老師可以使用有道精品課教師端進(jìn)行 PPT、PDF、桌面共享、iPad 投屏、視頻播放等多種直播方式 。老師也可以把講課過程中畫板上的板書和課件導(dǎo)出為 PDF 分享給學(xué)生。

有道精品課教師端

我們需要讓教師端滿足各種直播需求的同時，保證開發(fā)的速度、易用性、擴(kuò)展性。另外，由于音視頻、聊天等功能需要消耗大量 CPU 資源，這就要求客戶端的 UI 本身只能占用較低的內(nèi)存和 CPU 資源?；谝陨闲枨?，我們使用網(wǎng)易 Duilib 框架進(jìn)行了有道精品課教師端的開發(fā)。

教師端的畫板擁有豐富的功能：繪制各種圖形圖片、圖形交互、書寫文本、PPT解析、動畫、導(dǎo)出 PDF、縮放等等。

畫板支持的特性越復(fù)雜，就越需要消耗更多的 CPU。為了節(jié)省 CPU 資源，我們搭配網(wǎng)易 Duilib 框架中的渲染引擎，設(shè)計了6層緩存機(jī)制，讓畫板在支持豐富功能的同時保證極低的 CPU 占用率。

畫板的多層緩存方案

依托于網(wǎng)易 Duilib 框架的 UI 組件和渲染能力，教師端畫板可以支持手寫板筆跡、毛筆，支持繪制各種圖形圖片，支持畫板縮放。

毛筆

圖形圖畫

圖形圖畫

由于老師的課件大多為 PPT 編寫，為了讓老師授課更加方便，教師端支持導(dǎo)入 PPT。并且使用網(wǎng)易 Duilib 框架的動畫能力，來支持展現(xiàn) PPT 元素的動畫，讓老師方便播放動畫或控制 PPT 元素。

支持PPT動畫

配合網(wǎng)易 Duilib 框架的 WebView 能力，可以把 web 頁面融入到畫板里，既可以操作網(wǎng)頁也可以寫書板書，極大增強(qiáng)畫板表現(xiàn)力。使用這樣的能力，我們可以讓教師端支持展現(xiàn)數(shù)學(xué)互動題、物理實驗、化學(xué)實驗等等內(nèi)容。

畫板內(nèi)嵌web

目前，我們已經(jīng)將網(wǎng)易 Duilib 開源。

github 地址：
https://github.com/netease-im...

歡迎大家使用并與網(wǎng)易 Duilib 同行。

計劃在不久之后，我們將支持矢量圖來增強(qiáng) DPI 適配能力，增加更加豐富的動畫（幀動畫、屬性動畫、路徑動畫、特效動畫）來提升 UI 庫的表現(xiàn)力，并替換性能更好的 skia 渲染引擎。

未來，我們將持續(xù)迭代優(yōu)化網(wǎng)易 Duilib 框架，不斷的擴(kuò)展它的功能。在 github 社區(qū)里，已經(jīng)有很多的開發(fā)者參與到項目的迭代中。

歡迎更多開發(fā)者朋友的加入。

特別鳴謝：感謝自網(wǎng)易 Duilib 成立以來，為之貢獻(xiàn)過以及仍在貢獻(xiàn)代碼的小伙伴們，包括但不限于 陽光、redrain、harrison 等。

撰文/ Redrain
編輯/ Ryan
來源/ 有道技術(shù)團(tuán)隊（ID: youdaotech）