在SKShapeNode下添加渐变

Question

我正在watchKit中使用这样的图表。

demo

我已根据自定义数据成功绘制了如上图所示的折线图，但我无法像上图那样在线图下方绘制渐变。

这里我做了什么：

 var points = [CGPoint(x: 0, y: 20),
                      CGPoint(x: 10, y: 10),
                      CGPoint(x: 25, y: 25),
                      CGPoint(x: 45, y: 5),
                      CGPoint(x: 60, y: 10),
                      CGPoint(x: 75, y: 0),
                      CGPoint(x: 90, y: 25),
                      CGPoint(x: 110, y: 0),
                      CGPoint(x: 125, y: 25)]
        let shape = SKShapeNode(splinePoints: &points,
                                          count: points.count)
        shape.strokeColor = UIColor.white
        shape.lineWidth = 2

        let gradientShader = SKShader(source: "void main() {" +
            "float normalisedPosition = v_path_distance / u_path_length;" +
            "gl_FragColor = vec4(normalisedPosition, normalisedPosition, 0.0, 1.0);" +
            "}")
       // shape.strokeShader = gradientShader

        addChild(shape)

这将代码将绘制这样的图形。 （就像图表是完美的但问题是渐变的，我也试过SKShader）。

Answer 1

您应该查看一个出色的教程，该教程似乎与此问题有关，Ray Wenderlich's site

链接位置的具体说明在标题为“渐变图”的部分

您需要将路径设置为剪切路径，然后使用线性渐变填充路径下方的区域。