在矩形UIView的底部添加三角形尖端

Question

我需要在UIView的中间添加一个提示。 我想要实现的是一个自定义谷歌地图标记，如下图所示。

到目前为止，我的代码只是绘制一个没有三角形尖端的矩形uiview。

修改

我希望我的UIView在底部有一个三角形的笔尖

UIView *infoView  =  [[UIView alloc] initWithFrame:CGRectMake(10, 85, screenWidth *0.25, 75)];
infoView.backgroundColor = [UIColor blueColor];
CGRect currentFrame = infoView.frame;


float strokeWidth = 3.0;
float HEIGHTOFPOPUPTRIANGLE = 75;
float WIDTHOFPOPUPTRIANGLE = screenWidth*0.25;
float borderRadius = 4;

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, strokeWidth);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);

// Draw and fill the bubble
CGContextBeginPath(context);
CGContextMoveToPoint(context, borderRadius + strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f - WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f) + 0.5f, strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) - strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, strokeWidth + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);

[infoView drawRect:currentFrame];

[self.view addSubview:infoView];

Answer 1

您可以尝试UIImageView，然后确保在导入时启用切片，因此如果您更改视图，图像将正确缩放。

显然你可能遇到UIView.clipsToBounds = true

的问题

如果您想使用绘图方式，可以试试这个。我在操场上快速编码......

import UIKit

var balloon = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 250))
balloon.backgroundColor = UIColor.clear


let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 200, y: 0))
path.addLine(to: CGPoint(x: 200, y: 200))

// Draw arrow
path.addLine(to: CGPoint(x: 120, y: 200))
path.addLine(to: CGPoint(x: 100, y: 250))
path.addLine(to: CGPoint(x: 80, y: 200))

path.addLine(to: CGPoint(x: 0, y: 200))
path.close()

let shape = CAShapeLayer()
//shape.backgroundColor = UIColor.blue.cgColor
shape.fillColor = UIColor.blue.cgColor
shape.path = path.cgPath
balloon.layer.addSublayer(shape)

balloon

使用bezier路径的参考： Ref

Answer 2

目标代码

UIView *balloonView  =  [[UIView alloc] initWithFrame:CGRectMake(10,  85, 200, 250)];
balloonView.backgroundColor = [UIColor clearColor];

UIBezierPath* trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(0, 0)];
[trianglePath addLineToPoint:CGPointMake(200.0f,0.0f)];
[trianglePath addLineToPoint:CGPointMake(200.0f,200.0f)];

//Draw Line
[trianglePath addLineToPoint:CGPointMake(120.0f,200.0f)];
[trianglePath addLineToPoint:CGPointMake(100.0f,250.0f)];
[trianglePath addLineToPoint:CGPointMake(80.0f,200.0f)];

[trianglePath addLineToPoint:CGPointMake(0.0f,200.0f)];

CAShapeLayer *triangleMaskLayer = [CAShapeLayer layer];
triangleMaskLayer.fillColor = [UIColor blueColor].CGColor;
[triangleMaskLayer setPath:trianglePath.CGPath];

[balloonView.layer addSublayer:triangleMaskLayer];

[self.view addSubview:balloonView];