9

我正在尝试为我已经用HTML5（使用）制作的 iOS 应用程序（Swift）重新创建一些东西。map area-coords

我想展示一个与用户点击/触摸交互的人体图。身体有 20 个不同的部位，用户可以选择一个或多个身体部位。For every body-part there is a selected-state image that should appear when a part is selected. 单击选定的部分将取消选择它。选择一个或多个零件后，用户可以继续，并将在下一个中获得有关这些零件的一些信息viewcontroller。我附上了一张简化的图片来解释我的目标。

身体部位选择

有人可以解释实现这一目标的最佳方法吗？在Swift中是否可以使用类似的技术来创建这样的交互式图像？

谢谢！

4

3 回答 3

0

没有用于检测不规则形状的水龙头的内置机制。标准的 UIView 点击检测使用框架矩形。（同样CALayers，正如 sketchyTech 在他上面的评论中所建议的那样。）

我建议将您的身体区域绘制为贝塞尔路径。您可以创建 UIView ( BodyView) 的自定义子类，该子类将管理 BodyRegion 对象数组，每个对象都包含一个贝塞尔路径。

该类UIBezierPath包含一个方法 containsPoint，可让您判断一个点是否在路径内。你BodyView可以让我们决定点击哪个路径对象。

Bezier 路径将处理绘制你的身体区域和确定哪个部分被轻拍。

于 2016-03-19T13:22:16.630 回答
0

实现这一点的一个非常简单的方法是在这些区域上放置不可见的按钮，然后将每个按钮连接到 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
  }

这在布局上可能有点棘手，因此每个按钮都位于正确的位置，但如果您使用大小类，它是完全可行的。我相信有一种更优雅的方式来做到这一点，但这是一种方式。

于 2016-03-19T13:46:03.890 回答
0

固定的！

首先，我像这样将子层添加到 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)

然后我重写了 touchesbegan 函数，以便在点击形状时显示和隐藏。

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
                }
            }
        }
    }
}
于 2016-03-23T08:19:25.663 回答