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

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

我建议你不要＆＃34;透明＆＃34;文本。相反，您可能希望将此视为带有＆＃34;掩码的白色视图＆＃34;这是文本的轮廓，允许显示下面的图像。这有点复杂，因为掩码实际上与我们通常掩盖图像的方式相反（例如，＆＃34;用Facebook登录＆＃34;文本不是掩模，而是围绕它的白色空间）。但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:...)的使用，它允许我们创建一个图像蒙版，除了我们绘制的白色文本和边框之外的所有内容。然后，当我们创建最终图像时，我们可以将其剪辑到这个＆＃34;图像蒙版＆＃34;与clip(to:mask:)。

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

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

Answer 2

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

Answer 3

首先，您可以将-keepclasseswithmembers class * { @retrofit2.http.* <methods>; } 设置为所需的颜色。

如果您将tintcolor设置为alpha，则表示视图正在隐藏。所以不要给0提供alpha。

您可以选择使用0。所以背景颜色会显示出来。

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

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

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

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

希望这会有所帮助：）