两点间的正弦波UIBezierPath

Question

如何在两点之间创建一个正弦波的路径？

我可以从原点创建一个正弦波的路径，但不确定如何转换方向，以便正弦波在目标CGPoint处结束。

我想使用SKAction.followPath沿路径对SKNode进行动画处理

Answer 1

考虑这一点的最简单方法是变换坐标系，按两点之间的角度旋转，按两点之间的距离缩放，并按第一个点平移(假设正弦从0，0开始)。

OP指定他不仅要绘制曲线(在这种情况下，所有人需要做的就是将转换应用于图形上下文)，而是要在SpriteKit SKAction.followPath调用中使用曲线，因此转换必须应用于路径中的坐标，而不是上下文。

这是一个使用CGPath而不是UIBezierPath的解决方案，但它们是等效的，您可以通过let uip = UIBezierPath(cgPath: path)简单地获取UI版本。(我更喜欢CoreGraphics，因为它们是跨平台的)。

操场代码..。

class MyView: UIView {

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }

        context.setFillColor(UIColor.red.cgColor)
        context.fill(self.bounds)

        // Calculate the transform
        let p1 = CGPoint(x: 100, y: 100)
        let p2 = CGPoint(x: 400, y: 400)
        let dx = p2.x - p1.x
        let dy = p2.y - p1.y
        let d = sqrt(dx * dx + dy * dy)
        let a = atan2(dy, dx)
        let cosa = cos(a) // Calculate only once...
        let sina = sin(a) // Ditto

        // Initialise our path
        let path = CGMutablePath()
        path.move(to: p1)

        // Plot a parametric function with 100 points
        let nPoints = 100
        for t in 0 ... nPoints {
            // Calculate the un-transformed x,y
            let tx = CGFloat(t) / CGFloat(nPoints) // 0 ... 1
            let ty = 0.1 * sin(tx * 2 * CGFloat.pi ) // 0 ... 2π, arbitrary amplitude
            // Apply the transform
            let x = p1.x + d * (tx * cosa - ty * sina)
            let y = p1.y + d * (tx * sina + ty * cosa)
            // Add the transformed point to the path
            path.addLine(to: CGPoint(x: x, y: y))
        }

        // Draw the path
        context.setStrokeColor(UIColor.blue.cgColor)
        context.addPath(path)
        context.strokePath()
    }
}

let v = MyView(frame: CGRect(origin: CGPoint(x: 0, y:0), size: CGSize(width: 500, height: 500)))

​

​

Answer 2

不是很清楚你想要什么，但这里有一种可能性，假设你想要一个倾斜的罪过曲线：

假设起点是(0，0)，终点是(x，y)。

设L为原点与点之间的距离:l= sqrt(x^2 + y^2)

编写一个从0开始到L结束的循环，递增dL和运行和l(最终运行在0和L之间)。这个循环将允许我们在您的Bezier上创建点。

那么sin图的x坐标将是: x_P =l* cos(theta)，范围从0到L* cos(theta) =x

为了得到y坐标，我们在原点和点之间的斜线上添加一个具有正确周期的正弦函数: y_P =l* sin (θ)+ sin(2 * PI *l/ L)

请注意，在L =L处，(x_P，y_P) = (x，y)，这是它应该是的。

这是你想要的吗？它不是旋转，所以当角度θ很大时，它不会表现出来。