Understand moveToPoint and addLineToPoint methods

Question

My main purpose is of creating a line which has origin point at center of other UIBezierPath which is ROUND in look.

let startAngle = CGFloat(-M_PI_2)
    let endAngle = CGFloat(M_PI + M_PI_2)

    println("Start Angle \(startAngle) , End Angle \(endAngle)")

    let centerPoint = CGPointMake(CGRectGetWidth(frame)/2 , CGRectGetHeight(frame)/2)

    self.staticLayer.path = UIBezierPath(arcCenter:centerPoint, radius: CGRectGetWidth(frame)/2 - 30.0, startAngle:startAngle, endAngle:endAngle, clockwise: true).CGPath

    self.staticLayer.fillColor = UIColor.clearColor().CGColor
    self.staticLayer.shouldRasterize = false

    self.staticLayer.strokeColor = UIColor.redColor().CGColor

    self.staticLayer.lineWidth = 08
    self.staticLayer.borderColor = UIColor.greenColor().CGColor
    self.staticLayer.borderWidth = 5.0

    layer.addSublayer(self.staticLayer)

After this static layer, I want to add a line (same as seconds in clock)

I made it

  var bezierPath: UIBezierPath = UIBezierPath()
    bezierPath.moveToPoint(CGPoint(x: self.staticLayer.position.x/2, y: self.staticLayer.position.y/2))
    bezierPath.addLineToPoint(CGPoint(x: 50, y: 10))


    self.lineLayer.path = bezierPath.CGPath

    self.lineLayer.fillColor = UIColor.clearColor().CGColor
    self.lineLayer.borderColor = UIColor.clearColor().CGColor
    self.lineLayer.strokeColor = UIColor.redColor().CGColor

    self.lineLayer.shouldRasterize = false
    self.lineLayer.lineWidth = 3.0
    self.lineLayer.lineJoin = kCALineJoinBevel

    layer.addSublayer(self.lineLayer)

Now, I am unable to understand exact passing points of moveToPoint and addLineToPoint.

I want to start this from center of other layer, which is static and round in shape.

Can any one explain me, how can I control starting point and length of line?

Thanks

Answer 1

From the docs :

moveToPoint:

This method implicitly ends the current subpath (if any) and sets the current point to the value in the point parameter. When ending the previous subpath, this method does not actually close the subpath. Therefore, the first and last points of the previous subpath are not connected to each other.

For many path operations, you must call this method before issuing any commands that cause a line or curve segment to be drawn.

This means : take the "pen" up, and move it without drawing to a specified point. This point will be a starting point for next drawing operation.

addLineToPoint:

This method creates a straight line segment starting at the current point and ending at the point specified by the point parameter. After adding the line segment, this method updates the current point to the value in point.

You must set the path’s current point (using the moveToPoint: method or through the previous creation of a line or curve segment) before you call this method. If the path is empty, this method does nothing.

This will "draw" a line, from current point to a specified point. The end of line will become the new starting point.

---

It seems that your positioning problem is in this line :

bezierPath.moveToPoint(CGPoint(x: self.staticLayer.position.x/2, y: self.staticLayer.position.y/2))

The position of a layer are the coordinates of its top-left corner in parent space. So if you specify the starting point like that, you are actually starting somewhere "outside" of it. Also the points are specfied in "this" layers coordinates, so the center point should be (width / 2, height / 2) of the layer to which you will be applying your bezier path.