• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ios - 如何更改此 UIBezierPath 的箭头方向

[复制链接]
菜鸟教程小白 发表于 2022-12-13 03:26:08 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我有以下代码,它绘制了一个圆形矩形,顶部有一个小插入符号箭头。我希望能够创建一个方法,根据我指定的内容在顶部、左侧、右侧或底部绘制箭头(我可能会传入一个枚举 typedef)。

这是我的代码现在生成的内容:

enter image description here

谁能帮我使这段代码更加动态/灵活,这样我就可以完成这项工作?

        CGContextBeginPath(context);
        CGContextMoveToPoint(context, kBubbleBorderRadius + 0.5f, kCaretHeight + 0.5f);
        CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f - (kCaretHeight * 2.0) / 2.0f) + 0.5f, kCaretHeight + 0.5f);
        CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f) + 0.5f, 0.5f);
        CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f + (kCaretHeight * 2.0) / 2.0f) + 0.5f, kCaretHeight + 0.5f);
        CGContextAddArcToPoint(context, currentFrame.size.width - 0.5f, kCaretHeight + 0.5f, currentFrame.size.width- 0.5f, currentFrame.size.height - 0.5f, kBubbleBorderRadius);
        CGContextAddArcToPoint(context, currentFrame.size.width - 0.5f, currentFrame.size.height - 0.5f, round(currentFrame.size.width / 2.0f + (kCaretHeight * 2.0) / 2.0f) + 0.5f, currentFrame.size.height - 0.5f, kBubbleBorderRadius);
        CGContextAddArcToPoint(context, 0.5f, currentFrame.size.height - 0.5f, 0.5f, kCaretHeight + 0.5f, kBubbleBorderRadius);
        CGContextAddArcToPoint(context, 0.5f, kCaretHeight + 0.5f, currentFrame.size.width - 0.5f, kCaretHeight + 0.5f, kBubbleBorderRadius);
        CGContextClosePath(context);
        CGContextDrawPath(context, kCGPathFill);



Best Answer-推荐答案


我可以给你点开始。 首先,我将矩形和箭头分开:

绘制简单的矩形:

const CGFloat kRectangleOffset = 5; // This is offset to have some space for arrow

// Draw simple rectangle in DrawRect method
    CGRect frame = CGRectMake(0+kRectangleOffset,
                              0+kRectangleOffset,
                              rect.size.width-kRectangleOffset*2,
                              rect.size.height-kRectangleOffset*2);

    UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: frame];
    [UIColor.grayColor setFill];
    [rectanglePath fill];

添加为 subview f.e:

- (void)viewDidLoad {
    [super viewDidLoad];

    BoxView *box = [[BoxView alloc] initWithFrame:CGRectMake(100, 100, 200, 80)];
    box.backgroundColor = [UIColor redColor]; // I specially set red color to see it's full surface...
    [self.view addSubview:box];
}

enter image description here

然后在矩形中心绘制简单的箭头

const CGFloat kArrowWidth = 10;

  // Draw Bezier arrow on top consists of 3 points 
    UIBezierPath* bezierPathTop = UIBezierPath.bezierPath;
    [bezierPathTop moveToPoint: CGPointMake(rect.size.width/2-kArrowWidth/2, kRectangleOffset)];
    [bezierPathTop addLineToPoint: CGPointMake(rect.size.width/2+kArrowWidth/2, kRectangleOffset)];
    [bezierPathTop addLineToPoint: CGPointMake(rect.size.width/2, 0)];
    [UIColor.blueColor setFill];
    [bezierPathTop fill];

enter image description here

最后是相同的箭头,但点位置不同

UIBezierPath* bezierPathLeft = UIBezierPath.bezierPath;
[bezierPathLeft moveToPoint: CGPointMake(kRectangleOffset, rect.size.height/2-kArrowWidth/2)];
[bezierPathLeft addLineToPoint: CGPointMake(kRectangleOffset, rect.size.height/2+kArrowWidth/2)];
[bezierPathLeft addLineToPoint: CGPointMake(0, rect.size.height/2)];
[UIColor.blueColor setFill];
[bezierPathLeft fill];

enter image description here

您只需要根据我们说的箭头方向枚举确定只绘制一个箭头。我希望您可以通过此示例走得更远

关于ios - 如何更改此 UIBezierPath 的箭头方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26982670/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap