CODEWITHSUNDEEP
javascriptvector-graphics
piLeoni
piLeoni

Reputation: 151

How can I convert vector paths into points array with javascript?

I'm trying to make the jump from processing to javascript. Usually I work on drawings machines, and to me are important two things: convert vector files into a series of points and send them via serial.

Right now I'm working on the first thing, but I can not find solutions. On processing, use Geomerative library, and there is a command called: getPointsInPaths

Do you know a tool to do the same thing on JavaScript? I tried to look paperjs and raphaeljs, but without finding what I needed. Thank you all!

Upvotes: 0

Views: 2319

Answers (1)

Chris Wilson
Chris Wilson

Reputation: 6719

Raphael makes it very easy to either extract the vertices of a shape or sample its points at regular intervals:

Working example:

enter image description here

// draw the shape normally
var shape = paper.path(path_str).transform("T-550,-50");

// get vertices of shape
shape.attrs.path.forEach(function(vertex) {
    paper.circle(vertex[1],vertex[2],1)
        .attr("fill", "black")
        .attr("stroke", "none")
        .transform("T-400,-50");    
});

// get points at regular intervals
for (var c = 0; c < Raphael.getTotalLength(path_str); c += 5) {
    var point = Raphael.getPointAtLength(path_str, c);
    console.log(point);
    paper.circle(point.x,point.y,1)
        .attr("fill", "black")
        .attr("stroke", "none")
        .transform("T-250,-50");    

}

Upvotes: 1

Related Questions