CAShapeLayer 中图像的 StackView

Question

我正在尝试构建一个有点圆形的图像路径（类似于下面发布的图像）。我不确定如何处理这个问题，我最初的想法是使用 CAShapeLayer 绘制圆形部分，但不确定如何处理图像。有没有更简单的方法来实现椭圆形？

Answer 1

好吧，一种方法是使用小三角。基本上，我们会制作一个大圆圈以供参考，并在圆周上放置一些较小的圆圈，等距放置在我们选择的给定开始和结束角度之间，这样它们就会按照我们喜欢的方式散开。

这里有一些可以帮助您入门的内容：

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let c = UIView(frame: CGRect(x: 0, y: 0, width: 600, height: 600))
        let radius = c.bounds.width/2
        c.layer.cornerRadius = radius
        c.backgroundColor = .darkGray
        self.view.addSubview(c)
        c.center = CGPoint(x: 0, y: self.view.bounds.midY)
        
        let startAngle: CGFloat = 50
        let endAngle = 180 - startAngle
        
        let n = 6
        let delta = (endAngle-startAngle)/CGFloat(n-1)
        var degrees: CGFloat = startAngle
        degrees -= delta
        
        for _ in 0..<n {
            degrees += delta
            
            let v = UIView(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
            v.layer.cornerRadius = v.bounds.width/2
            v.backgroundColor = UIColor.green.withAlphaComponent(0.5)
            c.addSubview(v)
            v.center = CGPoint(x: c.bounds.midX, y: c.bounds.midY)
            v.center.y -= radius*cos(degrees*CGFloat.pi/180)
            v.center.x += radius*sin(degrees*CGFloat.pi/180)
        }
    }
}

如果你想要更椭圆的形状，可以使用更大的参考圆，并将角度范围调整得更窄。并添加此代码以定位参考圆：

let d = radius - self.view.bounds.width
let padding: CGFloat = 50
if d > 0 {
    c.frame.origin.x -= d+padding
}

像这样：

这是您的设计，其中包含以上 2 张图片，以显示曲线的差异。每个图像的第一个和最后一个圆圈都在同一个位置，但曲线路径不同。您的设计在这两者之间有一条曲线路径，因此使用正确的参考圆尺寸，您可以获得几乎精确的曲线路径。

CAShapeLayer 中图像的 StackView

StackView of images in CAShapeLayer

uiimage

cashapelayer

ios

swift