5

ここに画像の説明を入力

緑色の円で示すように CGPath 領域を作成します。CGPath 領域はクリアである必要があり、残りの画像にはぼやけた効果または半透明効果が適用されます。次のコードで CGPath 内の画像をクリップできます。

UIGraphicsBeginImageContext(view.frame.size);
CGContextAddPath(ctx, path);
CGContextClip(ctx);

[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageWriteToSavedPhotosAlbum(clipImage, nil, nil, nil);
CGPathRelease(path);

しかし、CGPath でぼかし効果や半透明効果を同時に適用する方法がわかりません。元画像をぼかしてクリップ画像に合成できると思いますが、実装方法がわかりません。

4

1 に答える 1

1

最終結果を達成するには、2 つのコンセプトが必要でした:-

i) CGBlendMode ii) CIFilter

CGBlendMode は、画像から目的の部分を削除するために使用されます。Current Context 内に相互に存在するパスに対する合成操作。rawValue が 16のクリア モードは、必要な部分をクリアするのに役立ちます。

CIFilter は、最終的な画像をぼかすのに役立ちます。

class ConvertToBlurryImage:UIView {
   
    var originalImage:UIImage!
    var finalImage:UIImage!
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        
        //Original Image
        originalImage = UIImage(named: "originalImage.png")
        
        //Intermediate Image
        let intermediateImage = UIImage().returnBlurImage(image: originalImage)
        
        //Final Result Image
        finalImage =  blendImage(image: intermediateImage)

        let attachedImage = UIImageView(image: finalImage)
        addSubview(attachedImage)

    }
    
    func blurryImage(image:UIImage) -> UIImage {
        
        UIGraphicsBeginImageContext(frame.size)
        image.draw(in: CGRect(origin: frame.origin, size: frame.size) )
        
         //  16 === clear
        let mode = CGBlendMode(rawValue: 16)
        UIGraphicsGetCurrentContext()!.setBlendMode(mode!)
        
        //Path that need to crop
        pathToCrop()
        
        let mode2 = CGBlendMode(rawValue: 16)
        UIGraphicsGetCurrentContext()!.setBlendMode(mode2!)
        
        let finalImage = UIGraphicsGetImageFromCurrentImageContext()
        return finalImage!
        
    }

    func pathToCrop() {
        let path = UIBezierPath(ovalIn: CGRect(x: frame.width/2 - 50, y: frame.height/2 - 100 , width: 150, height: 150) )
        path.fill()
        path.stroke()
    }
    
    
}

extension UIImage {
    
    func returnBlurImage(image:UIImage) -> UIImage {
        
        let beginImage = CIImage(cgImage: image.cgImage!)
        let blurfilter = CIFilter(name: "CIGaussianBlur")
        blurfilter?.setValue(beginImage, forKey: "inputImage")
        let resultImage = blurfilter?.value(forKey: "outputImage") as! CIImage
        let blurredImage = UIImage(ciImage: resultImage)

        return blurredImage
        
        
        
    }
    
}

ミッション達成

ここに画像の説明を入力

最終的な Github デモ

于 2016-12-16T13:43:08.503 に答える