title: How to clip UIBezierPath with another UIBezierPath in Swift?
body: <p>I am building a system of metaballs based on the third example in this blog post <a href="http://labs.byhook.com/2011/09/26/vector-metaballs/" rel="nofollow noreferrer">http://labs.byhook.com/2011/09/26/vector-metaballs/</a> in Swift. When I drag the middle metaball, it can the potential to overlap either the right or left metaball (which are stationary). I want to clip the stationary metaball with the 'target' metaball (the one being dragged around). Here's my simplified Metaball class</p>
  
  <pre><code>class Metaball: UIView {
      let circlePathLayer = CAShapeLayer()
  
      override init(frame: CGRect) {
          super.init(frame: frame)
          configure()
      }
  
      func configure() {
          circlePathLayer.frame = bounds
          circlePathLayer.lineWidth = 10
          circlePathLayer.strokeColor = UIColor.blueColor().CGColor
          layer.addSublayer(circlePathLayer)
      }
  
      func circleFrame() -&gt; CGRect {
          let circleFrame = CGRect(x: 0, y: 0, width: 2*circleRadius, height: 2*circleRadius)
          return circleFrame
      }
  
      func circlePath() -&gt; UIBezierPath {
          return UIBezierPath(ovalInRect: circleFrame())
      }
  
      override func layoutSubviews() {
          super.layoutSubviews()
          circlePathLayer.frame = bounds
          circlePathLayer.path = circlePath().CGPath
      }
  }
  </code></pre>
  
  <p>I'm trying to do the clipping method in my GameScene class in touchesEnded. Here's the touchesEnded method:</p>
  
  <pre><code>override func touchesEnded(touches: Set&lt;UITouch&gt;, withEvent event: UIEvent?) {
      touching = false
      let touch = touches.first
      let touchLocation = touch!.locationInView(self)
      target.center = touchLocation
      var distPoints = dist(leftMetaball.center, pos2: touchLocation)
      // if the distance between touchPoint and the center of the leftmetaball is less than the radius of a metaball x2 (200) they must be overlapping
      if distPoints &lt; 200 {
          // clip leftMetaball path here
      }
  }
  </code></pre>
  
  <p>This is what is looks like now when they are intersecting:
  <a href="https://i.stack.imgur.com/lUlAK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lUlAK.png" alt="enter image description here"></a></p>
  
  <p>I want the two intersecting circles to form a single odd shaped circle where one bezierpath clips the other to remove the intersecting line.</p>