在我的自定义 UIView 中,设置子视图的 backgroundColor 会导致它覆盖我的 drawRect 绘图(CGContextRef、CGMutablePathRef 等)。怎么修?
In my custom UIView, setting a subview's backgroundColor causes it to cover up my drawRect drawings (CGContextRef, CGMutablePathRef,etc). How to fix?
我有一个带有橙色 backgroundColor
的自定义容器视图。
在这个自定义视图中,我通过覆盖 drawRect
来绘制线条。这很好用,直到我尝试在子视图上画线。
以下是一些与代码编辑相关的屏幕截图,以说明我面临的问题:
^ 此图片显示了我的自定义视图,其中包含 self.graphBackgroundView
,但未设置明确的 backgroundColor
。我的 drawRect
行是可见的。这个不错。
^ 此图片显示了我的自定义视图,其中 self.graphBackgroundView
存在,但显式设置了 backgroundColor
。就好像我的绿色子视图的 z-index 高于我的 drawRect 的 z-index 之类的。
^ 最后,这张图片显示了我的自定义视图,其中 self.graphBackgroundView
存在,显式设置了 backgroundColor
(仍然是绿色),但 self.graphBackgroundView.layer.opacity
设置为 0.25。在这里我们可以再次看到 drawRect 线,但它不太正确,我们真的希望这条线完全绘制在视图的顶部,而不是下面。
真正的问题是我们在绿色屏幕截图中看到的。我们想要不透明的绿色子视图,我们只希望我们的白线绘制在它上面。
非常感谢任何帮助!
代码如下:
- (void)drawRect:(CGRect)rect
{
// GET CONTEXT
CGContextRef context = UIGraphicsGetCurrentContext();
// INIT PATH
CGMutablePathRef path = CGPathCreateMutable();
// CONFIG PATH
CGContextSetLineWidth(context, 1.0);
CGContextSetStrokeColor(context, CGColorGetComponents([UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0].CGColor)); // 4 color component white for use with CGColorGetComponents
// ESTABLISH STARTING POINT
CGPathMoveToPoint(path, NULL, 0.0, 100.0);
// GRAPH NEXT POINT
CGPathAddQuadCurveToPoint(path, NULL, 120.0, 160.0, 120.0, 160.0);
// GRAPH NEXT POINT
CGPathAddQuadCurveToPoint(path, NULL, 130.0, 170.0, 130.0, 170.0);
// ADD THE PATH
CGContextAddPath(context, path);
// DRAW
CGContextDrawPath(context, kCGPathStroke);
}
- (id)init
{
self = [super init];
if (self)
{
// INIT UI ELEMENTS
self.graphBackgroundView = [[UIView alloc] init];
// INIT AUTO LAYOUT VIEWS DICT
self.viewsDictionary = [NSMutableDictionary new];
[self.viewsDictionary setObject:self.graphBackgroundView forKey:@"graphBackgroundView"];
// TURN ON AUTO LAYOUT
self.graphBackgroundView.translatesAutoresizingMaskIntoConstraints = NO;
// ESTABLISH VIEW HIERARCHY
[self addSubview:self.graphBackgroundView];
// LAYOUT
// graphBackgroundView
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(0)-[graphBackgroundView]-(0)-|" options:0 metrics:0 views:self.viewsDictionary]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(topMargin)-[graphBackgroundView]-(bottomMargin)-|" options:0 metrics:@{@"topMargin":self.topMargin,@"bottomMargin":self.bottomMargin} views:self.viewsDictionary]];
// CONFIG
// self
self.backgroundColor = [UIColor orangeColor]; // My drawRect code DOES draw on top of this color
// graphBackgroundView
self.graphBackgroundView.backgroundColor = [UIColor greenColor]; // My drawRect code does NOT draw on top of this color
//self.graphBackgroundView.layer.opacity = 0.25; // <-- If I uncomment this I can kind of see the line I'm drawing underneath it via the effects of transparency
}
return self;
}
It's as if my green subview's z-index is higher than my drawRect's z-index, or something.
嗯,确实如此。如果您有父视图及其子视图,则子视图绘制在父视图的前面。这是成为子视图的一部分。这里唯一的惊喜是你很惊讶。
我有一个带有橙色 backgroundColor
的自定义容器视图。
在这个自定义视图中,我通过覆盖 drawRect
来绘制线条。这很好用,直到我尝试在子视图上画线。
以下是一些与代码编辑相关的屏幕截图,以说明我面临的问题:
self.graphBackgroundView
,但未设置明确的 backgroundColor
。我的 drawRect
行是可见的。这个不错。
self.graphBackgroundView
存在,但显式设置了 backgroundColor
。就好像我的绿色子视图的 z-index 高于我的 drawRect 的 z-index 之类的。
self.graphBackgroundView
存在,显式设置了 backgroundColor
(仍然是绿色),但 self.graphBackgroundView.layer.opacity
设置为 0.25。在这里我们可以再次看到 drawRect 线,但它不太正确,我们真的希望这条线完全绘制在视图的顶部,而不是下面。
真正的问题是我们在绿色屏幕截图中看到的。我们想要不透明的绿色子视图,我们只希望我们的白线绘制在它上面。
非常感谢任何帮助!
代码如下:
- (void)drawRect:(CGRect)rect
{
// GET CONTEXT
CGContextRef context = UIGraphicsGetCurrentContext();
// INIT PATH
CGMutablePathRef path = CGPathCreateMutable();
// CONFIG PATH
CGContextSetLineWidth(context, 1.0);
CGContextSetStrokeColor(context, CGColorGetComponents([UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0].CGColor)); // 4 color component white for use with CGColorGetComponents
// ESTABLISH STARTING POINT
CGPathMoveToPoint(path, NULL, 0.0, 100.0);
// GRAPH NEXT POINT
CGPathAddQuadCurveToPoint(path, NULL, 120.0, 160.0, 120.0, 160.0);
// GRAPH NEXT POINT
CGPathAddQuadCurveToPoint(path, NULL, 130.0, 170.0, 130.0, 170.0);
// ADD THE PATH
CGContextAddPath(context, path);
// DRAW
CGContextDrawPath(context, kCGPathStroke);
}
- (id)init
{
self = [super init];
if (self)
{
// INIT UI ELEMENTS
self.graphBackgroundView = [[UIView alloc] init];
// INIT AUTO LAYOUT VIEWS DICT
self.viewsDictionary = [NSMutableDictionary new];
[self.viewsDictionary setObject:self.graphBackgroundView forKey:@"graphBackgroundView"];
// TURN ON AUTO LAYOUT
self.graphBackgroundView.translatesAutoresizingMaskIntoConstraints = NO;
// ESTABLISH VIEW HIERARCHY
[self addSubview:self.graphBackgroundView];
// LAYOUT
// graphBackgroundView
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(0)-[graphBackgroundView]-(0)-|" options:0 metrics:0 views:self.viewsDictionary]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(topMargin)-[graphBackgroundView]-(bottomMargin)-|" options:0 metrics:@{@"topMargin":self.topMargin,@"bottomMargin":self.bottomMargin} views:self.viewsDictionary]];
// CONFIG
// self
self.backgroundColor = [UIColor orangeColor]; // My drawRect code DOES draw on top of this color
// graphBackgroundView
self.graphBackgroundView.backgroundColor = [UIColor greenColor]; // My drawRect code does NOT draw on top of this color
//self.graphBackgroundView.layer.opacity = 0.25; // <-- If I uncomment this I can kind of see the line I'm drawing underneath it via the effects of transparency
}
return self;
}
It's as if my green subview's z-index is higher than my drawRect's z-index, or something.
嗯,确实如此。如果您有父视图及其子视图,则子视图绘制在父视图的前面。这是成为子视图的一部分。这里唯一的惊喜是你很惊讶。