CODEWITHSUNDEEP
iosswiftsprite-kituibezierpathskshapenode
Gerald
Gerald

Reputation: 597

circle from UIBezierPath drawn in wrong direction in SKShapeNode

Following UIBezierPath reference, I tried drawing a dashed path which should end up as dashed arc. However the drawing direction is wrong. clockwise was set to true but the top half of the circle was drawn as opposed to what was mentioned in the apple's page

let arcForCompleted =
        UIBezierPath(arcCenter: origin, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI), clockwise: true)
let pattern = getPattern(self.circumference, segments: involved)
let dashedPathForCompleted = CGPathCreateCopyByDashingPath(arcForCompleted.CGPath, nil, 0, pattern, pattern.count)
let dashedCircleForCompleted = SKShapeNode(path: dashedPathForCompleted!)

I am guessing this is because UIKit and SpriteKit has different coordinate system.

Upvotes: 2

Views: 409

Answers (1)

beyowulf
beyowulf

Reputation: 15331

UIBezierPath is written with UIKit in mind thus it uses the UIKit coordinate system, (0,0) is in the upper left with positive y values running down. For the SKNode it has different coordinate system, (0,0) is in the center with positive y running up. You should keep that in mind when drawing arcs as it will affect the clockwise parameter. You can find a discussion of SKNode coordinate system here.

You can paste this code in a playground to see the difference as well

let bezierPath = UIBezierPath(arcCenter: CGPoint(x: 50.0,y: 50.0), radius: 50, startAngle: 0, endAngle: CGFloat(M_PI), clockwise: true)
class ArcView:UIView
{
    override func drawRect(rect: CGRect) {
        let arcForCompleted = bezierPath
        let pattern:[CGFloat] = [10.0,10.0]
        arcForCompleted.setLineDash(pattern, count: 2, phase: 0.0)
        arcForCompleted.stroke()
    }
}
let arcView = ArcView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))
arcView.backgroundColor = UIColor.whiteColor()

let arcForCompleted = bezierPath
let shape = SKShapeNode()
shape.path = arcForCompleted.CGPath

Upvotes: 4

Related Questions