transfer opentype to paper.js, bézier curve problem

Question

I am trying to transfer a font from opentype to a paper.js path object. I am using opentype.js to get the points out of the letter and than i try to make a new paper path out of this points.

Sounds simple, but somehow i can not work out this curves. I am trying to find how this is done with the examples and the reference of paper.js. but i can not find it.

from opentype.js i get paths like this:

{type: "C", x: 56.3, x1: 58.4, x2: 56.3, y: 111.9, y1: 90, y2: 97.80000000000001}

(here x/y is the basic point and the x1/y1 and x2/y2 are its related point handlers.)

and now i tried to put this into a paper.js path:

var segments = [];

    segments.push(new Segment(
        new Point(119,111.30000000000001)
        ));
    segments.push(new Segment(
        new Point(119,284.1)
        ));
    segments.push(new Segment(
        new Point(139.7,302.7),
        new Point(119,300),
        new Point(125.89999999999999,302.7)
        ));
    segments.push(new Segment(
        new Point(161,284.1),
        new Point(150.2,302.7),
        new Point(161,300.3)
        ));

        var path = new Path(segments);
        path.strokeColor = "black"

All the non curved paths are correct. but the handlers are shown with no logic position...

anyone any ideas?

Answer 1

Segment.handleIn and Segment.handleOut are coordinates relative to the anchor point. Make sure you give relative coordinates for handles, not absolute.

An easy solution would be to use OpenType.js to convert your font to SVG width Path.toSVG(decimalPlaces), then import it in paper.js with importSVG(svg[, options]).