SKSpriteNode 框架偏离
SKSpriteNode frame way off
我正在尝试从 UIBezierPath 创建一个空心圆并将其转换为 SKShapeNode,稍后将转换为 SKSpriteNode。
我遇到了一个问题,我不知道如何在 Sprite 的线宽没有按比例缩小的情况下缩小它。你可以在这里看到解决方案:
我最终修复了一些问题并创建了一个新的 class 来实现具有此功能的自定义 SKShapeNode:
class ShrinkableShape: SKShapeNode {
let level: Int
let bezierPath: UIBezierPath
let scale: CGFloat
let finalLineWidth: CGFloat
let from: SKSpriteNode
let initialLineWidth = CGFloat(20)
let duration = 0.3
// level would be from 1 to 5 (it is in a for loop)
init(level: Int, from: SKSpriteNode) {
self.level = level
self.from = from
// create the open circle which is (43 * level) + 140
bezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: CGFloat(((43 * level) + 140)), startAngle: CGFloat(GLKMathDegreesToRadians(-50)), endAngle: CGFloat(M_PI * 2), clockwise: false)
// calls static function in this class so it is more readable
scale = ShrinkableShape.scaleFrom(level: level) / ShrinkableShape.scaleFrom(level: level + 1)
finalLineWidth = (initialLineWidth / scale)
// inits shape and then sets it up to specific values
super.init()
setup()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setup() {
// set sprite to path, set color, set line width and rotate it
self.path = bezierPath.cgPath
self.strokeColor = UIColor(red:0.98, green:0.99, blue:0.99, alpha:1.00)
self.lineWidth = 20
self.position = from.position
// FOR DEBUG: you will see what this makes in the screenshot
let color = SKShapeNode(rect: self.frame)
color.fillColor = UIColor.red
color.alpha = 0.2
color.position = self.position
self.addChild(color)
}
// Makes the radius from the value given (only 1...5) 183, 226, 269, etc
static func scaleFrom(level: Int) -> CGFloat {
return (CGFloat((level * 43) + 140) * 2.0)
}
}
如果您查看屏幕截图,您会注意到白色圆圈与其应对齐的位置相比有点偏离(灰色条和白色圆圈路径应该彼此对齐)。只有当我调用解决方案中显示的比例函数(上面链接)时才会发生这种情况。
我想是因为画框乱了。如果您看到,框架非常偏离(同样的问题是过去转换为纹理时出现问题的原因,因为框架不准确)
为什么会这样?我如何解决它?有没有办法让我手动为 SKShapeNode 设置正确的框架?关于如何执行此操作还有其他想法吗?
--编辑--
我忘了提。图中红色部分是调试查看SKShapeNode的框架。您可以在 setup() 函数中看到它是如何创建的。但我把它包括在内以显示框架有多远。
我认为你的部分问题是你的线条位置与位图边缘位置之间的差异,因为你有 'around' 这些线条的 stroke/outline 宽度。
也许最直观的描述是,红色是系统认为的精灵大小,而黄色可能是您正在考虑的大小。我大大夸大了线宽以显示我正在考虑的effect/problem。
我正在尝试从 UIBezierPath 创建一个空心圆并将其转换为 SKShapeNode,稍后将转换为 SKSpriteNode。
我遇到了一个问题,我不知道如何在 Sprite 的线宽没有按比例缩小的情况下缩小它。你可以在这里看到解决方案:
我最终修复了一些问题并创建了一个新的 class 来实现具有此功能的自定义 SKShapeNode:
class ShrinkableShape: SKShapeNode {
let level: Int
let bezierPath: UIBezierPath
let scale: CGFloat
let finalLineWidth: CGFloat
let from: SKSpriteNode
let initialLineWidth = CGFloat(20)
let duration = 0.3
// level would be from 1 to 5 (it is in a for loop)
init(level: Int, from: SKSpriteNode) {
self.level = level
self.from = from
// create the open circle which is (43 * level) + 140
bezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: CGFloat(((43 * level) + 140)), startAngle: CGFloat(GLKMathDegreesToRadians(-50)), endAngle: CGFloat(M_PI * 2), clockwise: false)
// calls static function in this class so it is more readable
scale = ShrinkableShape.scaleFrom(level: level) / ShrinkableShape.scaleFrom(level: level + 1)
finalLineWidth = (initialLineWidth / scale)
// inits shape and then sets it up to specific values
super.init()
setup()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setup() {
// set sprite to path, set color, set line width and rotate it
self.path = bezierPath.cgPath
self.strokeColor = UIColor(red:0.98, green:0.99, blue:0.99, alpha:1.00)
self.lineWidth = 20
self.position = from.position
// FOR DEBUG: you will see what this makes in the screenshot
let color = SKShapeNode(rect: self.frame)
color.fillColor = UIColor.red
color.alpha = 0.2
color.position = self.position
self.addChild(color)
}
// Makes the radius from the value given (only 1...5) 183, 226, 269, etc
static func scaleFrom(level: Int) -> CGFloat {
return (CGFloat((level * 43) + 140) * 2.0)
}
}
我想是因为画框乱了。如果您看到,框架非常偏离(同样的问题是过去转换为纹理时出现问题的原因,因为框架不准确)
为什么会这样?我如何解决它?有没有办法让我手动为 SKShapeNode 设置正确的框架?关于如何执行此操作还有其他想法吗?
--编辑-- 我忘了提。图中红色部分是调试查看SKShapeNode的框架。您可以在 setup() 函数中看到它是如何创建的。但我把它包括在内以显示框架有多远。
我认为你的部分问题是你的线条位置与位图边缘位置之间的差异,因为你有 'around' 这些线条的 stroke/outline 宽度。
也许最直观的描述是,红色是系统认为的精灵大小,而黄色可能是您正在考虑的大小。我大大夸大了线宽以显示我正在考虑的effect/problem。