Ashwin Shrestha
Ashwin Shrestha

Reputation: 528

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

Upvotes: 0

Views: 1208

Answers (1)

Shezad
Shezad

Reputation: 756

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
}

Upvotes: 1

Related Questions