Add gradient below SKShapeNode

Question

I am working on a graph like this in watchKit.

I have successfully draw line graph like above image according to custom data but I am unable to draw gradient below line graph like above image.

here what I have done:

 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)

This will code will draw a graph like this. (like graph is perfect but issue is in gradient also I have tried SKShader).

Well a good way to cheat is to repeatedly add the same graph by doing a loop where you decrease the y value on each iteration and change the color to suit your gradients — Knight0fDragon, Feb 07 '18 at 18:24
@Knight0fDragon but i guess that will consume much memory on watch. — Tejas Ardeshna, Feb 09 '18 at 04:35
Not if you convert to a sprite node and share the texture through all nodes — Knight0fDragon, Feb 09 '18 at 04:35
@Knight0fDragon Can you please show me any example of that so i can get idea. — Tejas Ardeshna, Feb 09 '18 at 04:42

score 0 · Answer 1 · answered Jul 19 '18 at 14:07

You should review an excellent tutorial that seems to be similar to this problem on Ray Wenderlich's site

The specific instructions from the linked location are in section titled "A Gradient Graph"

You'll need to make your path a clipping path, then fill the area under the path with a linear gradient.

Add gradient below SKShapeNode

1 Answers1