IOS 绘制心电图
这两天公司做一个医疗的项目,其中一个需求是接受传感器的病人心跳数据,将之在UI上面绘制成心电图. 在网上看了很多demo,废话不多说直接切入.(漏洞百出,欢迎批评指正)
因为除了逻辑其实很简单，代码就没有放到githup上面。点击打开链接 这是demo的下载地址
一.Core Graphics
Core Graphics 是一个基于c的api编写的图形核心绘制引擎。提供比较底层的，轻量级的二维渲染和非常好的输出保真度
//搬运别人的 总结就是这样
//因为画的是心电图 所以 必须要有心跳的背景网格对不对 所以第一步 就是先画出背景的网格
第一种：创建图片类型的画布。调用UIGraphicsBeginImageContextWithOptions函数就可获得用来处理图片的图形上下文。
第二种：利用cocoa自动为你生成画布。当你子类化了一个UIView并实现了自己的drawRect：方法后，一旦drawRect：方法被调用，Cocoa就会为你创建一个图形上下文，
这上面2种都是自己弄的画布，没有引用当前图像所在的画布，如果自己不想创建画布，可以用当前的画布（类型是：CGContextRef）
具体看代码:
画图展示需要我们自定义一个UIView,重写初始化方法.
self.clearsContextBeforeDrawing = YES;//这个方法 是保证我们的改变挥着绘图能够生效
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.clearsContextBeforeDrawing = YES;
}
return self;
}在重写系统方法
- (void)drawRect:(CGRect)rect 这时候系统就知道 你要发挥你的绘画天赋了,并已经准好了
- (void)drawRect:(CGRect)rect {
[self drawCurve]; // 绘制心电图型
[self drawGrid]; //绘制心电图 背景网格
}
//因为画的是心电图 所以 必须要有心跳的背景网格对不对 所以第一步 就是先画出背景的网格
//绘制背景的网格
- (void)drawGrid{
CGContextRef context = UIGraphicsGetCurrentContext();//获取上下文 知道你要画图的地方 (就是画布)
CGFloat height = self.frame.size.height;
CGFloat width = self.frame.size.width;
// NSLog(@"高 >>%f 宽 >> width %f",height,width);
CGFloat cell_square_width = 30;//设置每一个格子的宽度
CGContextSetLineWidth(context, 1); //设置线宽
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); //设置线的颜色
// 设置绘制表格的起始点
NSInteger pos_x = 1;
while (pos_x <= width) {
CGContextSetLineWidth(context, 0.2);
// 起始点
CGContextMoveToPoint(context, pos_x, 1);
CGContextAddLineToPoint(context, pos_x, height);
pos_x += cell_square_width;
CGContextStrokePath(context);
}
NSInteger pos_y = 1;
while (pos_y <= height) {
CGContextMoveToPoint(context, 1, pos_y);
CGContextAddLineToPoint(context, width,pos_y);
pos_y += cell_square_width;
CGContextStrokePath(context);
}
cell_square_width = cell_square_width / 5; //刚才设置大格 现在 绘制小格
pos_x = 1;
while (pos_x <= width) {
CGContextSetLineWidth(context, 0.2);
// 起始点
CGContextMoveToPoint(context, pos_x, 1);
CGContextAddLineToPoint(context, pos_x, height);
pos_x += cell_square_width;
CGContextStrokePath(context);
}
pos_y = 1;
while (pos_y <= height) {
CGContextMoveToPoint(context, 1, pos_y);
CGContextAddLineToPoint(context, width,pos_y);
pos_y += cell_square_width;
CGContextStrokePath(context);
}
}
绘制玩背景 就要在背景上 开始描绘心跳了
// 这是绘制曲线的
- (void)drawCurve{
if (self.cunrrentPointCount == 0) { //当前点得数量 没有点 就不画了
return;
}
CGFloat curveWidth = 0.8; //宽度
CGContextRef currentContext = UIGraphicsGetCurrentContext(); //跟上面一样
CGContextSetLineWidth(currentContext, curveWidth);
// 设置心跳的颜色
CGContextSetStrokeColorWithColor(currentContext, [UIColor greenColor].CGColor);
CGContextMoveToPoint(currentContext, self.points[0].x, self.points[0].y); //self.points 是一个CGPoint的属性
for (int i = 0; i != self.cunrrentPointCount; ++ i) {
if (self.points[i - 1].x < self.points[i].x) { //这里的意思是 在已经获知 所有的点 我判断连个点得位置
//如果我右边 还有点 我就连上去 如果没有 我就移动到那
//什么也不干(等待下一组数据)
CGContextAddLineToPoint(currentContext, self.points[i].x, self.points[i].y);
} else {
CGContextMoveToPoint(currentContext, self.points[i].x, self.points[i].y);
}
}
CGContextStrokePath(currentContext);
}
实现心电图有两种方式 一种是是平移的 就是我们经常在医院或者电视上看到的那种走纸带的,还有一种就是一个亮点在屏幕上来回移动画出心电图
// 刷新
- (void)addPointAsRefreshChangeform:(CGPoint)point{
static NSInteger currentPointsCount = 0; //设置当前开始从0 刷新 使用static 保证只执行一次 不产生其他影响
if (currentPointsCount < kMaxContainerCapacity) {
self.numberOfRefreshElements = currentPointsCount + 1;
self.refreshPointContainer[currentPointsCount] = point;
currentPointsCount ++;
}else{
NSInteger workIndex = 0;
while (workIndex != kMaxContainerCapacity - 1) {
self.refreshPointContainer[workIndex] = self.refreshPointContainer[workIndex + 1];
workIndex ++;
}
self.refreshPointContainer[kMaxContainerCapacity - 1] = point;
self.numberOfRefreshElements = kMaxContainerCapacity;
}
}
经过一番折腾 为了便于理解画图 讲drawCruve得方法 简化
- (void)drawCurve:(CGContextRef)ctx{
CGContextSetLineWidth(ctx, lineWidth_LiveMonitor);
CGContextSetStrokeColorWithColor(ctx, [UIColor greenColor].CGColor);
// 开始画线
//将数组里的点画成连续的线 点进去介绍的很明白<span style="font-family: Arial, Helvetica, sans-serif;"> </span>
CGContextAddLines(ctx, drawingPoints, _pointArray.count );
//这样 以后 我们只要把 要画的点传进drawdingPoints 然后调用 drawrect 就行
CGContextStrokePath(ctx);
}
写一个方法 用于外部调用. 用来传递数据
- (void)fireDrawing{
// 外面的数据先传给 pointArray 再将pointArray的值取出来 转成坐标
for (int i = 0 ; i < _pointArray.count ; i++) {
//textX 是我定义的X的坐标 当它 < 屏幕的宽度是 就一直++ (实现左移) pointMartin 是每次左移的距离
if (testX < self.width) {
drawingPoints[i] = CGPointMake(testX,self.height/2 - [_pointArray[i] intValue] / 10);
testX = testX + pointMartin;
} else {
testX = 0;
}
}
// 一部分 需要重画 在这里设置 心电图中间的黑格
// 因为 drawingPoints[1].x 一直在位移 所以重画的部分 也在偏移
<span style="white-space:pre"> </span>// 设置每次需要重新绘制的rect
CGRect reck = CGRectMake(testX - _pointArray.count * pointMartin, 0, + 10, self.height);
dispatch_async(dispatch_get_main_queue(), ^{
[self setNeedsDisplayInRect:reck];
<pre name="code" class="objc">// 每次画图的第一个点 应该是上次画的最后一个点testX = testX - pointMartin; }); } 外部 调用fireDrawing的时候 传进来数据 就可以实现绘制
在控制器中引入 头文件 开始使用数据绘图
- (void)viewWillAppear:(BOOL)animated{
[self popDataTimerEvent];
}
- (void)popDataTimerEvent{
<span style="white-space:pre"> </span>//注意定时器的用法 如何释放 这里定时器会让self的引用计数 + 1,
self.popDataTimer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(popData) userInfo:nil repeats:YES];
_index = 0;
[[NSRunLoop currentRunLoop] addTimer:self.popDataTimer forMode:NSDefaultRunLoopMode];
}
- (void)popData{
TripleECGView *view = self.ecgViewsArr[0];
NSMutableArray *temparr = [NSMutableArray array];
for (int i = 0; i < _drawingCountOnce; i++) {
[temparr addObject:_testArr[_index + i]];
}
//传入数据
view.pointArray = temparr;
// for (int i = 0; i < 3; i++) {
// [view.pointArray addObject:_testArr[_index + i]];
//
// }
<span style="white-space:pre"> </span>// 调用画图
[view fireDrawing];
_index += _drawingCountOnce;
if (_index > 420) {
_index = 0;
}
}
这时候 模拟器就会出现传递数据汇出的图形
