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

Posted 2023-03-10

技术标签:

【中文标题】如何快速裁剪collectionview单元格之外的部分图像【英文标题】：How to crop part of the image outside of a collectionview cell in swift 【发布时间】：2020-08-30 22:54:50 【问题描述】：

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

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

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

我看过一些不同的帖子，但似乎没有一个适合我。

我试过了：

将图像和背景的框架设置为边界使用所有不同的内容模式使用 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)
        ])

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

【问题讨论】：

你在哪个视图上设置了clipsToBound？你应该在容器视图上调用clipsToBound，而不是你要剪辑的视图 @CongNguyen 是的，有效。似乎我错过了理解 clipsToBounds 是什么。麻烦您了谢谢 【参考方案1】：

使用 clipToBounds

根据苹果文档：