【问题标题】:Add an image to to CAShapeLayer within its bezierpath在其 bezierpath 中将图像添加到 CAShapeLayer
【发布时间】:2018-01-08 04:22:30
【问题描述】:

我正在尝试实施 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)
    }

模拟器输出:

为什么我无法将图像添加到形状图层?

需要的输出

提前致谢

【问题讨论】:

  • 简单地说,你需要一个CALayer 用于图像,CAShapeLayer 用于楔形路径。使用形状图层作为图像图层的蒙版。
  • 我用所需的 cgpath 制作了一个 maskLayer 并屏蔽了我的 imageLayer(CALayer),然后将 imageLayer 添加到我的楔形 (UIVIew) 作为子层。在切片中仍然看不到图像
  • 检查图像层的边界。它与框架不同,可能会将图像移动到可视区域之外。另外,在添加图像后设置断点并检查 Xcode 中的调试器可以显示什么。

标签: ios swift calayer cashapelayer


【解决方案1】:
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
}

【讨论】:

  • 你应该 subview 那个 imageLayer
  • @AshwinShrestha 能否分享您的示例项目,以便我查看。
  • 谢谢,Shezad...我可以通过使用与楔形相同的 bezierpath 来掩盖我的图像视图来做到这一点。
  • @AshwinShrestha 你好。您可以为此分享您的图像解决方案吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-09-13
  • 1970-01-01
相关资源
最近更新 更多