Create an interactive body diagram using Swift (iOS)

Question

I am trying to recreate something for an iOS application (Swift), which I have already done in HTML5 (using map area-coords).

I want to show a diagram of the human body that interacts with clicks / touches of the user. The body exists, let them say 20 different parts, and the user can select one or more parts of the body. For each part of the body there is an image of the selected state, which should appear when choosing a part. Clicking on the selected part cancels the selection. After selecting one or more parts, the user can continue and get some information about these parts in the following viewcontroller. I am attaching a simplified image to explain my purpose.

- , ? , Swift ?

!

Answer 1

!

UIImageView,

var path = UIBezierPath()
path.moveToPoint(CGPointMake(20, 30))
path.addLineToPoint(CGPointMake(40, 30))

// add as many coordinates you need...

path.closePath()

var layer = CAShapeLayer()
layer.path = path.CGPath
layer.fillColor = UIColor(red: 255, green: 0, blue: 0, alpha: 0.5).CGColor
layer.hidden = true

bodyImage.layer.addSublayer(layer)

touchsbegan, , .

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {

    if let touch = touches.first! as? UITouch {
        // get tapped position
        let position = touch.locationInView(self.bodyImage)

        // loop all sublayers
        for layer in self.bodyImage.layer.sublayers! as! [CAShapeLayer] {

            // check if tapped position is inside shape-path
            if CGPathContainsPoint(layer.path, nil, position, false) {
                if (layer.hidden) {
                    layer.hidden = false
                }
                else {
                    layer.hidden = true
                }
            }
        }
    }
}

Answer 2

. UIView . ( CALayers, sketchyTech .)

. UIView (BodyView), BodyRegion, .

UIBezierPath containsPoint, , . BodyView , .

, , , .

Answer 3

- , IBAction , , .

@IBAction func shinTapped(sender: UIButton) {
    tappedCounter = 0
    if tappedCounter == 0 {
      // set property to keep track
      shinSelected = true
      // TODO: set button image to selected state
      // increment counter
      tappedCounter++
      }else{
      // set property to keep track
      shinSelected = false
      // TODO: set button image to nil
      // reset counter
      tappedCounter = 0
  }

, , , . , , .