iOS繪製1畫素的線

2021-09-25 20:45:56 字數 2389 閱讀 9932

有時候頁面上需要繪製1畫素的分隔線,可以通過新增 view 的方式,也可以通過 uigraphicsgetcurrentcontext 的方式實現。但是通過uigraphicsgetcurrentcontext實現的時候需要注意畫素的問題。

在繪製1畫素線之前,我們先來看一下繪製高度為50的線是什麼樣的效果。以下圖均為模擬器上的截圖放大後顯示,紅色為view的方式,黑色為uigraphicsgetcurrentcontext的方式,分別在2倍屏和3倍屏的效果。

從圖中可以看出,paint.strokepath() 這個方式是居中繪製。

下面再看下繪製1畫素的效果。

由上看出,通過view的方式沒有問題,通過paint繪製的會「失真」,出現兩個畫素的灰線。蘋果官方的解釋翻譯後是:奇數畫素寬度的線在渲染的時候將會表現為柔和的寬度擴充套件到向上的整數寬度的線,除非你手動的調整線的位置,使線剛好落在一行或列的顯示單元內。

可以這麼理解:蘋果在繪製的時候,最低繪製單位為1個單元。由於paint是居中繪製,繪製1畫素時,座標相鄰的兩個單元內各佔0.5畫素,此時跨越兩個單元,由於最低繪製為1個單元,所以繪製出了兩個畫素。如下圖所示:

如何解決呢?蘋果給出的方案是設定偏移量,使繪製的1畫素線在1個單元內。

我們可以這麼處理,以paint繪製橫線為例,使繪製的中心位置往下偏移0.5畫素,這樣中心位置就落在1個單元的中間位置,居中繪製時,上下各佔0.5畫素,此時正好佔據1個單元,所以繪製的效果也正好是1畫素。達到了和uiview的方式一樣的效果。

0.5畫素為 (1/uiscreen.main.scale/2)

接下來的任務就是把 (1/uiscreen.main.scale/2) 設定為乙個常量,新增乙個公用的方法,以便專案中使用就好了。

iOS 繪製1畫素線條總結

先了解下scale scale即螢幕縮放係數,根據當前裝置螢幕的大小計算的比例。下面來看下不同幾款裝置對應的scale裝置 size scale 4s2.000000 5 5s 2.000000 62.000000 6plus 3.000000 以上資料是根據下面 獲取scale cgfloat s...

手機1畫素線粗 實現移動端1畫素線 stylus

1px的邊框實現思路 給準備加1px的元素相對定位 給該元素加乙個偽元素,給偽元素乙個絕對定位 然後把元素的寬高按照dpr相對應的倍數等比例縮放。css3中的transfrom scale 下邊用stylus實現移動端的1畫素邊框 border border width 1px,border col...

iOS開發 基礎篇 iOS的一畫素線

首先為什麼要畫一畫素的線?當我們在 中或storyboard中設定座標系統中的任何圖形時,採用的是point來衡量。但實際渲染的時候是用畫素來渲染的,只不過這之間的轉換是系統自動幫我們做的,這樣做的好處是我們不用關心是否是retina屏,直接按照一套座標設定即可。但我們要知道在座標系統中1 poin...