iOS绘制1像素的线

有时候页面上需要绘制1像素的分隔线，可以通过添加 view 的方式，也可以通过 UIGraphicsGetCurrentContext 的方式实现。但是通过UIGraphicsGetCurrentContext实现的时候需要注意像素的问题。

在绘制1像素线之前，我们先来看一下绘制高度为50的线是什么样的效果。以下图均为模拟器上的截图放大后显示，红色为view的方式，黑色为UIGraphicsGetCurrentContext的方式，分别在2倍屏和3倍屏的效果。

let line1 = UIView(frame: CGRect(x: 0, y: 50, width: 100, height: 50))
line1.backgroundColor = .red
addSubview(line1)

paint.setLineWidth(50)
paint.move(to: CGPoint(x: 100, y: 50))
paint.addLine(to: CGPoint(x: 200, y: 50))
paint.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
paint.strokePath()

iPhone Xʀ： iPhone Xs Max：

从图中可以看出，paint.strokePath() 这个方式是居中绘制。

下面再看下绘制1像素的效果。

let line1 = UIView(frame: CGRect(x: 0, y: 1, width: 100, height: 1/UIScreen.main.scale))paint.setLineWidth(1/UIScreen.main.scale)

iPhone Xʀ： iPhone Xs Max:

由上看出，通过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)

let line1 = UIView(frame: CGRect(x: 0, y: 1, width: 100, height: 1/UIScreen.main.scale))
line1.backgroundColor = .red
addSubview(line1)

paint.setLineWidth(1/UIScreen.main.scale)
paint.move(to: CGPoint(x: 100, y: 1+(1/UIScreen.main.scale/2)))
paint.addLine(to: CGPoint(x: 200, y: 1+(1/UIScreen.main.scale/2)))
paint.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
paint.strokePath()

iPhone Xʀ： iPhone Xs Max:

接下来的任务就是把 (1/UIScreen.main.scale/2) 设置为一个常量，添加一个公用的方法，以便项目中使用就好了。

iOS绘制1像素的线相关推荐

手机1像素线粗_iOS绘制1像素线的正确姿势
一.前言事情的起因是这样的,因为需求的原因,有一个页面的cell分割线需要自定义,于是我的同事很顺其自然地用了个view,并将其高度设为1,来作为cell分割线使用.一切看起来都那么平静,直到有一天 ...
ios上1像素的问题
探讨iOS某个像素点是否显示依据,以摸索为什么iOS没适配的应用在iphone6上面线的粗细会不稳定.有的线会变粗. 先说一下系统对某个像素点是否显示的依据: // 如果单个像素分为10格,如上 ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
R语言ggplot2可视化线图（line plot）:当数据有中断、缺失时R不会将数据绘制为连续的线图、而是出现断点
R语言ggplot2可视化线图(line plot):当数据有中断.缺失时R不会将数据绘制为连续的线图.而是出现断点目录
plotly基于dataframe数据绘制股票自定义K线图
plotly基于dataframe数据绘制股票自定义K线图 # 绘制蜡烛图并自定义可视化形式: import plotly as py import plotly.graph_objs as go ...
python绘制k线图的步骤_Python使用PyQtGraph绘制股票行情K线图
PyQtGraph是Python平台上一种功能强大的2D/3D绘图库,相对于matplotlib库,由于其在内部实现方式上,使用了高速计算的numpy信号处理库以及Qt的GraphicsView框架, ...
用 pandas + matplotlib 绘制精美的K线图
大家好,我是早起. 在使用 Python 进行金融数据分析时,绘制 K线图是很常见的需求. 但如果使用 matplotlib 从 0 开始绘制,一步一步添加日线.均线.MACD.成交量等指标时,则会 ...
IOS绘制小黄人，对绘图知识的一个练习
IOS绘制小黄人,对绘图知识的一个练习 #define kTopX rect.size.width * 0.5 #define kTopRadius 80 #define kTopY 260// // ...
WPF 绘制对齐像素的清晰显示的线条
WPF 绘制对齐像素的清晰显示的线条原文:WPF 绘制对齐像素的清晰显示的线条版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布, ...
python画蜡烛致敬烈士_「」matplotlib 股票-用python绘制蜡烛线型k线图是用代码还是绘图工具-TOP金融网...
用python绘制蜡烛线型k线图是用代码还是绘图工具 import matplotlib.pyplot as plt from matplotlib.dates import DateFormatte ...

iOS绘制1像素的线

iOS绘制1像素的线相关推荐

最新文章

热门文章