Question

我正在制作一个应用程序，包括一些客户的呼吸技巧。他想要的是在中间有一个圆圈。呼吸时呼吸越大，呼吸越小。问题是，他希望在中间有一个很酷的动画圈，而不仅仅是标准的。我在YouTube上向他展示了这张照片：

视频中使用的代码如下所示：

func drawRotatedSquares() {
    UIGraphicsBeginImageContextWithOptions(CGSize(width: 512, height: 512), false, 0)
    let context = UIGraphicsGetCurrentContext()

    context!.translateBy(x: 256, y: 256)
    let rotations = 16
    let amount = M_PI_2 / Double(rotations)

    for i in 0 ..< rotations {
        context!.rotate(by: CGFloat(amount))
        //context!.addRect(context, CGRect(x: -128, y: -128, width: 256, height: 256))
        context!.addRect(CGRect(x: -128, y: -128, width: 256, height: 256))
    }

    context!.setStrokeColor(UIColor.black as! CGColor)

    let img = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    imageView.image = img
}

但如果我运行它，我的模拟器只显示一个白色屏幕。如何将这个圈子放入我的Swift 3应用程序中以及代码如何？是否有可能不在ImageView中显示它，而只是在视图中显示它？

非常感谢！

Answer 1

以下是UIView子类的实现。

设置：

将此类添加到Swift项目中。
将UIView添加到故事板并将课程更改为Circle。
为viewController添加插座
```
@IBOutlet var circle: Circle!
```

更改乘数的值以更改圆的大小。

circle.multiplier = 0.5  // 50% of size of view

class Circle: UIView {
    var multiplier: CGFloat = 1.0 {
        didSet {
            setNeedsDisplay()
        }
    }

    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()!

        // Calculate size of square edge that fits into the view   
        let size = min(bounds.width, bounds.height) * multiplier / CGFloat(sqrt(2)) / 2

        // Move origin to center of the view            
        context.translateBy(x: center.x, y: center.y)

        // Create a path to draw a square    
        let path = UIBezierPath()
        path.move(to: CGPoint(x: -size, y: -size))
        path.addLine(to: CGPoint(x: -size, y: size))
        path.addLine(to: CGPoint(x: size, y: size))
        path.addLine(to: CGPoint(x: size, y: -size))
        path.close()

        UIColor.black.setStroke()

        let rotations = 16
        let amount = .pi / 2 / Double(rotations)

        for _ in 0 ..< rotations {
            // Rotate the context
            context.rotate(by: CGFloat(amount))

            // Draw a square
            path.stroke()
        }
    }
}

此处它正在Playground中运行：

Answer 2

您发布了一种生成UIImage的单一方法，并将其安装在图像视图中。如果您没有屏幕上的图像视图，那么它将不会显示。

如果在视图控制器中创建图像视图并将插座连接到图像视图，则上面的代码应将图像视图安装到图像中并在屏幕上绘制。

您可以重写您发布的代码作为UIView自定义子类的draw(_:)方法，在这种情况下，您将摆脱上下文设置和UIImage内容，并简单地在当前上下文中绘制。我建议您使用UIView自定义draw(_:)方法进行搜索，以获得更多指导。

如何在UIView中使用此圆绘图代码？

2 个答案: