How To Draw More Precise Lines using Core Graphics and CALayer

守給你的承諾、 提交于 2020-01-15 05:43:07

问题


Hello I am having a hard time making this UI element look the way I want (see screenshot). Notice the image on the right--how the line width and darkness looks inconsistent compared to the image on the left (which happens to be a screen grab from safari) where the border width is more consistent. How does apple make their lines so perfect?

I'm using a CALayer and the Core Graphics API to draw the image on the right. Is it possible to draw such perfect lines with the standard apis?


回答1:


The problem with drawing a 1-pixel path is that Quartz draws paths on an exact point grid, starting from {0,0}. This means that if you stroke a vertical path starting at {10,10} with a 1-point width, half of that line will render in the pixel to the left of the coordinate and half in the pixel to the right, causing a blurring effect.

You should therefore shift your drawing by {0.5,0.5} if you want lines to draw on exact pixels.

You can definitely draw what you want with Quartz.




回答2:


Apple uses images for the tab elements.



来源:https://stackoverflow.com/questions/2634103/how-to-draw-more-precise-lines-using-core-graphics-and-calayer

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!