3

I am trying to convert a array of points into a curve/path in SVG.

I have something like [[0,0], [100,50], [50,100], [350,50]] and would like to convert that to a curve. I supose it has to be a path, with with the control points for the curves.

I tested appending new path to the svg with

var svg = document.querySelector('svg');
var points = [
    [100, 100],
    [200, 150],
    [100, 200],
    [100, 300],
    [300, 300]
];
points.forEach(function (point, i, points) {
    if (!i) return;
    var start = points[i-1];
    var end = point;

    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    var x = Math.round((start[0] + end[0]) / 1.5);
    var controlA = x + ',' + start[1];
    var controlB = x + ',' + end[1];

    path.setAttribute('d', 'M' + start.join(',') + ' C' + controlA + ' ' + controlB + ' ' + end.join(','));
    path.setAttribute('stroke', 'black');
    path.setAttribute('stroke-width', 1);
    path.setAttribute('fill', 'none');
    svg.appendChild(path);
});

But that didn't work as expected... Any suggetion are apreciated. What i would like to achieve is a more "hand drawed" curve, with no har corners...

http://jsfiddle.net/3vgyf1qm/1/

Rikard
  • 7,485
  • 11
  • 55
  • 92
  • possible duplicate of [How can I fit a Bézier curve to a set of data?](http://stackoverflow.com/questions/6299019/how-can-i-fit-a-b%c3%a9zier-curve-to-a-set-of-data) – Paul LeBeau Mar 05 '15 at 05:19
  • hi @PaulLeBeau, thanks for the pointer. Still I would like to be able to do that in JavaScript and that question is about Python. – Rikard Mar 05 '15 at 05:51
  • The basic problem is converting a list of points to a set of bezier curves. That question has multiple pointers to solving that problem. – Paul LeBeau Mar 05 '15 at 10:04

0 Answers0