Comments (14)
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.
Related Issues (20)
- _lut caching doesn't work: steps is off by one HOT 5
- Release v6.1.2 broken HOT 3
- Why get(t = 0.5) point is not the middle point of the curve? HOT 5
- Find optmal D1 - Bezier.cubicFromPoints HOT 1
- PolyBezier is not exported correct for ES Module. HOT 3
- Rational Bezier Curve Support HOT 1
- Example usage of `dist/bezier.js` HOT 4
- How to make a "strict" version of bezier.project(point)? HOT 2
- Should bezier.lineIntersects(line) work for line-line intersections? HOT 3
- intersects bug Bezier to Bezier HOT 3
- Suspicious line in `utils.compute()` HOT 2
- The intersection of the two bezier is empty HOT 10
- The intersection of two identical curves HOT 2
- Intersect line method does not always return existing intersections HOT 6
- Ability to get and estimate the centerline of a list of 3D points HOT 3
- PR for extending API to interpolate values along curve and find point on curve at distance?
- Artifact when offsetting an SVG path
- Split curves do not follow old curve. HOT 2
- Missing LICENSE file HOT 1
- How to Find Y-Coordinate for a Given X-Coordinate on a Bezier Curve HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bezierjs.