ios - SCNShape 不为 NSBezierPath 绘制形状

Question

我遇到过对于某些 NSBezierPath 的 SCNShape 似乎无法绘制形状。

路径仅使用 line(to:) 创建。

//...set up scene...

//Create path (working)
let path = NSBezierPath()
path.move(to: CGPoint.zero)
path.line(to: NSMakePoint(0.000000, 0.000000))
path.line(to: NSMakePoint(0.011681, 0.029526))
// more points ...
path.close()

// Make a 3D shape (not working)
let shape = SCNShape(path: path, extrusionDepth: 10)
shape.firstMaterial?.diffuse.contents = NSColor.green
let node = SCNNode(geometry: shape)
root.addChildNode(node)

为了验证创建SCNShape 的一般过程是否正确，我还画了一个蓝色形状，只是点不同而已。绘制蓝色形状，不绘制绿色形状。

您可以找到包含完整示例的 Playground here .在示例中，您应该能够在助理编辑器中看到一个绿色和一个蓝色的形状。但只有蓝色形状被绘制出来。

你知道为什么没有显示绿色形状吗？

Answer 1

简短的故事:你的路径有比它需要的更多的点，导致你遇到意想不到的、难以发现的几何问题。

注意 documentation 中的这一点:

The result of extruding a self-intersecting path is undefined.

事实证明，在前 8 个点左右的某处，您的“曲线”以错误的方式转弯，以至于关闭路径的线(在路径的第一个点之间 0,0，最后一点 32.366829, 29.713470) 与路径的其余部分相交。这是通过排除 Playground 渲染中除了前几个点和最后一个点之外的所有点(请参见左下角的小锯齿形)使其可见的尝试:

至少在某些 SceneKit 版本/渲染器上，当它尝试从自相交路径创建网格时，它只会放弃，什么也不会做。

但是，您真的不需要那么多点来让您的路径看起来不错。这是如果您使用 1 倍、1/5 倍和 1/10 倍的点:

如果您从整体上排除了足够多的点，和/或跳过了开头的几个使曲线在应该锯齿形的地方锯齿形的点，SceneKit 会很好地渲染形状:

---

诊断问题的一些技巧:

当像这样处理大量坐标数据时，我喜欢使用 ExpressibleByArrayLiteral 这样我就可以轻松地构建一个包含大量点/向量/等的数组:

extension CGPoint: ExpressibleByArrayLiteral {
    public init(arrayLiteral elements: CGFloat...) {
        precondition(elements.count == 2)
        self.init(x: elements.first!, y: elements.last!)
    }
}

var points: [CGPoint] = [
    [0.000000, 0.000000],
    [0.011681, 0.029526],
    // ...
]

这让我得到了一个数组(并且一遍又一遍地输入诸如 NSPointMake 之类的东西少了很多)，所以我可以对数据进行切片和切 block 以找出它的问题所在。 (例如，我早期的一个理论是负坐标可能有一些东西，所以我做了一些 map 和 min() 来找到最负的 X 和Y 值，然后再添加一些 map 以创建一个数组，其中所有点都偏移一个常数。)

现在，为了使用点数组创建路径，我对 NSBezierPath 进行了扩展:

extension NSBezierPath {
    convenience init(linesBetween points: [CGPoint], stride: Int = 1)  {
        precondition(points.count > 1)
        self.init()
        move(to: points.first! )
        for i in Swift.stride(from: 1, to: points.count, by: stride) {
            line(to: points[i])
        }
    }
}

有了这个，我不仅可以轻松地从整个点阵列创建路径，还可以...

• 跳过原始数组部分的路径(使用 stride 参数)

  let path5 = NSBezierPath(linesBetween: points, stride: 5)
  let path10 = NSBezierPath(linesBetween: points, stride: 10)
  

  (这对于更快地生成 playground 预览也很方便。)

• 使用原始数组的一些 block 或切片的路径

  let zigzag = NSBezierPath(linesBetween: Array(points.prefix(to:10)) + [points.last!])
  let lopOffBothEnds = NSBezierPath(linesBetween: Array(points[1 ..< points.count < 1]))
  

或两者兼而有之...获奖作品(在上面的屏幕截图中)是:

let path = NSBezierPath(linesBetween: Array(points.suffix(from: 10)), stride: 5)

如果路径中有更多点，您可以获得(略微)更好的渲染效果，但更好的方法是用曲线而不是直线制作路径。对于额外的功劳，请尝试扩展上面的 NSBezierPath(linesBetween:) 初始化程序，通过将每个 n 点都保留为路径的一部分来添加曲线，同时使用几个中间点作为控制 handle 。 (这不是通用的自动跟踪算法，但对于这种情况可能已经足够好了。)