SpriteKit绘制颠倒文本

时间:2018-01-12 03:00:21

标签: ios sprite-kit

在游乐场,我正在尝试制作一个左上角的SpriteKit场景(如绘图程序)。一切都有效,除了翻转的文字。我需要将文本正面朝上。我错过了什么。如果我添加翻译和缩放,文本就会消失。

//: A SpriteKit based Playground

import PlaygroundSupport
import SpriteKit

class GameScene: SKScene
{
    static let width = 1000
    static let height = 1800
    override func didMove(to view: SKView)
    {
        self.backgroundColor = SKColor.white

        let cam = SKCameraNode()

        self.camera = cam
        cam.yScale = -1

        let node = SKSpriteNode(color: SKColor.yellow, size: CGSize(width: 500, height: 300))
        node.anchorPoint = CGPoint(x: 0, y: 0)
        node.position = CGPoint(x: 10, y: 10)

        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 200, height: 200))
        let img = renderer.image { ctx in
            let paragraphStyle = NSMutableParagraphStyle()
            paragraphStyle.alignment = .center

            let attrs = [NSAttributedStringKey.font: UIFont(name: "Futura", size: 72)!, NSAttributedStringKey.paragraphStyle: paragraphStyle]

            //ctx.cgContext.translateBy(x: 0, y:200)
            //ctx.cgContext.scaleBy(x: 0, y: -1)
            let string = "Test"
            string.draw(with: CGRect(x: 32, y: 32, width: 200, height: 200), options: .usesLineFragmentOrigin, attributes: attrs, context: nil)
        }

        let tex = SKTexture(image: img)
        let zzz = SKSpriteNode(texture: tex)
        zzz.anchorPoint = CGPoint(x: 0, y: 0)
        zzz.position = CGPoint(x: 10, y: 10)

        node.addChild(zzz)

//        let z = SKSpriteNode(color: SKColor.red, size: CGSize(width: 200, height: 150))
//        z.anchorPoint = CGPoint(x: 0, y: 0)
//        z.position = CGPoint(x: 10, y: 10)
//        node.addChild(z)
//
//        let q = SKSpriteNode(color: SKColor.green, size: CGSize(width: 80, height: 70))
//        q.anchorPoint = CGPoint(x: 0, y: 0)
//        q.position = CGPoint(x: 10, y: 10)
//        z.addChild(q)

        self.addChild(node)
        self.addChild(cam)
        cam.position = CGPoint(x: GameScene.width/2, y: GameScene.height/2)
    }
}

let sceneView = SKView(frame: CGRect(x:0 , y:0, width: 480, height: 640))
let scene = GameScene(size: CGSize(width: GameScene.width, height: GameScene.height))
scene.scaleMode = .aspectFit
sceneView.presentScene(scene)
PlaygroundSupport.PlaygroundPage.current.liveView = sceneView

更新

        ctx.cgContext.textMatrix = .identity
        ctx.cgContext.translateBy(x: 0, y: 200)
        ctx.cgContext.scaleBy(x: 1.0, y: -1.0)

现在将文本正面朝上绘制,但它以宽度的50%包裹

最终更新:

这是有效的,它的权利。字体大小与场景大小成比例(这是适合所有iOS设备的维度。

self.camera = cam
cam.yScale = -1

let boxSize = CGSize(width: 500, height: 500)

let node = SKSpriteNode(color: SKColor.yellow, size: boxSize)
node.anchorPoint = CGPoint(x: 0, y: 0)
node.position = CGPoint(x: 10, y: 10)

let renderer = UIGraphicsImageRenderer(size: boxSize)
let img = renderer.image { ctx in

    let bounds = CGRect(x: 16, y: 0, width: boxSize.width-32, height: boxSize.height)
    let string = "This is a long test with many lines."
    let range = NSRange( location: 0, length: string.count)
    guard let context = UIGraphicsGetCurrentContext() else { return }
    let path = CGMutablePath()
    path.addRect(bounds)
    let attrString = NSMutableAttributedString(string: string)
    attrString.addAttribute(NSAttributedStringKey.font, value: UIFont(name: "Futura", size: 84)!, range: range )
    let framesetter = CTFramesetterCreateWithAttributedString(attrString as CFAttributedString)
    let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attrString.length), path, nil)
    CTFrameDraw(frame, context)
}

1 个答案:

答案 0 :(得分:0)

您应该阅读https://www.raywenderlich.com/153591/core-text-tutorial-ios-making-magazine-app

CoreText在iOS中反转(技术上,旋转)文本。这可能是因为它与使用不同坐标系的MacOS共享。 (虽然为什么他们无法解决这个问题,我不知道)。

无论原因是什么,你都没有做错任何事,iOS正在做错事。简单的解决方案(根据链接文章)是在绘制文本之前简单地旋转文本。

相关问题