原帖我没找到 找到了原帖的git https://github.com/maltsugar/CustomPopoverView.git 可以看源码
我自己吧源码拆出来了
总结一下带三角的弹出框的绘制
1.整个弹出框的层级为
底层view 为一个容器containerView 在整个view的layer上,我们首先绘制出带三角的矩形弹出框layer
//贝塞尔路径
/*
贝塞尔路径如下图 起点P0为三角的顶点 逆时针 P0->P6
___/\___
| | 逆时针绘制 : 起点为三角的顶点
|______|
*/
将这个containerView作为底层的View, 再在其中创建如Tableview或者View 来作为操作view
几个注意点
1.containerView的layer 其实是不断在被重绘的 这里通过KVO监控containerView的 frame属性变化 来不断调整带三角Layer的 大小
/**
初始化 这里的self ==> containerView
@param config 配置信息
@return PopOverVieConfiguration实例
*/
- (instancetype)initWithConfig:(SDPopViewConfig *)config
{
self = [super init];
if (self) {
// kvo 监控自己的 frame 属性变化
[self addObserver:self forKeyPath:@"frame" options:0 context:NULL];
_config = config;
}
return self;
}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
if([keyPath isEqualToString:@"frame"]) {
CGRect newFrame = CGRectNull;
if([object valueForKeyPath:keyPath] != [NSNull null]) {
newFrame = [[object valueForKeyPath:keyPath] CGRectValue];
//根据监控到的frame 来调整 带三角layer
[self setLayerFrame:newFrame];
}
}
}
2.三角尖角Style样式的代码思路
由于是通过贝塞尔线段来绘制的,所以 可以通过三角顶点的x值 来判断 通过不同的样式, 复制给三角顶点x左边
具体见代码
我自己拆的代码就不放出来了,看看原帖的GitHub就可以