SwiftUI图像裁剪成形状后在上下文菜单中有透明填充。

Question

在我的SwiftUI应用程序中，我的Asset Catalog中有一张长宽比为1:1的图片。在我的代码中，我有一个Image视图，其长宽比不同，并将图片剪裁到新的尺寸：

Image("My Image")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 250)
    .clipped()

然而当我使用 contextMenu 修饰符将上述图片添加到一个上下文菜单中时，原始的宽高比仍然存在，但是带有透明的填充：

如何保持图片在上下文菜单内被剪裁到新的框架大小，以便没有填充？

- Wilson Gramer

Answer 1

iOS 15请参见采纳的回答。这个解决方案适用于iOS 14。

---

我通过在图像上添加.contentShape(Rectangle())修饰符来解决了这个问题：

Image("My Image")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 250)
    .clipped()
    .contentShape(Rectangle())
    .contextMenu {
        Text("Menu Item")
    }

- Wilson Gramer

---

这是一个非常漂亮的解决方案。我还能够使用内容形状将上下文菜单预览更改为Circle（）。谢谢！ - Adit Gupta

是的，这个问题和答案仍然有用。帮了我很多，谢谢。 - Muhammad Ahmod

我不相信这个解决方案在iOS 15中能够工作。在那之前我没有尝试过。如果你使用一个圆形的形状，你会发现它不起作用。而且在你的代码中，如果你在iOS 15上删除contentShape，它并没有任何区别。我想知道是否有人可以用一个不是矩形的形状来实现这个功能。 - alionthego

@alionthego 你说得对，iOS 15更新了contentShape API。我刚刚接受了你的答案，谢谢分享！ - Wilson Gramer

Answer 2

我相信在所有情况下都有效的正确解决方案是设置contentShape中的第一个参数（kind）：

func contentShape<S>(_ kind: ContentShapeKinds, _ shape: S)

将其设置为.contextMenuPreview，在所有形状上都可以工作：

Image("leaf")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 300)
    .clipShape(Circle())
    .contentShape(ContentShapeKinds.contextMenuPreview, Circle())
    .contextMenu {
        Text("Menu Item")
    }

- alionthego