Search code examples
iosswiftcalayercashapelayer

Add an image to to CAShapeLayer within its bezierpath


I am trying to implement https://github.com/joshdhenry/SpinWheelControl library in my app, where for each wheel slice I am trying to add a custom image to its shapelayer, or any other way possible inside the slice to its bounds and path, I am not being able to do so. I tried adding the image to the content of a new shapelayer and added it to my pie slice, but it didn't work either.

for wedgeNumber in 0..<numberOfWedges {
        let wedge: SpinWheelWedge = source.wedgeForSliceAtIndex(index: wedgeNumber)

        //Wedge shape
        wedge.shape.configureWedgeShape(index: wedgeNumber, radius: radius, position: spinWheelCenter, degreesPerWedge: degreesPerWedge)
        wedge.layer.addSublayer(wedge.shape)

        let layer = CAShapeLayer()
        layer.contents = UIImage(named: "sample.jpg")?.cgImage
        layer.bounds = wedge.shape.bounds
        layer.path = wedge.shape.path
        wedge.shape.addSublayer(layer)


        spinWheelView.addSubview(wedge)
    }

Output in simulator:

Output in simulator

Why am I not being able to add image to the shape layer??

Needed output

needed output

Thanks in advance


Solution

  • class CustomImageView: UIImageView{ 
    
    var bezierPath = UIBezierPath()
    
    override func setNeedsLayout() {
        bezierPath.reversing()
        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = self.bounds
        shapeLayer.path = bezierPath.cgPath
        self.layer.mask = shapeLayer
        self.layer.masksToBounds = true
    }
    
    }
    

    your modified code

    for wedgeNumber in 0..<numberOfWedges {
        let wedge: SpinWheelWedge = source.wedgeForSliceAtIndex(index: wedgeNumber)
    
        //Wedge shape
        wedge.shape.configureWedgeShape(index: wedgeNumber, radius: radius, position: spinWheelCenter, degreesPerWedge: degreesPerWedge)
        wedge.layer.addSublayer(wedge.shape)
    
        let imageLayer = CustomImageView()
        imageLayer.image = UIImage(named: "sample.jpg")
        imageLayer.bezierPath = wedge.shape.path
        imageLayer.setNeedsLayout()
    
        // Here you will get an image view with specified path 
           you can subview this imageLayer to the required view
    }