在 SKShapeNode 下方添加渐变答案

【问题标题】：Add gradient below SKShapeNode在 SKShapeNode 下方添加渐变
【发布时间】：2018-02-06 13:14:51
【问题描述】：

我正在watchKit 中处理这样的图表。

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

我做了什么：

 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）。

【问题讨论】：

如果您有任何解决方案，请告诉我
一个很好的作弊方法是通过循环重复添加相同的图形，在每次迭代中减小 y 值并更改颜色以适应渐变
@Knight0fDragon 但我想这会消耗很多内存。
如果您转换为精灵节点并通过所有节点共享纹理则不会
@Knight0fDragon 你能告诉我任何例子，这样我就能明白了。

标签： sprite-kit swift4 skspritenode

【解决方案1】：

您应该在Ray Wenderlich's site 上查看与此问题类似的优秀教程

链接位置的具体说明在标题为“梯度图”的部分中

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

【讨论】：