在Sprite Kit(Swift)中绘制一个环形文本

5

我想画一个圆并在其中放置文本。

如果我移动或调整圆的大小,文本也会随之移动或调整大小。

我想要这个效果

        var color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)
        var Circle = SKShapeNode(circleOfRadius: 100 )
        Circle.position = CGPointMake(frame.midX, frame.midY)
        Circle.strokeColor = SKColor.blackColor()
        Circle.glowWidth = 1.0
        Circle.fillColor = color

        let myLabel = SKLabelNode(fontNamed:"Chalkduster")
        myLabel.text = "Hello, World!";
        myLabel.fontSize = 60;
        myLabel.position = CGPointMake(frame.midX, frame.midY)
        myLabel.fontColor = UIColor.blackColor()

        self.addChild(Circle)

你想把 myLabel 显示成圆形吗? - Dharmesh Kheni
是的,我可以同时移动圆形和标签。 - nmokkary
你需要更清楚地了解你的目标。你想让文本围绕圆圈的外部弯曲吗?你想让它保持垂直,但是包裹以填充空间吗? - Duncan C
我想把一段文字写成一个圆形,并且这段文字是圆形的一部分。对于移动和操作,我只需要处理圆形即可。抱歉我的英语不是很好。 - nmokkary
我希望文本不要超出圆形。如果文本比圆形大,我想要将其裁剪(遮罩)。 - nmokkary
4个回答

8

一种同时拖动两个元素的方法是将它们添加到同一个视图中,然后使用触摸事件更改两者的位置,例如下面的代码所示。

import SpriteKit

class GameScene: SKScene {

    var deltaPoint = CGPointZero
    let myLabel = SKLabelNode(fontNamed:"Chalkduster")
    var Circle = SKShapeNode(circleOfRadius: 100 )

    override func didMoveToView(view: SKView) {
        /* Setup your scene here */
        var color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)

        Circle.position = CGPointMake(frame.midX, frame.midY)
        Circle.strokeColor = SKColor.blackColor()
        Circle.glowWidth = 1.0
        Circle.fillColor = color

        myLabel.text = "Hello, World!";
        myLabel.fontSize = 20
        myLabel.position = CGPointMake(Circle.frame.midX, Circle.frame.midY)
        myLabel.fontColor = UIColor.blackColor()

        // Add them into same scene
        self.addChild(Circle)
        self.addChild(myLabel)

    }

    override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {

        if let touch = touches.first as? UITouch {
            let currentPoint = touch.locationInNode(self)
            let previousPoint = touch.previousLocationInNode(self)
            deltaPoint = CGPointMake(currentPoint.x - previousPoint.x, currentPoint.y - previousPoint.y)
        }

    }

    override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {

        deltaPoint = CGPointZero
    }

    override func touchesCancelled(touches: Set<NSObject>!, withEvent event: UIEvent!) {

        deltaPoint = CGPointZero
    }

    override func update(currentTime: CFTimeInterval) {
        /* Called before each frame is rendered */
        var newPoint = CGPointMake(self.myLabel.position.x + self.deltaPoint.x, self.myLabel.position.y + self.deltaPoint.y)

        // you can drag both item at same time
        myLabel.position = newPoint
        Circle.position = newPoint

        deltaPoint = CGPointZero
    }
}

在重写的函数touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent)中出现了错误:使用未声明类型“Set”。这个错误是什么意思? - nmokkary
你可以在这里找到旧版Xcode的方法:http://www.ioscreator.com/tutorials/using-labels-spritekit-swift - Dharmesh Kheni

4

更新: 使用完整的例子。

我不是SpritKit的用户,但我相信每个节点都有一个.addChild()。 因此,将其作为子节点添加到您的圆形应该是可能的:

var color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)
var Circle = SKShapeNode(circleOfRadius: 100 )
Circle.position = CGPointMake(frame.midX, frame.midY)
Circle.strokeColor = SKColor.blackColor()
Circle.glowWidth = 1.0
Circle.fillColor = color

let myLabel = SKLabelNode(fontNamed:"Chalkduster")
myLabel.text = "Hello, World!";
myLabel.fontSize = 60;
// Using half of the circle (center point)
myLabel.position = CGPointMake(Circle.frame.midX, Circle.frame.midY)
myLabel.fontColor = UIColor.blackColor()

Circle.addChild(myLabel)
self.addChild(Circle)

位置将相对于圆形框架。


myLabel.position = CGPointMake(frame.midX, frame.midY)会使标签在屏幕上方/左侧的圆形顶部居中显示。 - Mikael Hellman

2
在Swift 3中,将标签作为圆形的子元素,并使标签的中心对齐以使其居中于圆形中。- Dharmesh Kheni的回答
import SpriteKit

class GameScene: SKScene {

    var deltaPoint = CGPoint.zero
    let myLabel = SKLabelNode(fontNamed:"Chalkduster")
    var circle = SKShapeNode(circleOfRadius: 100 )

    override func didMove(to view: SKView) {

        let color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)

        circle.position = CGPoint(x: frame.midX, y: frame.midY)
        circle.strokeColor = .black
        circle.glowWidth = 1.0
        circle.fillColor = color

        myLabel.text = "Hello, World!";
        myLabel.fontSize = 20
        myLabel.horizontalAlignmentMode = .center
        myLabel.verticalAlignmentMode = .center
        myLabel.position = CGPoint(x:circle.frame.width/2, y: circle.frame.height/2)
        myLabel.fontColor = .black

        // Add them into same scene
        self.addChild(circle)
        circle.addChild(myLabel)

    }

    override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {

        if let touch = touches.first as? UITouch {
            let currentPoint = touch.location(in: self)
            let previousPoint = touch.previousLocation(in: self)
            deltaPoint = CGPoint(x: currentPoint.x - previousPoint.x,y: currentPoint.y - previousPoint.y)
        }

    }

    override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {

        deltaPoint = CGPoint.zero
    }

    override func touchesCancelled(touches: Set<NSObject>!, withEvent event: UIEvent!) {

        deltaPoint = CGPoint.zero
    }

    override func update(currentTime: CFTimeInterval) {
        /* Called before each frame is rendered */
        let newPoint = CGPoint(x: self.myLabel.position.x + self.deltaPoint.x,y: self.myLabel.position.y + self.deltaPoint.y)

        // you can drag both item at same time
        myLabel.position = newPoint
        circle.position = newPoint

        deltaPoint = CGPoint.zero
    }
}

1
你应该根据圆的大小来相应调整标签字体大小。
这是创建按钮的函数:
func createCircleButton(position: CGPoint, buttonSize: CGFloat, yourText: String) {

    let circle = SKShapeNode( circleOfRadius: buttonSize)
    circle.position = position
    circle.fillColor = SKColor.blueColor()

    let label = SKLabelNode(fontNamed:"ArialMT")
    label.text = yourText
    label.fontSize = circle.frame.size.height / 6;
    label.fontColor = SKColor.whiteColor()

    circle.addChild(label)
    self.addChild(circle)

}

将它添加如下所示:
self.createCircleButton(CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2), buttonSize: self.frame.size.height / 5, yourText: "Your text")

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接