はスウィフト（iOS版）

Question

でクリック可能なボディ図を作成し、私はすでにHTML5（maparea-coordsを使用して）で行われたiOSアプリ（スウィフト）のために何かを再作成しようとしています。

私は、ユーザーのクリック/タッチと相互作用する人体図を表示したいと考えています。ボディは20種類のパーツを持ち、1つまたは複数のボディパーツを選択できます。ボディーパーツごとに、選択されたときに表示される選択状態の画像があります。選択したパーツをクリックすると選択が解除されます。 1つまたは複数のパーツを選択した後、ユーザーは続行して、次のviewcontrollerにこれらのパーツに関する情報を得ることができます。私は私の目標を説明するために単純なイメージをつけています。

誰かが最善の方法は、この目標を達成するためには何か説明できますか？このようなインタラクティブな画像を作成するには、Swiftで使用できる同等のテクニックがありますか？

ありがとうございます！

Answer 1

固定！

まず、私が表示さや形状がタップされたときに隠すためにtouchesbegan機能をオーバーライドたより私はこの

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) 

ようにUIImageViewにサブレイヤを追加しました。

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で提案されているように）

私はあなたのボディ領域をベジェパスとして描画することをお勧めします。ベジェパスを含むBodyRegionオブジェクトの配列を管理するUIView（BodyView）のカスタムサブクラスを作成できます。

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 
    } 

すべてのボタンが右の場所に座っていますが、サイズクラスで作業している場合、それは完全になんとかなるようこれは、レイアウトに少しトリッキーかもしれません。 私はそれを行うよりエレガントな方法があると確信していますが、これは一つの方法です。