web-dev-qa-db-ja.com

Swift-シェイプがトリミングされたビューを作成する方法

Swift 1.2およびxcode6を使用して、画像に示されている結果を達成しようとしています。

基本的には、下のビューを表示してアプリのチュートリアルを作成できるように、シェイプをカットしたビューを作成したいと思います。円形を作成する方法は知っていますが、ビューで切り抜く方法がわかりません。私はそれを行う方法の完全な例が必要です。前もって感謝します

Image

swiftuiviewcalayer
10
LamBronx

これを行う最も簡単な方法は、外側が部分的に透明な白で、中央が透明な円であるpng画像を作成することです。次に、マスキング画像を上にして、2つの画像ビューを積み重ね、「不透明」フラグをfalseに設定します。

CAShapeLayerを作成し、半透明の白色を使用するように設定してから、その形状から穴を切り取った正方形の形状をインストールすることによって、これを行うこともできます。そのシェイプレイヤーを画像ビューのレイヤーの上にインストールします。

これを行う最も一般的な方法は、UIImageViewのカスタムサブクラスを作成し、サブクラスのinitメソッドでシェイプレイヤーを作成してインストールすることです。昨日、UIImageViewのカスタムサブクラスの作成を示すGistを作成しました。リンクは次のとおりです： ImageViewWithGradient Gist

その要点はグラデーションレイヤーを作成します。代わりにシェイプレイヤーを作成するように調整するのは簡単です。layoutSubviewsメソッドを変更した場合、画像ビューのサイズが変更された場合にビューとパスを調整することができます。

編集：

わかりました。トリミング画像ビューを作成する遊び場を作成するという追加の手順を実行しました。 ImageViewWithMask on github で見つけることができます

私の遊び場の結果の画像は次のようになります。

Image with circular mask

3
Duncan C

答えはありますが、私は自分のやり方を共有したいと思います。

// Let's say that you have an outlet to the image view called imageView
// Create the white view 
let whiteView = UIView(frame: imageView.bounds) 
let maskLayer = CAShapeLayer() //create the mask layer

// Set the radius to 1/3 of the screen width
let radius : CGFloat = imageView.bounds.width/3 

// Create a path with the rectangle in it.
let path = UIBezierPath(rect: imageView.bounds)
// Put a circle path in the middle
path.addArcWithCenter(imageView.center, radius: radius, startAngle: 0.0, endAngle: CGFloat(2*M_PI), clockwise: true)

// Give the mask layer the path you just draw
maskLayer.path = path.CGPath
// Fill rule set to exclude intersected paths
maskLayer.fillRule = kCAFillRuleEvenOdd

// By now the mask is a rectangle with a circle cut out of it. Set the mask to the view and clip.
whiteView.layer.mask = maskLayer
whiteView.clipsToBounds = true

whiteView.alpha = 0.8
whiteView.backgroundColor = UIColor.whiteColor()

//If you are in a VC add to the VC's view (over the image)
view.addSubview(whiteView)    
// Annnnnd you're done.
18
Dănuț Mihai Florian

UIViewのサークルマスクを作成する方法のサンプルコードは次のとおりです。

let sampleView = UIView(frame: UIScreen.mainScreen().bounds)
let maskLayer = CALayer()
maskLayer.frame = sampleView.bounds
let circleLayer = CAShapeLayer()
//assume the circle's radius is 100
circleLayer.frame = CGRectMake(sampleView.center.x - 100, sampleView.center.y - 100, 200, 200)
let circlePath = UIBezierPath(ovalInRect: CGRectMake(0, 0, 200, 200))
circleLayer.path = circlePath.CGPath
circleLayer.fillColor = UIColor.blackColor().CGColor
maskLayer.addSublayer(circleLayer)

sampleView.layer.mask = maskLayer

これが私が遊び場で作ったものです：

enter image description here

4
duan
    //assume you create a UIImageView and content image before execute this code
  let sampleMask = UIView()
    sampleMask.frame = self.view.frame
    sampleMask.backgroundColor =  UIColor.black.withAlphaComponent(0.6)
    //assume you work in UIViewcontroller
    self.view.addSubview(sampleMask)
    let maskLayer = CALayer()
    maskLayer.frame = sampleMask.bounds
    let circleLayer = CAShapeLayer()
    //assume the circle's radius is 150
    circleLayer.frame = CGRect(x:0 , y:0,width: sampleMask.frame.size.width,height: sampleMask.frame.size.height)
    let finalPath = UIBezierPath(roundedRect: CGRect(x:0 , y:0,width: sampleMask.frame.size.width,height: sampleMask.frame.size.height), cornerRadius: 0)
    let circlePath = UIBezierPath(ovalIn: CGRect(x:sampleMask.center.x - 150, y:sampleMask.center.y - 150, width: 300, height: 300))
    finalPath.append(circlePath.reversing())
    circleLayer.path = finalPath.cgPath
    circleLayer.borderColor = UIColor.white.withAlphaComponent(1).cgColor
     circleLayer.borderWidth = 1
    maskLayer.addSublayer(circleLayer)

    sampleMask.layer.mask = maskLayer

enter image description here

2
Raul Quispe
class MakeTransparentHoleOnOverlayView: UIView {

    @IBOutlet weak var transparentHoleView: UIView!

    // MARK: - Drawing

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        if self.transparentHoleView != nil {
            // Ensures to use the current background color to set the filling color
            self.backgroundColor?.setFill()
            UIRectFill(rect)

            let layer = CAShapeLayer()
            let path = CGMutablePath()

            // Make hole in view's overlay
            // NOTE: Here, instead of using the transparentHoleView UIView we could use a specific CFRect location instead...
            path.addRect(transparentHoleView.frame)
            path.addRect(bounds)

            layer.path = path
            layer.fillRule = kCAFillRuleEvenOdd
            self.layer.mask = layer
        }
    }

    override func layoutSubviews () {
        super.layoutSubviews()
    }

    // MARK: - Initialization

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }
}
0
mazorati