倒装面具swiftui与系统映像 [英] Inverted mask swiftui with system image

问题描述

我正在尝试在swiftUI中从圆形中切出一个sf符号.

I am trying to cut out a sf symbol from a circle shape in swiftUI.

我目前有以下代码:

Circle()
   .fill(Color.white)
   .frame(width: 50, height: 50)
   .mask(
       Image(systemName: "play.fill")
           .font(.system(size: 24))
           .foregroundColor(Color.black)
           .frame(width: 50, height: 50)
   )

哪个生成:

但是，我想要的是反转蒙版的效果:将符号从圆圈中切出，如下图所示:

However, what I want is to invert the effect of the mask: The symbol is cut out of the circle as in the image below:

请注意，实际背景不是红色，而是用户上载的图像，因此无法将符号foregroundColor设置为红色.

Note that the actual background is not red as in the image but will be a user uploaded image, so setting the symbol foregroundColor to red is not possible.

有什么方法可以反转符号/图像的蒙版，使圆上的孔具有图像的形状吗?

Is there any way to invert the mask of the symbol/image such that the circle has a hole in it with the shape of the image?

推荐答案

Vlad Lego的答案在此处应用时有效

This answer by Vlad Lego works when applied here.

对于要剪切的部分，使用.black，对于要保留的部分，使用.white，可以创建蒙版.

You create your mask using .black for the parts you want cut out, and .white for the parts you want preserved.

(假设背景为红色，这就是它的外观)

(assuming the background is red, this is what it would look like)

Rectangle()
  .foregroundColor(Color.white)
  .mask(
    ZStack {
      Circle()
        .fill(Color.white)
        .frame(width: 50, height: 50)
      Image(systemName: "play.fill")
        .font(.system(size: 24))
        .foregroundColor(Color.black)
    }
      .compositingGroup()
      .luminanceToAlpha()
  )

这篇关于倒装面具swiftui与系统映像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！