裁剪的图像在框架外调用TapAction [英] Clipped Image calls TapAction outside frame

问题描述

我有一个关于图像上的tapAction的问题. TapAction闭包将在不应发生的裁剪区域上调用.我该怎么办?

I have a issue concerning the tapAction on a image. The TapAction closure gets called on the clipped area which shouldn't happen. What should I do?

Image(uiImage: image)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(height: 200, alignment: .center)
    .presentation(tapped ? Modal(Image(uiImage: image)) : nil)
    .clipped()
    .cornerRadius(10)
    .border(Color.black, width: 2, cornerRadius: 10)
    .tapAction {
        self.tapped.toggle()
    }

这就是结果:

推荐答案

更新

我更新了答案.这是正确的做法.有一个名为contentShape()的修饰符，可用于定义命中测试区域:

I updated my answer. This is the proper way of doing it. There is a modifier called contentShape() that you can use to define the hit test area:

import SwiftUI

struct ContentView: View {
    @State private var tapped = false

    var body: some View {
        Image(systemName: "circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height: 200, alignment: .center)
            .presentation(tapped ? Modal(Image(systemName: "photo")) : nil)
            .clipped()
            .cornerRadius(10)
            .border(Color.black, width: 2, cornerRadius: 10)
            .contentShape(TapShape())
            .tapAction {
                self.tapped.toggle()
            }
    }

    struct TapShape : Shape {
        func path(in rect: CGRect) -> Path {
            return Path(CGRect(x: 0, y: 0, width: rect.width, height: 200))
        }
    }
}

这篇关于裁剪的图像在框架外调用TapAction的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！