【问题标题】:How to cut the shape of a logo(png image) from another image programmatically in Swift?如何在 Swift 中以编程方式从另一个图像中剪切徽标的形状(png 图像)?
【发布时间】:2015-06-18 05:52:50
【问题描述】:

这是背景图片

这是标志

我们如何在 Swift 中制作这样的图像?


更新

现在我设法将徽标用作面具并得到类似的东西,

有什么办法可以反转面具吗?

这是我的代码

let logo = UIImage(named: "logo")!
let mask = CALayer()
mask.contents = logo.CGImage
mask.frame = mImageView.layer.bounds
mImageView.layer.mask = mask

【问题讨论】:

  • 我认为你最好用photoshop来做,为什么需要以编程方式来做
  • 我们可以通过编程方式进行,也可以稍等片刻,我会检查并回复...
  • 以编程方式进行可以进行更多组合(颜色和徽标)
  • @Keoros 是的,但是从 DB 他有数千张 png 图像然后......解决方案是什么?
  • @Keoros 请详细解释一下

标签: ios swift uiimage core-graphics


【解决方案1】:

您可以使用 UIBezierPath 以编程方式完成:

// lets create a view and an image for testing
let picture = UIImage(data: try! Data(contentsOf: URL(string: "http://i.stack.imgur.com/Xs4RX.jpg")!))!

// lets create a view and an image for testing
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: picture.size.width, height: picture.size.height))
imageView.image = picture

// now a layer for the mask
let maskLayer = CAShapeLayer()

// a path for the logo
let maskPath = CGMutablePath()

// create your logo path (I've added this circle to represent your logo path)
maskPath.addEllipse(in: CGRect(x: imageView.frame.midX - 150, y: imageView.frame.midY - 150, width: 300, height: 300))

// you will need a rectangle that covers the whole image area to intersect with your logo path
maskPath.addRect(CGRect(x: 0, y: 0, width: picture.size.width, height: picture.size.height))

// add the mask to your maskLayer
maskLayer.path = maskPath

// choose the fill rule EvenOdd
maskLayer.fillRule = kCAFillRuleEvenOdd

// add your masklayer to your view
imageView.layer.mask = maskLayer
imageView

如果您需要使用图像并以编程方式反转徽标的 alpha,您可以使用 kCGBlendModeDestinationOut 执行以下操作:

import UIKit

extension UIImage {
    func masked(with image: UIImage, position: CGPoint? = nil, inverted: Bool = false) -> UIImage? {
        let position = position ??
            CGPoint(x: size.width.half - image.size.width.half,
                    y: size.height.half - image.size.height.half)
        defer { UIGraphicsEndImageContext() }
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        draw(at: .zero)
        image.draw(at: position, blendMode: inverted ? .destinationOut : .destinationIn, alpha: 1)
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

let picture = UIImage(data: try! Data(contentsOf: URL(string: "http://i.stack.imgur.com/Xs4RX.jpg")!))!
let logo = UIImage(data: try! Data(contentsOf: URL(string: "https://www.dropbox.com/s/k7vk3xvcvcly1ik/chat_bubble.png?dl=1")!))!

let view = UIView(frame: UIScreen.main.bounds)
view.backgroundColor = .blue
let iv = UIImageView(frame: UIScreen.main.bounds)
iv.contentMode = .scaleAspectFill
iv.image = picture.masked(with: logo, inverted: true)
view.addSubview(iv)

【讨论】:

  • 嗨,我怎样才能从徽标中获取路径?我尝试将徽标用作遮罩,但无法反转它以获得我想要的结果。我已经用一些代码更新了我的问题。
  • @Keoros 我使用 kCGBlendModeDestinationOut 创建了一个扩展。查看我的编辑
【解决方案2】:
let bg = UIImage(named: "bg")!
let logo = UIImage(named: "logo")!
let size = imageView.frame.size
let rect = CGRectMake(0, 0, size.width, size.height)
UIGraphicsBeginImageContext(size)
bg?.drawInRect(rect)
logo.drawInRect(rect, blendMode: kCGBlendModeDestinationOut, alpha: 1.0)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
imageView.image = newImage

【讨论】:

    【解决方案3】:

    与 Keoros 相同,但通过使用 up 扩展来简化。 (也给他投票!)

    extension UIImageView {
    func applyCutMask(image:UIImage,cutMask:UIImage) {
        let size = self.frame.size
        let rect =  CGRect(origin: CGPoint(x:0,y:0), size: size)
        UIGraphicsBeginImageContext(size)
        image.draw(in: rect)
        cutMask.draw(in: rect, blendMode: .destinationOut, alpha: 1.0)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        self.image = newImage
    }}
    

    用法:

    imageView.applyCutMask(image: UIImage(named:"bg"), cutMask:UIImage(named:"logo"))
    

    【讨论】:

      猜你喜欢
      • 2020-05-03
      • 2016-08-17
      • 2010-10-03
      • 1970-01-01
      • 2012-02-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-03-22
      相关资源
      最近更新 更多