關(guān)于Skia的單像素偏移問題

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+未設(shè)置反鋸齒

針對自繪的問題,使用GDI+的? SetSmoothingMode() 函數(shù) 設(shè)置抗鋸齒就可以解決限匣。如下圖效果:


GDI+設(shè)置反鋸齒

可以很明顯的改善鋸齒帶來的影響抖苦,目前本人在duilib源碼部分修改了該部分的特性,包括自繪米死、圓角等的反鋸齒锌历,同時修復(fù)了帶邊框控件,邊緣像素偏移的問題峦筒。這些都是很好解決的究西,但目前還存在一個問題尚未解決,就是非方形貼圖的問題物喷,就是圖片貼在帶圓角的控件當(dāng)中卤材,源碼中是采用CreateRoundRectRgn()和ExtSelectClipRgn(),即創(chuàng)建區(qū)域裁剪峦失。效果如圖:

圓角處很明顯的看到被區(qū)域裁剪造成的鋸齒

關(guān)于這個區(qū)域裁剪的鋸齒問題扇丛,我看GDI/GDI+是沒轍了,正由于這個問題Skia庫得到了完美的解決宠进,那就是路徑區(qū)域帶抗鋸齒晕拆!話不多說,看效果圖吧


被圓形矩形裁剪的抗鋸齒

skia很好很強(qiáng)大材蹬,不過還是發(fā)現(xiàn)一個問題实幕,1個像素的問題,舉個栗子:


1像素矩形,上圖設(shè)置反鋸齒堤器,下圖無設(shè)置

可以看出昆庇,在反鋸齒模式下,1像素的邊框變成了虛化的2像素闸溃。下面看看2像素的矩形邊框情況:


2像素矩形,上圖設(shè)置反鋸齒整吆,下圖無設(shè)置

2像素的矩形框下拱撵,寬度是一致的,同時顏色亮度也一直表蝙。后面發(fā)現(xiàn)拴测,單像素下會出現(xiàn)邊框虛化1一像素的情況。


3像素矩形,上圖設(shè)置反鋸齒府蛇,下圖無設(shè)置

總結(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像素后正常顯示

在繪制雙像素時红选,不能偏移0.5像素澜公,否則出現(xiàn)單像素的情況,所以線寬為雙數(shù)時喇肋,正常調(diào)用即可坟乾,單像素調(diào)用繪圖前進(jìn)行偏移處理即可。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蝶防,一起剝皮案震驚了整個濱河市甚侣,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌间学,老刑警劉巖殷费,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件印荔,死亡現(xiàn)場離奇詭異,居然都是意外死亡详羡,警方通過查閱死者的電腦和手機(jī)仍律,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來实柠,“玉大人水泉,你說我怎么就攤上這事≈鞯剑” “怎么了茶行?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長登钥。 經(jīng)常有香客問我畔师,道長,這世上最難降的妖魔是什么牧牢? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任看锉,我火速辦了婚禮,結(jié)果婚禮上塔鳍,老公的妹妹穿的比我還像新娘伯铣。我一直安慰自己,他們只是感情好轮纫,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布腔寡。 她就那樣靜靜地躺著,像睡著了一般掌唾。 火紅的嫁衣襯著肌膚如雪放前。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天糯彬,我揣著相機(jī)與錄音凭语,去河邊找鬼。 笑死撩扒,一個胖子當(dāng)著我的面吹牛似扔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播搓谆,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼炒辉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了挽拔?” 一聲冷哼從身側(cè)響起辆脸,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎螃诅,沒想到半個月后啡氢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體状囱,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年倘是,在試婚紗的時候發(fā)現(xiàn)自己被綠了亭枷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡搀崭,死狀恐怖叨粘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瘤睹,我是刑警寧澤升敲,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站轰传,受9級特大地震影響驴党,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜获茬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一港庄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恕曲,春花似錦鹏氧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至茸俭,卻和暖如春笨篷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背瓣履。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留练俐,地道東北人袖迎。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像腺晾,于是被迫代替她去往敵國和親燕锥。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,322評論 25 707
  • 太長了悯蝉,還是轉(zhuǎn)載吧...今天在看博客的時候归形,無意中發(fā)現(xiàn)了@Trinea在GitHub上的一個項(xiàng)目Android開源...
    龐哈哈哈12138閱讀 20,218評論 3 283
  • 累了一天,似乎都蒼老的許多鼻由,特別疲憊暇榴,藍(lán)瘦啊厚棵,有你們的鼓勵和默默陪伴,真的就很開心了
    方瑋琪閱讀 299評論 0 6
  • “嫣虹蔼紧,嫣虹婆硬,你在哪兒?”我找遍了我們曾經(jīng)去過的角角落落奸例,依然不見嫣虹的蹤跡彬犯。三年的風(fēng)風(fēng)雨雨都過來了,她怎么就突然...
    酷炫T恤閱讀 262評論 0 1