2017-01-18 66 views
1

我要畫一個像這樣的 enter image description here斯威夫特:繪製圖像,並使用邊框UIGraphicsBeginImageContextWithOptions

什麼提供的是:綠色泡沫與向下箭頭圖像(綠色泡沫圖像已經有邊界,所以我並不需要畫它)和中心照片。我需要周圍畫照片+圓角它 白色邊框這是我的代碼至今:

let rect = CGRect(origin: .zero, size: CGSize(width: 60, height: 67)) 
    let width = CGFloat(50) 
    let borderWidth: CGFloat = 1.0 

    let imageRect = CGRect(x: 5, y: 5, width: width, height: width) 
    let bubbleImg = #imageLiteral(resourceName: "pinGreen") 

    UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0) 

    let context = UIGraphicsGetCurrentContext() 

    bubbleImg.draw(in: rect) 

    let path = UIBezierPath(roundedRect: imageRect.insetBy(dx: borderWidth/2, dy: borderWidth/2), cornerRadius: width/2) 
    context!.saveGState() 
    path.addClip() 

    image.draw(in: imageRect) 
    context!.restoreGState() 

    UIColor.purple.setStroke() 
    path.lineWidth = borderWidth 
    path.stroke() 

    let roundedImage = UIGraphicsGetImageFromCurrentImageContext(); 
    let img = roundedImage?.cgImage! 
    UIGraphicsEndImageContext(); 

,這是結果

enter image description here

誰能幫我這個? 無論如何設計並從xib文件中獲取這種類型的圖像?

回答

2

我會告訴你最簡單的方法:

  1. 你需要imageView1綠色泡沫圖像,imageView2的照片(寬度=身高)。他們的中心是一樣的。

  2. imageView2的圓角半徑等於其框架寬度/ 2。

  3. 將imageView2圖層的邊框顏色設置爲白色,邊框寬度約爲5 px。不要忘記設置maskToBounds=true

請嘗試。


DaijDjan:這個答案在一個圖像(IB顯示++代碼+ APP): enter image description here

+0

u能發佈一些代碼?雖然可能會出現 –

+1

- 您應該/需要使用UIGraphics繪製它......您的問題非常具體;) –