CAShapeLayer 和 SpriteKit

Posted 2023-02-23

【中文标题】CAShapeLayer 和 SpriteKit

【英文标题】：CAShapeLayer and SpriteKit

【发布时间】：2017-12-03 06:54:38

【问题描述】：

我正在尝试利用 CAShapeLayer 中的路径动画功能，该功能在 SpriteKit 中不可用，因此必须将使用 CAShapeLayer 绘制的对象与同一视图中的 SpriteKit 对象结合起来。

坐标系似乎是逆向的：CAShapeLayer 似乎有 +ve y 轴指向下方，而 SKScene 则指向上方。

下面是一个简单的 XCODE 操场，它尝试在 0,0 到 200,100 之间绘制一条黄线，并用一条较粗的红线对其进行遮蔽。

import SpriteKit
import PlaygroundSupport

let bounds = CGRect(x: 0, y: 0, width: 400, height: 200)
let view = SKView(frame: bounds)
view.backgroundColor = UIColor.lightGray

PlaygroundPage.current.liveView = view

// Create SK Scene
let scene = SKScene(size: CGSize(width: 400, height: 200))
scene.scaleMode = SKSceneScaleMode.aspectFit
view.presentScene(scene);

// Define the path
let path: CGMutablePath = CGMutablePath();
path.move(to: CGPoint(x:0, y:0))
path.addLine(to: CGPoint(x:200, y:100))

// Use CAShapeLayer to draw the red line
var pathLayer: CAShapeLayer = CAShapeLayer()
pathLayer.path = path  
pathLayer.strokeColor = UIColor.red.cgColor
pathLayer.fillColor = nil
pathLayer.lineWidth = 4.0
pathLayer.lineJoin = kCALineJoinBevel
pathLayer.zPosition = 1;
view.layer.addSublayer(pathLayer);

//Use SKShapeNode to draw the yellow line
let pathShape: SKShapeNode = SKShapeNode(path: path);
pathShape.strokeColor = .yellow;
pathShape.lineWidth = 1.0;
pathShape.zPosition = 10;
scene.addChild(pathShape);

我预计黄线与红线重合。而黄线和红线则呈现为镜像。

有没有重新定义 CAShapeLayer 坐标系指向 +ve Y 轴向上？

【问题讨论】：

我能够通过用仿射变换反转 CAShapeLayer 使线条重合：var mirror = CGAffineTransform(scaleX: 1.0, y: -1.0); var inverse = path.copy(using: &mirror)!;

【参考方案1】：

不，正如文档中所写，这是它的工作原理，您可以反转坐标以符合您的要求..

Sprite kit docs:

单位坐标系将原点放置在框架的左下角，将（1,1）放置在框架的右上角。 sprite 的锚点默认为 (0.5,0.5)，对应于帧的中心。

The rest of ios:

iOS。默认坐标系的原点位于绘图区域的左上角，正值从它向下和向右延伸。 您无法更改 iOS 中视图坐标系的默认方向——也就是说，您无法“翻转”它。