1

I have created a clickable diagram with CAShapeLayers and UIBezierPaths. These shapes have a background-color that I want to fade out to transparent on the sides/edges. All CAShapeLayers have different shapes. Is there a way to achieve this in Swift?

I attached a simple example image of what I'm trying to do:

enter image description here

Right now, I'm creating the CAShapeLayers as follows:

var path = UIBezierPath()
path.moveToPoint(CGPointMake(20, 30))
path.addLineToPoint(CGPointMake(40, 30))
path.addLineToPoint(CGPointMake(50, 60))
path.addLineToPoint(CGPointMake(120, 180))
path.closePath()

var layer = CAShapeLayer()
layer.path = path.CGPath
layer.fillColor = UIColor(red: 255, green: 0, blue: 0, alpha: 0.5).CGColor
layer.hidden = true

baseImg.layer.addSublayer(layer)

Is there a way to add a CIGaussianBlur or a UIBlurEffect to these shapes?

enter image description here

klaaskox
  • 329
  • 4
  • 15
  • You might want to use [Core Image blurs](https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/uid/TP30000136-SW29). – jtbandes Mar 26 '16 at 00:32
  • @jtbandes you link is 403 Forbidden – Wingzero Mar 26 '16 at 04:13
  • @Wingzero It isn't forbidden to me. It's you personally that Apple has locked out! :) – matt Mar 26 '16 at 04:34
  • @jtbandes Thanks! Can I apply this (for example a CIGaussianBlur) to a CAShapeLayer? I only can find examples where a CIGaussianBlur is applied to a UIImage. – klaaskox Mar 26 '16 at 07:00
  • Please provide more details about your setup and your desired outcome. The answer may differ greatly depending on what you want to do. Do these need to be CAShapeLayer? Is animation required? Will the shape change? Etc. – jtbandes Mar 26 '16 at 08:19
  • I have a UIImage that shows a human body. This human body is divided in +-30 bodyparts. These parts (CAShapeLayers) are hidden, but when the user taps on the body, the tapped bodypart will become visible. Another tap on the selected bodypart will hide it again. This is al working just fine. Right now the CaShapeLayers have a fillColor, but I want to blur these colors on the sides of the shapes so they will look smoother. The shapes won't change, if possible animating from unvisible and back would be nice, but not necessary. – klaaskox Mar 26 '16 at 08:36
  • CAShapeLayer is a convenient way of rendering shapes, but iOS doesn't support filters on CALayers. You'll have to pick another method of blurring the shape, perhaps just using it as an image and putting the image onscreen. Another fast way to blur images is [Metal performance shaders](https://developer.apple.com/library/tvos/documentation/MetalPerformanceShaders/Reference/MPSFrameworkReference/index.html). You can find more discussions about blurring [here](http://stackoverflow.com/questions/12271016/fast-blur-on-ios). – jtbandes Mar 26 '16 at 08:45
  • @jtbandes Thanks, I will have a look at that. I added an image to clarify my goal. – klaaskox Mar 26 '16 at 08:48
  • @jtbandes Would it be possible to convert the CAShapeLayers into UIImages (which I can blur) and show/hide these on the exact same locations as the CAShapeLayers on top of the bodyImage? – klaaskox Mar 26 '16 at 08:51
  • In that case a CAShapeLayer is not really necessary; you can use your UIBezierPath to [create an image](http://stackoverflow.com/questions/17408209/how-to-create-a-image-with-uibezierpath), which you can then blur. – jtbandes Mar 26 '16 at 08:52
  • I changed my code so the UIBezierPath is used to generate a UIImage. I add a CALayer as sublayer to the CAShapeLayer, and use the contents property of the CALayer to set the generated image as background. This works fine, but I still need to apply a blur effect to the generated image. Most examples I found apply a blur filter to a UIImageView, but I just want change the UIImage to a blurred version. Is this possible? – klaaskox Mar 26 '16 at 15:12
  • Fixed it with a CIGaussianBlur CIFilter. Works great except from the fact that it's slow. I tried the GPUImage framework, but from what I experienced the Gaussian blur from GPUImage differs a lot (when you look at the result) from the CIGaussianBlur filter. Are there any other options? – klaaskox Mar 26 '16 at 21:37

0 Answers0