Understand canvas PaperJS path JSON export

Question

When I export the path drawn on PaperJS, I got this:

["Path",
  {"applyMatrix":true,
  "segments":
    [
      [
        [255, 451.51563],
        [0, 0],
        [0, -2.09596]
      ],
      [
        [255, 439.51563],
        [-1.22916, 1.22916],
        [0.23839, -0.23839]
      ],
      [
        [269, 441.51563],
        [0, -0.70695],
        [0, 0]
      ]
    ],
    "strokeColor":[0, 0, 1]
  }
]

In segments object, there are segments composed of 3 arrays. I understand that the first arrays are the coordinates of successives points drawn. What are the last two arrays?

Josh Adams · Accepted Answer · 2018-01-18T01:15:03.713

1

These are the different points used to draw the path. In your example that may be hard to illustrate due to the path being drawn. In an easier example you can see point one is at x,y of 20,20 then the third point is moved 120 on the x axis and at 140,20.

The additional are used for handle in and handle out for example:

segments: [
    [[offset, y], null, vector.rotate(-90)],
    [[width / 2, y], vector.rotate(-180), vector],
    [[width - offset, y], vector.rotate(90), null]

http://paperjs.org/reference/path/#path-object

edited Jan 18 '18 at 01:15

answered Jan 18 '18 at 00:52

Josh Adams

2,113
2
13
25

Well, no that's what the FIRST arrays are. Let me clarify, I have actually drawn something similar to the doc, it is a triangle shape that I drawn composed of the points which are [255, 451] then [255, 439] and finally [269, 441]. Those values are the FIRST arrays in each array. The other values are closed to 0, what are they? It cannot be coordinates, there are also negative values... – vital Jan 18 '18 at 01:10
@lost17 updated my answer, please mark correct if solving your question. – Josh Adams Jan 18 '18 at 01:14
Great Josh, thanks, how did you find out? Did I miss it in the doc? – vital Jan 18 '18 at 01:21
There are examples you can view of each type. If you find a line or path example click on Source and you can view the code to draw the lines. Best of luck in your PaperJS work!! @lost17 – Josh Adams Jan 18 '18 at 01:21
do you know if there is a specific name (more mathematic name maybe?) to these handles? I know it has something to do with Bezier curve... Because I am trying to use the exported data from PaperJS as an input to Hummus PDF JS but the library handles curve in a very different way... – vital Jan 18 '18 at 02:23
you are correct about the Bezier Curve. I am not sure about the hummus pdf though. maybe you can provide example of what you are trying to do with input and expected output. I can try and help. – Josh Adams Jan 18 '18 at 03:14
I just created a new question for it: https://stackoverflow.com/questions/48313820/use-paperjs-export-path-with-hummus-pdf-js :) – vital Jan 18 '18 at 04:24
were you able to have a look at my new question? – vital Feb 04 '18 at 23:58
Sorry I just now took a look at it. I’ll give it a go tomorrow if no one has answered. Cheers! – Josh Adams Feb 05 '18 at 00:09

Understand canvas PaperJS path JSON export

1 Answers1