ios - 我不明白为什么下面的代码没有把圆准确地放在图像中心

Question

我不明白为什么下面的代码没有将圆准确地放在图像中心。

let face = collectionView.dequeueReusableCell(withReuseIdentifier: "myFace", for: indexPath) as! Face
print("face cellForItemAt \(indexPath) and frame \(face.frame)")

face.tag = indexPath.row
let _ = face.contentView.subviews.map({$0.removeFromSuperview})
let ind = indexPath.row
let vi = UIImageView()
vi.frame = face.contentView.frame
vi.image = UIImage(cgImage: panim[ind])

let layer = CAShapeLayer()
layer.frame = vi.frame
let circle = UIBezierPath(ovalIn: vi.frame)
circle.append(UIBezierPath(rect: vi.frame))
circle.usesEvenOddFillRule = false
layer.path = circle.cgPath
layer.fillColor = UIColor.red.withAlphaComponent(0.0).cgColor
layer.strokeColor = UIColor.yellow.cgColor
layer.fillRule =  kCAFillRuleNonZero
vi.layer.addSublayer(layer)

face.contentView.addSubview(vi)
return face

Answer 1

您将路径偏移两次:一次在路径本身中，一次在形状图层的框架中。您可能两者都不想要。

形状层的路径相对于形状层的坐标系，反过来，形状层的框架相对于其超层( ImageView 层)的坐标系。

对于这两个，您都指定了 ImageView 的框架，该值与其 super View 有一些偏移；单元格的内容 View 。

这对您的代码意味着两件事:

由于形状层的框架是相对于它的上层( ImageView 的层)，如果你想让形状层位于 ImageView 的左上角，那么你应该将形状层的框架设置为 ImageView 的边界(或者只是一个原点为零且与 ImageView 大小相同的矩形)。

layer.frame = vi.bounds

由于形状图层的路径是相对于形状图层的，如果您想绘制一个填充形状图层的圆，那么您的路径应该是形状图层边界中的椭圆。

let circle = UIBezierPath(ovalIn: layer.bounds)