代码之家  ›  专栏  ›  技术社区  ›  Ashwin Shrestha

将图像添加到bezierpath内的CAShapeLayer

  •  0
  • Ashwin Shrestha  · 技术社区  · 7 年前

    我正在努力实现 https://github.com/joshdhenry/SpinWheelControl 在我的应用程序中,对于每个轮子切片,我试图将自定义图像添加到其shapelayer,或者在切片内部以任何其他可能的方式添加到其边界和路径,但我无法这样做。我尝试将图像添加到新shapelayer的内容中,并将其添加到我的饼图切片中,但也没有成功。

    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

    为什么我不能将图像添加到形状层??

    所需输出

    needed output

    提前感谢

    1 回复  |  直到 7 年前
        1
  •  1
  •   Shezad    7 年前
    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
    }
    
    }
    

    您修改的代码

    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
    }