使用UIBezierPath创建带圆弧的圆（包含图像）

Question

我正在使用SpriteKit并尝试使用arc实现以下效果

我创建了三个SKShapeNodes并将UIBezierPath's CGPath属性分配给SKShapeNode's路径属性。 这是我的代码：

func createCircle(){

    //container contains the SKShapeNodes
    self.container = SKShapeNode()
    self.container.position = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)

    //creating UIBezierPaths

    let arc = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI/2) , clockwise: false)
    arc.flatness = 100
    self.red = SKShapeNode()
    self.red.lineWidth = 20
    self.red.strokeColor = SKColor.redColor()
    self.red.path = arc.CGPath


    let arc1 = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: CGFloat(M_PI/2), endAngle: CGFloat(0.0), clockwise: false)
    self.blue = SKShapeNode()
    self.blue.strokeColor = SKColor.whiteColor()
    self.blue.lineWidth = 20
    self.blue.path = arc1.CGPath


    let arc2 = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: 0.1, endAngle: CGFloat(3*M_PI/2), clockwise: false)
    self.yellow = SKShapeNode()
    self.yellow.strokeColor = SKColor.yellowColor()
    self.yellow.lineWidth = 20
    self.yellow.path = arc2.CGPath


    //adding arcs to the container
    self.container.addChild(red)
    self.container.addChild(yellow)
    self.container.addChild(blue)


    //adding container to the GameScene
    self.addChild(container)
   }

在尝试startAngle和endAngle后，我能够做到这一点：

代码输出形状与我想要创建的圆形不同。如何获得所需效果图像中的间隙？

Answer 1

使用this图片作为参考，我能够对startAngle endAngle方法的UIBezierPath和@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ var home = CurrentPage.Site(); } @if (home.Children.Any()) { @* Get the first page in the children *@ var naviLevel = home.Children.First().Level; @* Add in level for a CSS hook *@ <div class="linje"></div> <ul class="meny level-@naviLevel"> @* For each child page under the home node *@ @foreach (var childPage in home.Children) { if (childPage.Children.Any()) { <li class="dropdown has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)"> @if (childPage.DocumentTypeAlias == "Huvudmeny") { <span>@childPage.Name</span> @childPages(childPage.Children) } else { <a href="@childPage.Url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">@childPage.Name</a> } @helper childPages(dynamic pages) { @* Ensure that we have a collection of pages *@ if (pages.Any()) { @* Get the first page in pages and get the level *@ var naviLevel = pages.First().Level; @* Add in level for a CSS hook *@ <ul class="meny dropdown-menu sublevel level-@(naviLevel)"> @foreach (var page in pages) { <li> <a href="@page.Url">@page.Name</a> @* if the current page has any children *@ @if (page.Children.Any()) { @* Call our helper to display the children *@ @childPages(page.Children) } </li> } </ul> } } </li> } else { <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)"> <a href="@childPage.Url">@childPage.Name</a> </li> } } </ul> <div class="linje col-md-12" ></div> } 进行更改 Result Image