如何设置按钮的样式以获得透明文本？

Question

我目前正在开发一个欢迎页面，我遇到了这个有趣的设计：

我正试图在底部制作一个按钮，文本穿过它背后的半透明视图。我尝试了以下代码，但它似乎没有工作：

let transparent = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
let semiwhite = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.15)        
bottomView.backgroundColor = semiwhite
loginButton.backgroundColor = semiwhite
loginButton.setTitleColor(transparent, forState: .Normal)
loginButton.layer.cornerRadius = 10
loginButton.layer.masksToBounds = true
loginButton.layer.borderWidth = 2.5
loginButton.layer.borderColor = transparent.CGColor

有谁知道如何做到这一点？

Answer 1

我建议你不要“透明”的文字。相反，您可能希望将此视为带有“蒙版”的白色视图，该蒙版是文本的轮廓，允许显示下面的图像。这有点复杂，因为掩码实际上与我们通常掩盖图像的方式相反（例如，“用Facebook登录”文本不是掩模，而是围绕它的白色空间）。但Core Graphics提供了很容易实现这一目标的方法。

因此，尽管在您喜欢的图像编辑工具中创建此图形可能最简单，但如果您想以编程方式执行此操作，则可以在Swift 3或更高版本中执行以下操作：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let image1 = maskedImage(size: button1.bounds.size, text: "Sign in with Facebook")
    button1.setImage(image1, for: .normal)

    let image2 = maskedImage(size: button2.bounds.size, text: "Sign-up with Email")
    button2.setImage(image2, for: .normal)
}

func maskedImage(size: CGSize, text: String) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(size, true, 0)

    let context = UIGraphicsGetCurrentContext()
    context?.scaleBy(x: 1, y: -1)
    context?.translateBy(x: 0, y: -size.height)

    // draw rounded rectange inset of the button's entire dimensions

    UIColor.white.setStroke()
    let pathRect = CGRect(origin: .zero, size: size).insetBy(dx: 10, dy: 10)
    let path = UIBezierPath(roundedRect: pathRect, cornerRadius: 5)
    path.lineWidth = 4
    path.stroke()

    // draw the text

    let attributes: [NSAttributedStringKey: Any] = [
        .font: UIFont.preferredFont(forTextStyle: .caption1),
        .foregroundColor: UIColor.white
    ]
    let textSize = text.size(withAttributes: attributes)
    let point = CGPoint(x: (size.width - textSize.width) / 2, y: (size.height - textSize.height) / 2)
    text.draw(at: point, withAttributes: attributes)

    // capture the image and end context

    let maskImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // create image mask

    guard let cgimage = maskImage?.cgImage, let dataProvider = cgimage.dataProvider else { return nil }

    let bytesPerRow = cgimage.bytesPerRow
    let bitsPerPixel = cgimage.bitsPerPixel
    let width = cgimage.width
    let height = cgimage.height
    let bitsPerComponent = cgimage.bitsPerComponent

    guard let mask = CGImage(maskWidth: width, height: height, bitsPerComponent: bitsPerComponent, bitsPerPixel: bitsPerPixel, bytesPerRow: bytesPerRow, provider: dataProvider, decode: nil, shouldInterpolate: false) else { return nil }

    // create the actual image

    let rect = CGRect(origin: .zero, size: size)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    UIGraphicsGetCurrentContext()?.clip(to: rect, mask: mask)
    UIColor.white.withAlphaComponent(0.9).setFill()
    UIBezierPath(rect: rect).fill()
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // return image

    return image
}

这里需要注意的技术是使用CGImage(maskWidth:...)，它可以让我们创建一个图像蒙版，除了我们绘制的白色文本和边框之外的所有内容。然后，当我们创建最终图像时，我们可以使用clip(to:mask:)将其剪辑到此“图像蒙版”。

通常，当我们谈论屏蔽图像时，我们用UIBezierRect或其他图像（其中非零alpha通道显示应该屏蔽的内容和不应该屏蔽的内容）来屏蔽它们。但是在这里我们使用Core Graphics“图像蒙版”进行屏蔽，这使我们能够获得更多控制权。有关使用图像蒙版进行遮罩和使用图像进行遮罩之间的差异的讨论，请参阅“Quartz 2D编程指南”中的Masking Images章节。

对于Swift 2的演绎，请参阅previous revision of this answer。

Answer 2

我会在Adobe Fireworks之类的设计中设置按钮，使文本保持透明，然后将其另存为GIF。然后，您可以将其设置为按钮的背景。

Answer 3

首先，您可以将tintcolor设置为您想要的颜色。

如果你将alpha设置为0那么这意味着隐藏了视图。所以不要给0 alpha。

你有选择，你可以使用clear color。所以背景颜色会显示出来。

第二件事，如果你想使用颜色然后采用alpha 0.5或其他颜色与alpha 0.5或0.2的白色同样不采取精确0.它将使视图不可见。

这是基本的一部分。现在在你的情况下，你可以做这样的事情，

例如，你的按钮大小是30 x 100，你应该把uiview作为背景，那个按钮的大小更大，并设置清晰的颜色作为背景颜色，并在该视图上添加按钮，如果你给出清晰的颜色，边框颜色或textcolor将自动设置为明智的颜色作为色彩或边界。

另一个简单的选择是你可以拍摄与要求完全匹配的图像并拍摄imageview并设置背景以清除颜色和图像作为你的图像，并在该图像上添加按钮，按钮具有清晰的颜色和没有文字，因为文字覆盖在图像本身

希望这会有所帮助:)