-1

I've been doing tutorials on Bezier paths yet I have a question regarding cusomizability and buttons. From what I understand you need a rectangle frame for your buttons, but what I would like to achieve is arc shaped buttons like in this picture I made with Sketch. I'd like each arc section to be a button but obviously if each one is framed in a rectangle it'll not be possible...

How could I achieve that ? I managed to make an arc by following a Ray Wenderlich tutorial (here : https://www.raywenderlich.com/8003281-core-graphics-tutorial-getting-started) but I'd like to subdivide my arcs like in my picture and make all of these as separate buttons.

Thanks !

arc buttons

JulienM
  • 37
  • 1
  • 1
  • 11
  • The shape you're showing is a perfect example of "when not to use a Bezier curve", any reason you're not just using a circle, with a another circle cut out, and some rotated strips of white? Because this is an almost trivial shape for hit detection if you use normal simple primitives. (Check if the hit between r1 and r2 with respect to the center, if it is, get the angle using `atan2(dy,xy)` and see which segment that means you're in. Done) – Mike 'Pomax' Kamermans Aug 22 '20 at 20:02
  • @Mike'Pomax'Kamermans I'm quite new to Swift so the reason is simply that with my lack of experience I don't know yet the best way to tackle this. I'll try to find tuts about hit detection, (especially since each arc will be a different color and the hit one will be a tad larger), but if you have any advice about handling those primitive shapes you're talking about I'm all in for learning ! Thanks – JulienM Aug 23 '20 at 17:54
  • 1
    I'm not sure what else you need added to the tutorial you already link to. If you're drawing arcs based on angles wrt the center already, hit detection is the same: check where a touch happens as a polar coordinate wrt the center (for which you can use the `atan2` function, which is as universal as `sin` or `cos`) and if the angle is one for where you're colouring things red, and if the magnitude ("length") is between the inner and outer radius, a button got pressed. Remember to show your code, so people can comment in a way that builds on what you've already written. – Mike 'Pomax' Kamermans Aug 23 '20 at 18:17

2 Answers2

1

For each button, you override hitTest to check whether the tap location is inside the shape.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • 1
    Example code here: https://stackoverflow.com/questions/38294121/making-a-uibutton-with-shape-cashapelayer/38294339#38294339 – matt Aug 18 '20 at 23:37
1

I would use PureSwiftUI for things like this, it should be pretty easy to add the bezier paths for this. Here is a tutorial on the extension its pretty amazing what shapes you can create from this.

below is a tutorial on bezier paths using the PureSwiftUI extension

https://www.youtube.com/watch?v=KZtCMg7q2m8

Henry Hudson
  • 97
  • 6