在 Watch App 中创建进度圈作为 WKInterfaceImage [英] Creating progress circle as WKInterfaceImage in Watch App

问题描述

我正在尝试为我的应用程序的 Apple Watch 版本创建一个进度圈.我知道我们无法使用 UIViews(这会让事情变得更容易！)所以我正在寻找替代方案.

I am trying to create a progress circle for the Apple Watch version of my app. I know that we aren't able to use UIViews (which would make things so much easier!) so I am looking for alternatives.

基本上，我想创建以下原型之一:

Basically, I would like to create one of these prototypes:

我希望做的事情是将背景图层添加为普通的 WKInterfaceImage，然后将顶部的进度箭头/线添加为 WKInterfaceImage，根据计算出的百分比绕圆旋转.

The way I was hoping to do things was to add the background layers as a normal WKInterfaceImage and then the progress arrow/line on top as a WKInterfaceImage that rotates around the circle based on the percentage calculated.

我基本上计算了百分比，我正在寻找的是有关旋转箭头的数学代码的一些帮助.

I have the percentage calculated so basically, what I am looking for is some help with the math code for rotating the arrow.

有谁知道这是否可行，如果可以，有人可以帮助我吗?我不会在应用程序运行时更新圆圈；只需在 Watch App 启动时更新以与 iOS 版本相对应即可.

Does anyone know if this is possible, and could anyone help me out if so? I'm not trying to update the circle while the app is running; it just needs to update when the Watch App launches to correspond with the iOS version.

谢谢！

推荐答案

从 watchOS 3 开始，可以使用 SpriteKit.

As of watchOS 3 it is possible to use SpriteKit.

SKShapeNode 可以绘制形状，因此可以创建径向环.

SKShapeNode can draw shapes, so it is possible to create radial rings.

1. 将 WKInterfaceSKScene 添加到情节提要中的界面控制器，并通过插座将其连接起来.

2. 在接口控制器的awake方法中设置

1. Add a WKInterfaceSKScene to your interface controller in storyboard and hook it up through an outlet.

2. Set it up in the awake method of the interface controller

override func awake(withContext context: Any?) {
   super.awake(withContext: context)
   scene = SKScene(size: CGSize(width: 100, height: 100))
   scene.scaleMode = .aspectFit
   interfaceScene.presentScene(scene)
}

创建一个形状节点并将其添加到场景中

Create a shape node and add it to the scene

let fraction: CGFloat = 0.75
let path = UIBezierPath(arcCenter: .zero,
                         radius: 50,
                         startAngle: 0,
                         endAngle: 2 * .pi * fraction,
                         clockwise: true).cgPath

let shapeNode = SKShapeNode(path: path)
shapeNode.strokeColor = .blue
shapeNode.fillColor = .clear
shapeNode.lineWidth = 4
shapeNode.lineCap = .round
shapeNode.position = CGPoint(x: scene.size.width / 2, y: scene.size.height / 2)
scene.addChild(shapeNode)

这篇关于在 Watch App 中创建进度圈作为 WKInterfaceImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！