swift - 如何减小每个圆象限的大小以产生间隙

Question

下面是我的圆形象限的图像，后面是代码。我怎样才能减少每条弧线，比如每边 10 个点/像素，以便弧线之间有间隙？起初，我在每一侧都通过 CGFloat(Double.pi/36) 减少了它们，但左边并没有产生直线间隙，只是切掉了一部分，这不是我想要的。我需要每个圆弧都有直边(水平和垂直)而不是对角线。

class GameScene: SKScene, SKPhysicsContactDelegate {
    var topRightPathNode  : SKShapeNode!
    var bottomRightPathNode  : SKShapeNode!
    var bottomLeftPathNode  : SKShapeNode!
    var topLeftPathNode  : SKShapeNode!
    override init(size: CGSize) {
        super.init(size: size)
        // TOP RIGHT
        let topRightBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: CGFloat(Double.pi/2), endAngle: 0, clockwise: false)
        topRightPathNode = SKShapeNode(path: topRightBezierPath.cgPath)
        topRightPathNode.strokeColor = SKColor.white
        topRightPathNode.lineWidth = 18
        topRightPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
        addChild(topRightPathNode)
        // BOTTOM RIGHT
        let bottomRightBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: 0 , endAngle: 3*CGFloat(Double.pi/2), clockwise: false)
        bottomRightPathNode = SKShapeNode(path: bottomRightBezierPath.cgPath)
        bottomRightPathNode.strokeColor = SKColor.orange
        bottomRightPathNode.lineWidth = 18
        bottomRightPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
        addChild(bottomRightPathNode)
        // BOTTOM LEFT
        let bottomLeftBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: 3*CGFloat(Double.pi/2), endAngle: 2*CGFloat(Double.pi/2), clockwise: false)
        bottomLeftPathNode = SKShapeNode(path: bottomLeftBezierPath.cgPath)
        bottomLeftPathNode.strokeColor = SKColor.green
        bottomLeftPathNode.lineWidth = 18
        bottomLeftPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
        addChild(bottomLeftPathNode)
        // TOP LEFT
        let topLeftBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: 2*CGFloat(Double.pi/2), endAngle: CGFloat(Double.pi/2), clockwise: false)
        topLeftPathNode = SKShapeNode(path: topLeftBezierPath.cgPath)
        topLeftPathNode.strokeColor = SKColor.blue
        topLeftPathNode.lineWidth = 18
        topLeftPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
        addChild(topLeftPathNode)
    }
}

Answer 1

下面是一些代码，当粘贴到 iOS Playground 时会生成一张我认为与您的描述相符的图片。

为了让边在有间隙的地方与轴保持平行，你必须做一点数学来弄清楚点是什么。然后你要画出你想要的形状的轮廓，而不是依赖绘图系统添加的笔画宽度。如果您熟悉三角学，数学并不太复杂，但您的问题表明您可能没问题。

import UIKit
import SpriteKit
import PlaygroundSupport

let radius = CGFloat(100)

let sceneSize = CGSize(width: 640, height: 480)
let sceneView = SKView(frame: CGRect(origin: CGPoint.zero, size: sceneSize))

let scene = SKScene(size: sceneSize)
scene.backgroundColor = UIColor.black

let topRightPath = arcSegment(center: CGPoint.zero, radius: radius, strokeWidth: 18, gapWidth: 18)

let topRightPathNode = SKShapeNode(path: topRightPath)
topRightPathNode.fillColor = SKColor.white
topRightPathNode.lineWidth = 0
topRightPathNode.position = CGPoint(x: 320, y: 240)
scene.addChild(topRightPathNode)


var reflectOnY = CGAffineTransform(scaleX: 1.0, y: -1.0)
let bottomRightPath = topRightPath.copy(using: &reflectOnY)!
let bottomRightPathNode = SKShapeNode(path: bottomRightPath)
bottomRightPathNode.fillColor = SKColor.orange
bottomRightPathNode.lineWidth = 0
bottomRightPathNode.position = CGPoint(x: 320, y: 240)
scene.addChild(bottomRightPathNode)


var reflectOnX = CGAffineTransform(scaleX: -1.0, y: 1.0)
let bottomLeftPath = bottomRightPath.copy(using: &reflectOnX)!
let bottomLeftPathNode = SKShapeNode(path: bottomLeftPath)
bottomLeftPathNode.fillColor = SKColor.green
bottomLeftPathNode.lineWidth = 0
bottomLeftPathNode.position = CGPoint(x: 320, y: 240)
scene.addChild(bottomLeftPathNode)


let topLeftPath = bottomLeftPath.copy(using: &reflectOnY)!
let topLeftPathNode = SKShapeNode(path: topLeftPath)
topLeftPathNode.fillColor = SKColor.blue
topLeftPathNode.lineWidth = 0
topLeftPathNode.position = CGPoint(x: 320, y:240)
scene.addChild(topLeftPathNode)

sceneView.presentScene(scene)

PlaygroundPage.current.liveView = sceneView
PlaygroundPage.current.needsIndefiniteExecution = true

func arcSegment(center : CGPoint,
                radius: CGFloat,
                strokeWidth: CGFloat,
                gapWidth: CGFloat) -> CGPath
{
    let halfStrokeWidth = strokeWidth / 2.0
    let outerRadius = radius + halfStrokeWidth
    let innerRadius = radius - halfStrokeWidth
    let halfGap = gapWidth / 2.0

    let outerStartAngle = CGFloat(atan2(sqrt(outerRadius * outerRadius - halfGap * halfGap), halfGap))
    let outerEndAngle = CGFloat(atan2(halfGap, sqrt(outerRadius * outerRadius - halfGap * halfGap)))

    let innerStartAngle = CGFloat(atan2(halfGap, sqrt(innerRadius * innerRadius - halfGap * halfGap)))
    let innerEndAngle = CGFloat(atan2(sqrt(innerRadius * innerRadius - halfGap * halfGap), halfGap))

    let path = CGMutablePath()

    path.addArc(center: center, radius: outerRadius, startAngle: outerStartAngle, endAngle: outerEndAngle, clockwise: true)
    // Quartz 2D will assume a "moveTo" here
    path.addArc(center: center, radius: innerRadius, startAngle: innerStartAngle, endAngle: innerEndAngle, clockwise: false)
    path.closeSubpath()


    return path
}