bezier.toSVG() returns malformed SVG path string. about bezierjs HOT 14 CLOSED

alright, added a Bezier.fromSVG(...) that you can use to build a curve off of an SVG string now, too. And for good measure the project's on npmjs.com now too as https://www.npmjs.com/package/bezier-js

from bezierjs.

I have been using this..

pointsToSVGPathString: function(points){
    var str = "";
    points.forEach(function(point, i){
        if(i==0) str+="M";
        else if(i==1 && points.length > 2) str+="C";
        else str+=" ";
        str = str + point.x + " " + point.y;
    });
    return str;
}

Hope this helps.

from bezierjs.

looks like the trailing space was missing in https://github.com/Pomax/bezierjs/blob/gh-pages/lib/bezier.js#L502 - note that the spaces around operators (like M 123 234 or ... 12 C 34 45 ... are considered perfectly fine according to the spec)

from bezierjs.

Updated the code to do something more sensible, by simply aggregating all the terms and joining them on a single space. Should work better now?

from bezierjs.

Thanks, all looks good now. 👍

from bezierjs.

With SVG string output, it would be awesome if I could do the reverse:

var bezier = new Bezier("M 1031 325 C 1031 500 1271 530 1250 417");

or

bezier.update("M 1031 325 C 1031 500 1271 530 1250 417");

from bezierjs.

hm, not a bad idea, although also something that you can do pretty easily outside of the library right now with:

// assuming absolute SVG:
var svgstring = "M 1031 325 C 1031 500 1271 530 1250 417";
var coords = svgstring.match(/(\d+) (\d+) /g).map(function(v) {
  return { x: v[0], y: v[1] };
});
return new Bezier(coords)

For relative coords things get trickier, but only a little (exploiting sort()'s ability to iterate over two elements rather than a single one to track and correct the relative position)

from bezierjs.

Really curious about what kind of abuse you are talking re sort() :).

from bezierjs.

var svgstring = "m 1031 325 c 1031 500 1271 530 1250 417";
var list = svgstring.match(/(\d+) (\d+) /g).map(function(v) {
  v = v.split(" ").map(function(v) { return parseFloat(v); });
  return { x: v[0], y: v[1] };
});
var coords = [ list[0] ];
list.sort(function(a,b) {
  b.x += a.x;
  b.y += a.y;
  coords.push({ x: b.x, y: b.y });
});

resolving relative by simply adding the new value to the old value

from bezierjs.

Does sort() in JS make any guarantees about in what order it compares things?!

from bezierjs.

officially? no. But I haven't seen a single case where it reorders based on "equal" in any browser... yet =) I was hoping to use .reduce for the same purposes, but that only tracks the running value, not the actual object in the list.

It's not too much more code to use a plain for loop, but this was a fun little hack =P

from bezierjs.

officially? no. But I haven't seen a single case where it reorders based on "equal" in any browser... yet =)

:)

I was hoping to use .reduce for the same purposes, but that only tracks the running value, not the actual object in the list.

I don't understand why you can't do the same with reduce. Like:

list.reduce(function(a,b) {
  b.x += a.x;
  b.y += a.y;
  coords.push({ x: b.x, y: b.y });
  return b;
});

It's not too much more code to use a plain for loop, but this was a fun little hack =P

from bezierjs.

oh right, you could just return b. "Derp".

from bezierjs.

👍 You rock Pomax!

from bezierjs.