title: Merge two UIBezierPath points
body: <p>I want to be able to select some area from this image, and change the color of the selected area.</p>
  
  <p><img src="https://i.stack.imgur.com/gd7kU.png" alt="enter image description here"></p>
  
  <p>To do this, I thought of using <code>CALayer</code> and <code>UIBezierPath</code>.</p>
  
  <ul>
  <li>I've cleared the colored area from the image, then I took each area point and drew a <code>UIBezierPath</code> beneath the image. </li>
  <li>I have 3 <code>CALayer</code>s for each area, each <code>CALayer</code> has a <code>UIBezierPath</code> with predefined points.</li>
  </ul>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/vQo1g.png" alt="enter image description here"></p>
  
  <p>When the user clicks on a layer, it will show the selected layer without filling the <code>UIBezierPath</code>, just to have a border around the <code>UIBezierPath</code>, the result look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/GWoJa.png" alt="enter image description here"></p>
  
  <ul>
  <li>I added a <code>UIView</code> over the image with <code>Opacity = 0.6f</code> and
  redrew all the <code>CALayer</code>s on it.</li>
  <li>All the layers are hidden in the new <code>UIView</code></li>
  </ul>
  
  <hr>
  
  <p>Every thing is working great, the next step is to merge the selected areas:</p>
  
  <ul>
  <li>I took the points from the first area and added it to the points of
  the second area</li>
  <li>I created a new <code>UIBezierPath</code> with the new points</li>
  </ul>
  
  <h2>My problem is that the result is wrong:</h2>
  
  <p><img src="https://i.stack.imgur.com/YXmcn.png" alt="enter image description here"></p>
  
  <hr>
  
  <ol>
  <li><strong>How to merge a <code>UIBezierPath</code> with a correct points order?</strong></li>
  <li><strong>Is there a better way to accomplish something like this without
  using <code>UIBezierPath</code>?</strong></li>
  </ol>