Paper.js Z-Index and Binding Object

Question

I am studing paper.js and don´t found how resolve my problem. See my application test in: http://www.plugbox.com.br/reta.htm

The red circle covers only the Y axis and blue circle covers only the X axis and the starting point and the end point of the line follow the red and blue points.

But the line is in front of circles. How do I set the "z-index" line by placing it in a layer behind the points?

Another question is:

How do I put a third point, for example, in the middle of the line and make it draggable only on the line?

Thank´s!

Answer 1

But the line is in front of circles. How do I set the "z-index" line by placing it in a layer behind the points?

Every item has methods:
insertAbove(item) //Inserts this item above the specified item.
insertBelow(item) //Inserts this item below the specified item.
sendToBack() //Sends this item to the back of all other items within the same parent.

source

Answer 2

It's easy. Draw the line first and the dots afterward.Just with a real-life painting: what you draw last is atop everything you have drawn first. Plain SVG behaves the same btw.