为什么 CGPath 和 UIBezierPath 定义“顺时针"?在 SpriteKit 中有何不同? [英] Why CGPath and UIBezierPath define "clockwise" differently in SpriteKit?

问题描述

在 SpriteKit 中，UIBezierPath 的 顺时针 方向是相反的，但 CGPath 不是.例如，如果我有

做{让路径 = CGPathCreateMutable()CGPathAddArc(path, nil, 0, 0, 10, 0, CGFloat(M_PI_2), true)让节点 = SKShapeNode(路径:路径)node.position = CGPoint(x: self.size.width/2, y: self.size.height/2)self.addChild(节点)}做 {让路径 = UIBezierPath()path.addArcWithCenter(CGPoint(x: 0, y: 0), radius: 10, startAngle: 0, endAngle: CGFloat(M_PI_2), 顺时针: true)让节点 = SKShapeNode(path: path.CGPath)node.position = CGPoint(x: self.size.width/2, y: self.size.height/2 - 100)self.addChild(节点)}

在GameScene.didMoveToView(view: SKView)中，第一个节点绘制了一个3/4圆弧，右上角缺失，但第二个节点在右上角绘制了一个四分之一圆弧.UIBezierPath 中的反向顺时针"方向解释

以左下角为原点，圆的顶部为 90º，并绘制顺时针CGPath 弧，如下所示.由于 SpriteKit 的原点也在左下角，因此形状节点弧出现在相同的方向.

In SpriteKit, the clockwise direction is reversed for UIBezierPath but not for CGPath. For example, if I have

do {
    let path = CGPathCreateMutable()
    CGPathAddArc(path, nil, 0, 0, 10, 0, CGFloat(M_PI_2), true)
    let node = SKShapeNode(path: path)
    node.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
    self.addChild(node)
}
do {
    let path = UIBezierPath()
    path.addArcWithCenter(CGPoint(x: 0, y: 0), radius: 10, startAngle: 0, endAngle: CGFloat(M_PI_2), clockwise: true)
    let node = SKShapeNode(path: path.CGPath)
    node.position = CGPoint(x: self.size.width/2, y: self.size.height/2 - 100)
    self.addChild(node)
}

in GameScene.didMoveToView(view: SKView), the first node draws a 3/4 arc with top-right missing, but the second node draws a quarter arc at top-right. The reversed "clockwise" direction in UIBezierPath is explained in this post, but why doesn't CGPath behave the same? Isn't UIBezierPath just a wrapper around CGPath?

Note: This happens to both Objective-C and Swift (so not language-specific). Did not try on Mac App with NSBezierPath.

解决方案

CGPath and UIBezierPath use different coordinate systems. UIBezierPath's origin is at the top-left corner of the drawing area and CGPath's origin in at the bottom-left. Consequently, 90º is the lowest point on the circle for UIBezierPath and the highest point for CGPath. Since 0º is at the same point (right-most point) on the circle for both paths, the resulting clockwise arcs from 0º to 90º are drawn differently.

With the origin at the top-left, 90º (π/2) is at the lowest point on the circle and, therefore, a clockwise UIBezierPath arc is drawn as shown in the figure below. Since SpriteKit's origin is at the bottom-left, this arc appears flipped (vertically) when used to create the SKShapeNode.

With the origin at the bottom-left, 90º is at the top of the circle and a clockwise CGPath arc is drawn as shown below. Since SpriteKit's origin is also at the bottom-left, the shape node arc appears in the same orientation.

这篇关于为什么 CGPath 和 UIBezierPath 定义“顺时针"?在 SpriteKit 中有何不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！