我想用一些自定义代码制作一个像 UILabel 这样的工具提示。我设法向 UILabel 添加一个三角形,但因为它超出了 UILabel 本身的边界(或框架)。它不是在屏幕上绘制的。
这是我的方法:
- (void) addTriangleTipToLayer: (CALayer *) targetLayer{
[targetLayer setBackgroundColor: [UIColor whiteColor].CGColor];
CGPoint startPoint = CGPointMake(0, targetLayer.frame.size.height);
CGPoint endPoint = CGPointMake(15, targetLayer.frame.size.height);
UIBezierPath *trianglePath = [UIBezierPath bezierPath];
CGFloat middleX = (startPoint.x + endPoint.x) / 2;
CGFloat middleY = 7.5 * tan(M_PI / 3);
CGPoint middlePoint = CGPointMake(middleX, -middleY);
[trianglePath moveToPoint:startPoint];
[trianglePath addLineToPoint:middlePoint];
[trianglePath addLineToPoint:endPoint];
[trianglePath closePath];
CGAffineTransform rotate = CGAffineTransformMakeRotation(180);
[trianglePath applyTransform:rotate];
CAShapeLayer *triangleLayer = [CAShapeLayer layer];
[triangleLayer setFillColor: [UIColor whiteColor].CGColor];
[triangleLayer setPath:trianglePath.CGPath];
[targetLayer addSublayer:triangleLayer];
}
我还将标签转换为图像内容,以用作 Google map 标记图标。这是我对此 UILabel 所做的其他事情。
UILabel *klabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 20)];
[klabel setFont: [UIFont fontWithName:@"Roboto-Light" size:9]];
[klabel setText: @"Tower"];
// here I apply the add triangle function to the uilabel.layer
[self addTriangleTipToLayer:klabel.layer];
//set the label to fit text content before rendered as a image
[klabel sizeToFit];
//convert the uilabel to image content
UIGraphicsBeginImageContextWithOptions(klabel.bounds.size, NO, [[UIScreen mainScreen] scale]);
[klabel.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * kicon = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// the rest of code is just use the image content as marker icon on google map.
kaliaMarker = [[GMSMarker alloc] init];
kaliaMarker.tappable = NO;
kaliaMarker.position = CLLocationCoordinate2DMake(21.283652, -157.836971);
kaliaMarker.infoWindowAnchor = CGPointMake(0.5, 0.5);
kaliaMarker.icon = kicon;
kaliaMarker.map = self.mapView;
targetLayer
是 myLabel.layer
,这是我添加三角形的位置。问题是 middleY
从计算中是 -12.4
,我猜它超出了我的 UILabel 的可见边界/框架,你只是看不到它。
我想知道我应该做什么,或者增加 UILabel 的可见部分以显示这个小三角形的正确方法是什么。
谢谢大家的帮助!
附注它应该看起来像这样。
但看起来是这样的。如果我将路径旋转 90 度,我可以看到半个三角形,它当然就在那里。所以对于180度来说,整个三角形都超出了边界,看不到。
最佳答案
这段稍微修改过的代码可以正常工作。我将该方法的参数更改为 UIView,以便我可以访问其背景颜色以使三角形具有相同的颜色,并使三角形点的 y 值与 View 的高度成比例。
- (void) addTriangleTipToLayer: (UIView *) view{
CALayer *targetLayer = view.layer;
[targetLayer setBackgroundColor: [UIColor whiteColor].CGColor];
CGPoint startPoint = CGPointMake(0, targetLayer.frame.size.height);
CGPoint endPoint = CGPointMake(15, targetLayer.frame.size.height);
UIBezierPath *trianglePath = [UIBezierPath bezierPath];
CGFloat middleX = (startPoint.x + endPoint.x) / 2;
CGFloat middleY = targetLayer.frame.size.height * 1.8;
CGPoint middlePoint = CGPointMake(middleX, middleY);
[trianglePath moveToPoint:startPoint];
[trianglePath addLineToPoint:middlePoint];
[trianglePath addLineToPoint:endPoint];
[trianglePath closePath];
CAShapeLayer *triangleLayer = [CAShapeLayer layer];
[triangleLayer setFillColor: view.backgroundColor.CGColor];
[triangleLayer setPath:trianglePath.CGPath];
[targetLayer addSublayer:triangleLayer];
}
关于ios - 如何向 UILabel 添加三角形,使其看起来像工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28419066/