iOS 绘画 点与像素

iOS 像素与点

像素与点的关系

导入标的时候,我们都知道有1倍、2倍、3倍图。对应在1倍、2倍、3倍屏幕上使用。

那这些不同倍图(不同分辨率屏幕)与日常点的关系是什么了。

1倍屏: 1个点(point)对应1个像素(piexl),比如第一批 iPhone

2倍屏: 1个点(point)对应4个像素(piexl),横竖各3列,比如 iPhone6

3倍屏: 1个点(point)对应9个像素(piexl),横竖各3列,比如iPhone6Plus

像素示例图如下

Alt

红色矩形表示一个点, 不同倍屏对应不同像素点。

在日常开发中,我们大部分只需要关注 point, 由系统去帮我们处理像素转化。

绘制1像素的线条

想不明白?

mport UIKit

class ViewWithBottomLine: UIView {
    @IBInspectable var separatorColor: UIColor = Your default color

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

        let scale = UIScreen.main.scale

        let width = 1 / scale
        let offset = width / 2

        context.setLineWidth(width)
        context.setStrokeColor(separatorColor.cgColor)
        context.beginPath()
        context.move(to: CGPoint(x: 0, y: rect.maxY - offset))
        context.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - offset))
        context.strokePath()
    }
}

绘制一像素需要设置偏移量。

参考:https://www.jianshu.com/p/abcb18335e44

警惕奇数线条

虽然在开发中,我们只需要关注逻辑像分辨率(point),但是如果遇到奇数(宽高)线条在绘制的时候也可能产生锯齿现象。

比如当宽度为3的线条居中时,就需要调整偏移量,保证线条不发生锯齿。

Alt

发生锯齿原理

Alt

修正做法, 添加0.5的偏移量,和宽度。

let halfPointShift: CGFloat = 0.5
//to the start of the horizontal stroke
plusPath.move(to: CGPoint(
  x: halfWidth - halfPlusWidth + halfPointShift,
  y: halfHeight + halfPointShift))
    
//add a point to the path at the end of the stroke
plusPath.addLine(to: CGPoint(
  x: halfWidth + halfPlusWidth + halfPointShift,
  y: halfHeight + halfPointShift))

参考

Drawing and Printing Guide for iOS

CoreGraphic实现自定义按钮和轮盘-raywenderlich

抗锯齿处理: (针对图片旋转产生锯齿)1.开启 UI 控件的抗锯齿功能 2. 绘制带有一像素的透明边的图片 3. 使用更清晰的像素。

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页