SKShapeNode显示的效果和CAShapelayer不一样

Question

我准备用SKShapeNode显示一个Bezier曲线图，但是显示的效果很奇怪，和CAShapeLayer显示的不一样。我不知道出了什么问题。有人知道这个问题吗？

这是我用两种不同方式展示的效果截图。

The effect displayed by CAShapeLayer looks normal and is as expected

the effect displayed by SKShapeNode misses some lines

这是我的主要代码：

let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 54.5, y: 244.5))
bezierPath.addCurve(to: CGPoint(x: 54.5, y: 164.5), controlPoint1: CGPoint(x: 53.5, y: 243.5), controlPoint2: CGPoint(x: 29.5, y: 201.5))
bezierPath.addCurve(to: CGPoint(x: 54.5, y: 70.5), controlPoint1: CGPoint(x: 79.5, y: 127.5), controlPoint2: CGPoint(x: 54.5, y: 70.5))
bezierPath.addLine(to: CGPoint(x: 227.5, y: 70.5))
bezierPath.addCurve(to: CGPoint(x: 227.5, y: 164.5), controlPoint1: CGPoint(x: 227.5, y: 70.5), controlPoint2: CGPoint(x: 254.5, y: 127.5))
bezierPath.addCurve(to: CGPoint(x: 227.5, y: 244.5), controlPoint1: CGPoint(x: 200.5, y: 201.5), controlPoint2: CGPoint(x: 227.5, y: 244.5))
bezierPath.addCurve(to: CGPoint(x: 54.5, y: 244.5), controlPoint1: CGPoint(x: 227.5, y: 244.5), controlPoint2: CGPoint(x: 55.5, y: 245.5))
bezierPath.close()


let scene = SKScene.init(size: CGSize.init(width: 300, height: 300))
scene.backgroundColor = UIColor.white
self.contentView.presentScene(scene)

let node = SKShapeNode.init()
node.path = bezierPath.cgPath
node.lineJoin = .miter
node.lineCap = .round
node.miterLimit = 10
node.strokeColor = SKColor.blue
node.fillColor = SKColor.red
node.lineWidth = 10
node.isAntialiased = true
scene.addChild(node)

Answer 1

此代码应该适合您——以顺时针方向添加路径元素

let N:CGFloat = 300 //box size
let C:CGFloat = 20 //control offset

let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 0, y: 0))
bezierPath.addCurve(to: CGPoint(x:0, y:N*0.5),
                    controlPoint1: CGPoint(x:C, y:N*0.15),
                    controlPoint2: CGPoint(x:C, y:N*0.35))
bezierPath.addCurve(to: CGPoint(x:0, y:N),
                    controlPoint1: CGPoint(x:-C, y:N*0.65),
                    controlPoint2: CGPoint(x:-C, y:N*0.85))
bezierPath.addLine(to: CGPoint(x:N, y:N))
bezierPath.addCurve(to: CGPoint(x:N, y:N*0.5),
                    controlPoint1: CGPoint(x:N-C, y:N*0.85),
                    controlPoint2: CGPoint(x:N-C, y:N*0.65))
bezierPath.addCurve(to: CGPoint(x:N, y:0),
                    controlPoint1: CGPoint(x:N+C, y:N*0.35),
                    controlPoint2: CGPoint(x:N+C, y:N*0.15))
bezierPath.close()

SKShapeNode显示的效果和CAShapelayer不一样

The effect displayed by SKShapeNode is different from that of CAShapelayer

cashapelayer

ios

uibezierpath

sprite-kit

skshapenode