ios - 如何快速裁剪collectionview单元格之外的部分图像

Question

我有一个简单的设计应用程序，右上角只有一个圆形图像。我正在尝试做一些类似于他们在绽放应用程序上所做的事情。

看看图像的边缘是如何在单元格的边缘被切断的，我正在尝试类似的东西，但我一直得到这个。

我有一种感觉，整个单元格只是一个图像，所以它看起来像那样，但我不知道制作整个单元格图像是否是我想要做的，因为我计划最终能够改变单元格的颜色和圆形图像在不同时间的颜色，并使用不同的颜色，所以我不希望只为单元格使用大图像，因为我可能也想使用不同的图像。它似乎也更容易解决这个问题，而不是仅仅创建几十个不同的图像，这也增加了它的应用程序大小。
我看过一些不同的帖子，但似乎没有一个对我有用。
我试过:

将图像和背景的框架设置为边界

使用所有不同的内容模式

使用 clipsToBound 和 maskToBounds 并将它们设置为 true 和 false。

这是我牢房里的东西:

    contentView.addSubview(cellBackgrounded)
        cellBackgrounded.addSubview(imgView)
//        imgView.frame = cellBackgrounded.bounds  set this to = self.bounds, contentView.frame
//        contentView.frame = self.bounds
//        cellBackgrounded.frame = self.bounds
//        imgView.layer.masksToBounds = false
        imgView.translatesAutoresizingMaskIntoConstraints = false
        imgView.image = UIImage(named: "Oval")?.withRenderingMode(.alwaysTemplate)
        imgView.clipsToBounds = true
        imgView.contentMode = .scaleToFill
        imgView.tintColor = .red
        
        cellBackgrounded.translatesAutoresizingMaskIntoConstraints = false
        cellBackgrounded.backgroundColor = .white
        cellBackgrounded.addSubview(cellName)
        cellName.translatesAutoresizingMaskIntoConstraints = false
        cellName.font = UIFontMetrics.default.scaledFont(for: UIFont.systemFont(ofSize: 50, weight: .bold))
        cellName.textColor = .black
        cellName.numberOfLines = 0
        cellName.textAlignment = .center
        
        darkShadow.frame = self.bounds
        darkShadow.cornerRadius = 15
        darkShadow.backgroundColor = UIColor.offWhite.cgColor
        darkShadow.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
        darkShadow.shadowOffset = CGSize(width: 10, height: 10)
        darkShadow.shadowOpacity = 1
        darkShadow.shadowRadius = 15
        self.layer.insertSublayer(darkShadow, at: 0)
        
        NSLayoutConstraint.activate([
            cellBackgrounded.topAnchor.constraint(equalTo: topAnchor),
            cellBackgrounded.leadingAnchor.constraint(equalTo: leadingAnchor),
            cellBackgrounded.trailingAnchor.constraint(equalTo: trailingAnchor),
            cellBackgrounded.bottomAnchor.constraint(equalTo: bottomAnchor),
            imgView.topAnchor.constraint(equalTo: cellBackgrounded.topAnchor, constant: -40),
            imgView.trailingAnchor.constraint(equalTo: cellBackgrounded.trailingAnchor, constant: 40),
            cellName.centerXAnchor.constraint(equalTo: cellBackgrounded.centerXAnchor),
            cellName.centerYAnchor.constraint(equalTo: cellBackgrounded.centerYAnchor),
            cellName.leadingAnchor.constraint(equalTo: cellBackgrounded.leadingAnchor, constant: 10),
            cellName.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
            imgView.heightAnchor.constraint(equalTo: cellBackgrounded.heightAnchor, multiplier: 0.7),
            imgView.widthAnchor.constraint(equalTo: cellBackgrounded.widthAnchor, multiplier: 0.7)
        ])

如果还有什么我可以帮忙的，请询问，
谢谢

Answer 1

使用 clipToBounds
根据苹果文档:

When the value of this property is true, Core Animation creates animplicit clipping mask that matches the bounds of the layer andincludes any corner radius effects

你必须对 containerView 做 clipsToBound 来解决这个问题

containerView.clipsToBound = true