skia是個2D向量圖形處理函數(shù)庫主胧,包含字型拘哨、坐標(biāo)轉(zhuǎn)換,以及點(diǎn)陣圖都有高效能且簡潔的表現(xiàn)赶舆。不僅用于Google Chrome瀏覽器哑姚,新興的Android開放手機(jī)平臺也采用skia作為繪圖處理,搭配OpenGL/ES與特定的硬件特征芜茵,強(qiáng)化顯示的效果叙量。
關(guān)于skia
2005年被Google收購,2007年初九串,Google開源skia GL相關(guān)源代碼绞佩,作為Google Android平臺的圖形引擎,稍后的Google Chrome瀏覽器也采用Skia引擎猪钮。隨著Android與Chrome (開放版本稱為"Chromium")兩大專案公布源代碼后品山,Skia也一并公開原始源代碼,以Apache License v2發(fā)布(注意烤低,這意味著與GPLv2授權(quán)不相容) 肘交,而Android與Chrome的源代碼庫中都有一份[Skia]的復(fù)制,因需求不同扑馁,做了部份的修改涯呻,比方說Chrome專案底下的 [chrome/trunk/src/skia],需要注意的是腻要,Skia本身是不涉及底層環(huán)境复罐,如Linux Framebuffer或Gtk+銜接的處理,這也是何以Android (透過Linux Framebuffer)與Chrome (開發(fā)中的Linux版本使用Gtk+)需要提供一份修改雄家,以便系統(tǒng)接軌效诅。
對比GDI/GDI+
之前用了一段時間的Windows下的duilib界面庫,發(fā)現(xiàn)其渲染引擎 Render Engine用的是GDI/GDI+混合,效率高填帽,但是功能實(shí)現(xiàn)很少蛛淋,同時存在一個非常嚴(yán)重的問題:鋸齒嚴(yán)重。
原版的duilib只用GDI渲染圖形篡腌,后來有幾個比較好的維護(hù)版本用了GDI+改善褐荷,但是好像沒有全部做扛鋸齒,在方形的控件以及貼圖控件下沒有影響嘹悼,一旦控件被賦予圓角特性叛甫,鋸齒感明顯,尤其在電腦分低辨率下顯得嚴(yán)重杨伙,話不多說其监,看圖:
針對自繪的問題,使用GDI+的? SetSmoothingMode() 函數(shù) 設(shè)置抗鋸齒就可以解決限匣。如下圖效果:
可以很明顯的改善鋸齒帶來的影響抖苦,目前本人在duilib源碼部分修改了該部分的特性,包括自繪米死、圓角等的反鋸齒锌历,同時修復(fù)了帶邊框控件,邊緣像素偏移的問題峦筒。這些都是很好解決的究西,但目前還存在一個問題尚未解決,就是非方形貼圖的問題物喷,就是圖片貼在帶圓角的控件當(dāng)中卤材,源碼中是采用CreateRoundRectRgn()和ExtSelectClipRgn(),即創(chuàng)建區(qū)域裁剪峦失。效果如圖:
關(guān)于這個區(qū)域裁剪的鋸齒問題扇丛,我看GDI/GDI+是沒轍了,正由于這個問題Skia庫得到了完美的解決宠进,那就是路徑區(qū)域帶抗鋸齒晕拆!話不多說,看效果圖吧
skia很好很強(qiáng)大材蹬,不過還是發(fā)現(xiàn)一個問題实幕,1個像素的問題,舉個栗子:
可以看出昆庇,在反鋸齒模式下,1像素的邊框變成了虛化的2像素闸溃。下面看看2像素的矩形邊框情況:
2像素的矩形框下拱撵,寬度是一致的,同時顏色亮度也一直表蝙。后面發(fā)現(xiàn)拴测,單像素下會出現(xiàn)邊框虛化1一像素的情況。
總結(jié)就是:skia會對單像素的反鋸齒模式下進(jìn)行邊緣虛化集索,表現(xiàn)為像素多1,同時變量像素亮度+1汇跨,
Skia單像素問題原因及解決方法
原因
出現(xiàn)上述問題务荆,原因是在skia等引擎庫中,設(shè)置抗鋸齒模式之后穷遂,繪圖時開始的像素點(diǎn)并不是像素的邊緣函匕,而是假定一條虛擬的中線,該中線在像素點(diǎn)的中間蚪黑,當(dāng)設(shè)置為單像素時盅惜,如1個像素時,按理是需要繪制從像素點(diǎn)的0的左邊線填充到0的右邊線祠锣,但是skia的機(jī)制從0.5開始酷窥,所以導(dǎo)致從0.5繪制一個像素到了1.5,但是像素點(diǎn)不可分割填充伴网,所以采用了0和1兩個像素都填充,同時亮度降低以區(qū)別2像素妆棒,同時產(chǎn)生抗鋸齒感澡腾。
解決方法
在繪制單像素時候,將像素坐標(biāo)同時增大偏移0.5個像素即可糕珊;即保持圖形的寬高不變动分,坐上角坐標(biāo)增大0.5像素。
在繪制雙像素時红选,不能偏移0.5像素澜公,否則出現(xiàn)單像素的情況,所以線寬為雙數(shù)時喇肋,正常調(diào)用即可坟乾,單像素調(diào)用繪圖前進(jìn)行偏移處理即可。