界面開(kāi)發(fā)系統(tǒng)組成
pc端，手機(jī)客戶端，瀏覽器端的界面開(kāi)發(fā)作箍，可以說(shuō)是前端開(kāi)發(fā)窑多。他們共同的地方都是使用標(biāo)準(zhǔn)化的UI生成系統(tǒng)，比如window開(kāi)發(fā)据德，android開(kāi)發(fā)，html/css的開(kāi)發(fā)。他們的UI都會(huì)有自己的特點(diǎn)朦肘。底層也都是使用了opengl/directX等類(lèi)似的圖形庫(kù)操作顯卡，并展示圖形巩检。
同時(shí)厚骗，通常的界面開(kāi)發(fā)也會(huì)同時(shí)提供一種非標(biāo)準(zhǔn)化的圖形開(kāi)發(fā)方式，讓開(kāi)發(fā)人員可以直接通過(guò)opengl等底層的圖形api畫(huà)圖形兢哭，這種方式基本被游戲引擎所采用领舰。我們可以看到游戲里的圖形界面基本風(fēng)格是明顯區(qū)別于windows 應(yīng)用軟件, android/iOS app,html/css網(wǎng)站的。
基本一個(gè)界面開(kāi)發(fā)系統(tǒng)迟螺，應(yīng)該包含基本兩部分：
1. 標(biāo)準(zhǔn)化的圖形構(gòu)建方式冲秽，比如android的界面的xml生成，各種layout, 組件等矩父，以及瀏覽器的html/css锉桑。 這種適用于構(gòu)建各種app及網(wǎng)站。
2. 提供直接操作底層圖形api的方式窍株，比如android的 GLSurfaceView, 可以在上面直接操作opengl畫(huà)UI民轴，我們可以看到，android使用相機(jī)進(jìn)行預(yù)覽時(shí)球订，也是使用了GLSurfaceView后裸，因?yàn)橄鄼C(jī)捕獲到的圖像是非標(biāo)準(zhǔn)化的。而且大部分游戲也是一樣的冒滩。對(duì)于瀏覽器來(lái)講微驶，可以使用webgl，及canvas來(lái)畫(huà)更靈活的UI开睡，比如地圖因苹，h5游戲等。
標(biāo)準(zhǔn)化界面原理
我們知道篇恒，圖形界面可以通過(guò)xml來(lái)描述扶檐，比如android及html, 系統(tǒng)解析的基本流程是：
1. 解析xml, 生成抽象語(yǔ)法樹(shù)。
2. 圖形后端根據(jù)語(yǔ)法樹(shù)生成頁(yè)面婚度。
這個(gè)流程有點(diǎn)類(lèi)似于編譯蘸秘，比如：
1. c語(yǔ)言編譯器對(duì)c文件進(jìn)行詞法分析官卡，生成抽象語(yǔ)法樹(shù)。
2. 編譯器后端歷遍這個(gè)語(yǔ)法樹(shù)醋虏，生成匯編指令寻咒，匯編指令與機(jī)器指令可以直接轉(zhuǎn)換。
平時(shí)我們看到的h5界面長(zhǎng)按截圖的功能颈嚼，有一部分是使用了html2canvas這個(gè)工具來(lái)把html/css頁(yè)面轉(zhuǎn)換成canvas毛秘， 實(shí)際上就是通過(guò)解析抽象語(yǔ)法樹(shù)并轉(zhuǎn)換成UI的原理來(lái)完成的。
