有没有办法根据图像形状创建精确的点击区域？

Question

我正在尝试创建一个交互式 U.S。地图，但要使其发挥作用，每个州的受灾区域都需要根据其形状精确计算。否则，用户将触发其他邻国。

附上代码。我已经尽我所能进行了搜索，但一无所获。任何的意见都将会有帮助。谢谢。

结构图图形：查看{

@State private var stateColor:Color = .white

var body: some View {

    ZStack {

        Image("California")
        .resizable()
        .scaledToFit()
        .colorMultiply(Color("lGrey"))
        .frame(width: 50.45, height: 87.41)

        .onTapGesture {

        switch self.stateColor {
        case .white:
            self.stateColor = .blue
        case .blue:
            self.stateColor = .red
        default:
            self.stateColor = .white
        }

        }.colorMultiply(stateColor)

    }

}

}

Answer 1

你需要两件事：

1) 在图像的矩形中构建路径（逐点）

extension Path : Shape {

    /// Describes this shape as a path within a rectangular frame of reference.
    ///
    /// - Parameter rect: The frame of reference for describing this shape.
    /// - Returns: A path that describes this shape.
    public func path(in _: CGRect) -> Path

2) 将该路径（形状）设置为图像的命中测试区域

/// Returns a new view that defines the content shape for
/// hit-testing `self` as `shape`. `eoFill` defines whether the
/// shape is interpreted using the even-odd winding number rule or
/// not.
@inlinable public func contentShape<S>(_ shape: S, eoFill: Bool = false) -> some View where S : Shape

有没有办法根据图像形状创建精确的点击区域？

Is there a way to create a precise tap area from the image shape?

image

tap

gesture

swift

swiftui