Swift - 將圖像添加到圓形視圖

我有一個具有圓角半徑和陰影的自定義視圖，並且我試圖在其中添加圖像。圖像應位於圓形區域內。但是，我在視圖中看到了一個黑色區域，圖像應該是這樣的（或者圖像是一個正方形，沒有圓角，在我最後一次嘗試時）。我如何添加此圖片？Swift - 將圖像添加到圓形視圖

錯誤的結果我得到：

我的代碼：

import Foundation 
import UIKit 

@IBDesignable 

class RoundedSquareView: UIView { 
    var shadowLayer: CAShapeLayer! 
    @IBInspectable var image: UIImage! = UIImage() 

    override func layoutSubviews() { 
    super.layoutSubviews() 

    if shadowLayer == nil { 
     shadowLayer = CAShapeLayer() 
     shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 14).cgPath 
     shadowLayer.fillColor = UIColor.white.cgColor 

     shadowLayer.shadowColor = UIColor.darkGray.cgColor 
     shadowLayer.shadowPath = shadowLayer.path 
     shadowLayer.shadowOffset = CGSize(width: 0, height: 10.0) 
     shadowLayer.shadowOpacity = 0.3 
     shadowLayer.shadowRadius = 10 

     layer.insertSublayer(shadowLayer, at: 0) 
    } 

    let imgLayer = CAShapeLayer() 
    let myImage = image.cgImage 
    imgLayer.frame = bounds 
    imgLayer.masksToBounds = true 
    imgLayer.contents = myImage 
    imgLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 14).cgPath 
    imgLayer.cornerRadius = 14 
    layer.addSublayer(imgLayer) 
    } 

}

編輯：

預期的結果：

來源

2017-02-16 Charles Prado

你可以嘗試一個簡單的擴展。這裏有一個例子：

extension UIImageView { 
    func render(with radius: CGFloat) { 

     // add the shadow to the base view 
     self.backgroundColor = UIColor.clear 
     self.layer.shadowColor = UIColor.black.cgColor 
     self.layer.shadowOffset = CGSize(width: 0, height: 10) 
     self.layer.shadowOpacity = 0.3 
     self.layer.shadowRadius = 10 

     // add a border view for corners 
     let borderView = UIView() 
     borderView.frame = self.bounds 
     borderView.layer.cornerRadius = radius 
     borderView.layer.masksToBounds = true 
     self.addSubview(borderView) 

     // add the image for clipping 
     let subImageView = UIImageView() 
     subImageView.image = self.image 
     subImageView.frame = borderView.bounds 
     borderView.addSubview(subImageView) 

     //for performance 
     self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: 10).cgPath 
     self.layer.shouldRasterize = true 
     self.layer.rasterizationScale = UIScreen.main.scale 
    } 
}

用法：

myImageView.image = image 
myImageView.render(with: 10)

顯然，只要你想，你可以添加許多參數擴展，默認設置，它分成單獨的方法等

結果：

來源

2017-02-16 18:05:54 Frankie

我已經在應用我想把這個圖像放在這個自定義的視圖上，視圖應該是圓的，有陰影，並且有一個圖像在裏面 –

Post edit。請看看我想要的結果， m試圖實現。 –

更新完整的擴展 – Frankie

您可以添加圖像，並給它一些屬性來使它圓滑。當你擁有的屬性選項卡上的uImage選擇點擊在

layer.cornerRadius

點擊「+」和類型，將其更改爲一個數字，而不是字符串。所有數字1-50工作。如果你想要一個完美的圓圈，然後輸入50.

來源

2017-02-16 18:04:27

我已經這樣做了。檢查代碼的最後部分。不是那樣工作:( –

剛剛編輯了添加預期結果的帖子，請看一下，PS：我沒有將cornerRadius應用到故事板上的視圖，因爲它會殺死陰影圖層 –

你要做的F ollowing下面super.layoutSubviews()：

self.clipToBound = true

什麼是ClipToBound？

clipsToBounds屬性

一個布爾值，它確定是否子視圖被限制在視圖的邊界。

討論將此值設置爲YES會導致子視圖被剪裁到接收器邊界的。如果設置爲「否」，則不會剪裁超出接收器可見邊界的框架延伸爲的子視圖。默認值爲NO。

來源

2017-02-16 18:06:15

圖像層已經有imgLayer.masksToBounds = true。不工作。這應該工作在這個自定義視圖。視圖應該四捨五入，用一個陰影層，並在裏面有一個圖像 –

我在談論clipToBounds，沒有masksToBounds（這裏是區別：http://stackoverflow.com/a/39466262/4077559）我只是e點擊我的答案@CharlesPrado –

剛剛編輯的帖子添加預期的結果。請看一下。 PS：我沒有將cornerRadius應用於故事板上的視圖，因爲它會殺死陰影層。 –

你可以嘗試刪除：

let imgLayer = CAShapeLayer() 
let myImage = image.cgImage

並與替換代碼：

Image.frame = bounds 
Image.masksToBounds = true 
Image.contents = myImage 
Image.path = UIBezierPath(roundedRect: bounds, cornerRadius: 14).cgPath 
Image.cornerRadius = 14

的Xcode可能不會喜歡你給人的形象的別名。

那麼你還需要在括號內寫的UIView的

Layer.addsublayer(Image)

來源

2017-02-16 18:17:21

但圖像是UIImage ...不是UIImageView。這樣圖像不會被添加到視圖:( –

在UIView寫入，'layer.addsublayer（Image）'不寫在與圖像屬性相同的括號 –

@CharlesPrado我更新了我的代碼 –

Swift - 將圖像添加到圓形視圖

回答

相關問題