iOS centerline width vs. pixel relationship

I. What is scale factor

In a [UIScreen mainScreen] property called scale , this property is called the scale factor scale factor. This attribute represents the conversion 逻辑坐标系 scale from conversion to current 设备坐标系 . UIKit There is a property in the frame that view contentScaleFactor expresses the same meaning.

逻辑坐标系The coordinate system we often use in mathematics is an abstraction of the real thing. For example, if we want to display a square on the app, we'll determine its coordinates (100,100) and its width (100,100). Here, The coordinates and the wide-height values are an abstraction of the square. In the actual display process, the exact position of the coordinates and the actual length of the width and height are expressed by the physical properties of the hardware and the coordinate system. In 逻辑坐标系 , points as a unit of measurement, usually in a mathematical coordinate system 点to represent the smallest unit of measurement.

When we are programming, the parameters that are set in the frame center expression coordinate position are in CGFloat point units.

设备坐标系is the actual coordinate system of the device. In the actual screen, the 像素 ( Pixel ) is used as the basic unit of measurement.

Because the units of the two coordinate systems are not uniform, the coordinate system conversion is required.

In iOS when we use frames such as quartz,uikit,coreanimation, all coordinate systems are measured by point. The system will help us handle point-to-pixel conversions when actually rendering to settings.

Two. Conversion of coordinate systems

scaleThe Transform property reflects the conversion from logical coordinates to device screen coordinates. On a non-retina screen, the scale factor value is 1.0, which 逻辑坐标系中的一个点 equals 设备中一个像素(1×1) , in the retina screen, the scale factor value is 2.0, which is 逻辑坐标系中的一个点 equal to 设备中四个像素(2×2) . Similarly, on the 6plus this scale 3.0 device , 1 point equals 9 pixels .

Therefore, when we make a line with a line width of 1 in the drawing, the situation is different on the non-Retina screen and the retina screen.

Display of a line width on a non-retina screen and retina screen

In a non-retina screen, when we draw a line with a line width of 1 on (3,0), the line is one 像素点 width (dashed part), because the fact that one can not be 像素点 displayed half 像素 , so the iOS 反锯齿 technology lets 1 line width line shows 2 像素 The width of a line (the light part), and the color is lighter. Only a 0.5 offset to the line will show a true line width of 1.

Line with 0.5 (point) offset to display a pixel width

In the Retina screen, if you want to draw a line with a width of one 像素 , you need not only a 0.5point line width, but also a 0.25point offset to draw a 像素点 width line.

Of course, if there are no special needs, Apple does not recommend using a width 像素点 of one line, because it is too thin on the retina screen to see clearly.

iOS centerline width vs. pixel relationship