Ios 在创建的路径顶部添加形状

具有使用以下代码绘制自定义形状的代码：

struct ProgressPath: Shape {
    var numberOfPoints: Int = 2

    var animatableData: CGFloat {
        get { CGFloat(numberOfPoints) }
        set { numberOfPoints = Int(newValue) }
    }

    var sectionsByItems: [IndexPath] {
        var result: [IndexPath] = []
        for index in 0..<numberOfPoints {
            guard let lastItem = result.last?.row else {
                result.append(IndexPath(item: 0,
                                        section: 0))
                continue
            }

            let currentSection = Int(index / 2)

            if index % 2 == 0 {
                result.append(IndexPath(item: lastItem,
                                        section: currentSection))
            } else {
                result.append(IndexPath(item: lastItem == 1 ? 0 : 1,
                                        section: currentSection))
            }
        }

        return result
    }

    func point(indexPath: IndexPath,
               rect: CGRect)-> CGPoint {
        let distance = rect.width - 40
        return CGPoint(x: indexPath.row == 0 ? distance : 40,
                       y: (rect.height - 20) - 50 * (CGFloat(indexPath.section)))
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()

        sectionsByItems
            .forEach { indexPath in
                let newPoint = point(indexPath: indexPath,
                                     rect: rect)

                if indexPath.section == 0 &&
                    indexPath.row == 0 {
                    path.move(to: newPoint)
                } else {
                    path.addLine(to: newPoint)
                }
            }

        return path
    }
}

struct ProgressPath:Shape{
变量numberOfPoints:Int=2
var animatableData:CGFloat{
获取{CGFloat（numberOfPoints）}
集合{numberOfPoints=Int（newValue）}
}
var sectionsByItems:[IndexPath]{
变量结果：[IndexPath]=[]
对于0..CGPoint中的索引{
让距离=矩形宽度-40
返回CGPoint（x:indexPath.row==0？距离：40，
y：（rect.height-20）-50*（CGFloat（indexPath.section）））
}
func路径（在rect:CGRect中）->path{
var path=path（）
第二节项目
.forEach{indepath in
设newPoint=point（indepath:indepath，
rect:rect）
如果indexath.section==0&&
indexath.row==0{
移动路径（到：newPoint）
}否则{
path.addLine（到：newPoint）
}
}
返回路径
}
}

如下所示：

我想在创建的路径顶部添加形状，理想情况下，我想有一些机制，看起来应该像这样，路径顶部的圆是可交互的：

几乎不知道如何在不修改原始路径的情况下实现这一点，也许有一种更优雅的解决方案可以在自定义路径上绘制形状

类似问题-

---

注意：虽然这是上面提供的自定义路径的一个特定问题，但我正试图想出一种方法，通过遵循路径在任何形状上绘制自定义形状，并使其可交互。

简单地说，例如，点是一个imageView

让我们分而治之吧

在创建的路径顶部添加形状

关键点是点的中心

如果你得到了圆点的中心，你就知道它们的边框大小相同

一旦你知道了它们的结构，就把点放在路径上

struct ProgressPath: Shape {

    func centers(in rect: CGRect) -> [CGPoint] {
        var ctrs = [CGPoint]()

        sectionsByItems
            .forEach { indexPath in
                let newPoint = point(indexPath: indexPath,
                                     rect: rect)

                ctrs.append(newPoint)
            }

        return ctrs
    }
}

---

在创建的路径顶部添加形状

使用上面的helper方法

你可以很容易地得到两条路径，原始路径和点路径

冷静一下，你会得到的

在不修改原始路径的情况下如何实现这一点几乎没有损失

在您给出的示例中，答案非常简单，因为您已经拥有了所需的所有数据。您正在从一组点创建路径，这些点也是圆的位置，因此您只需保存这些位置。一种方法是将生成点的代码移到

ProgressP的定义之外ath

，并修改

ProgressPath

，使其只接受任何点数组。然后您可以生成一次数组，使用它创建一个

ProgressPath

，然后使用相同的数组创建您的点

路径顶部的圆圈是可交互的

现在还不清楚你想要的是什么样的交互。如果你只想单击/点击圆圈，比如说，进入相应的游戏级别，你需要创建一个新的视图类型，它可以绘制圆圈，还可以存储完成交互所需的数据或动作。例如，你可以创建一个

struct LevelButton

将自身绘制为一个圆，并包含一个级别ID。如果您希望能够使用类似于手柄的圆来拖动路径的一部分，或者沿着路径滑动圆，就像字符串上的珠子一样，事情会变得比我认为我们需要在这里讨论的更复杂

也许有一种更优雅的解决方案可以在自定义路径上绘制形状

<> >代码>路径包含<代码> CGPath <代码>，其中包含路径元素列表，因此可以编写代码来遍历片段列表并提取需要定位圆圈的点。然而，有几种不同类型的路径片段需要考虑一般解决方案：不只是直行ne段，但也有曲线和移动。有关完整列表，请参阅。CGPath还提供了一些函数，允许您将自己的函数应用于每个元素，这样您就可以编写一个函数，为每个元素类型收集适当的点，从而得到一个点列表，您可以使用这些点来定位圆