aab29 / bezier.dart Goto Github PK
View Code? Open in Web Editor NEWA 2D Bézier curve math library written in Dart
License: BSD 2-Clause "Simplified" License
A 2D Bézier curve math library written in Dart
License: BSD 2-Clause "Simplified" License
I'm using this library to create a path that consists of multiple curves, the issue is that when I draw the path using CustomPainter cubicTo
var cubic = GameObject.shared.cubicBeziers;
final Path path = Path();
for (var i = 0; i < cubic.length; i++) {
drawCurve(cubic[i], path);
}
path.close();
canvas.drawPath(path, _paint);
void drawCurve(CubicBezier curve, Path path) {
vectorMath.Vector2 point0 = curve.startPoint;
vectorMath.Vector2 point1 = curve.points[1];
vectorMath.Vector2 point2 = curve.points[2];
vectorMath.Vector2 point3 = curve.endPoint;
path.moveTo(point0.x, point0.y);
path.cubicTo(point1.x, point1.y, point2.x, point2.y, point3.x, point3.y);
}
And when I follow the path via percentages, they have a difference, especially on the y
axis
The issue can be seen here:
whoops ignore this i had bezier_chart: ^1.0.15 in my pubspec
lib/main.dart:519:11: Error: No named parameter with the name
'displayPreviousDataPointWhenNoValue'
Hi looking forward to support null safety! Since flutter has make null safety stable today!
Hi thanks for this! I can't get EvenSpacer to work... dots should follow the edge.
@override
void paint(Canvas canvas, Size size) {
final curve = CubicBezier([
Vector2(0, size.height),
Vector2(size.width/8, size.height/8),
Vector2(size.width, size.height/2),
Vector2(size.width, size.height)
]);
final points = curve.points;
final path = Path()..moveTo(points[0].x, points[0].y)..cubicTo(curve.points[1].x, curve.points[1].y, curve.points[2].x,
curve.points[2].y, curve.points[3].x, curve.points[3].y);
canvas.drawPath(path, Paint()..color=Color.fromRGBO(0, 150, 255, 1));
final es = EvenSpacer.fromBezier(curve,intervalsCount: 40);
final count = 40;
final eventValues = es.evenTValues(parametersCount: count);
final paint = Paint();
for (int i=0;i<eventValues.length;i++) {
print(eventValues[i]);
final pt = i;
final x1 = pt * size.width/count;
//double bla =(es.evenTValueAt(eventValues[i])) * size.height;
double bla =(eventValues[i]) * size.height;
canvas.drawCircle(Offset(x1, bla), 4, paint);
}
}
Given this piece of code:
import "package:vector_math/vector_math.dart";
import "package:bezier/bezier.dart";
void main() {
// try to get intersection of zero axis with bezier -> no luck, intersections are empty
CubicBezier bezier1 = CubicBezier([Vector2(-214.5, 80.0), Vector2(52.0, 80.0), Vector2(52.0, 530.0), Vector2(214.5, 530.0)]);
Vector2 start1 = Vector2(0.0, 0.0);
Vector2 end1 = Vector2(0.0, 1080.0);
List<double> intersections1 = bezier1.intersectionsWithLineSegment(start1, end1);
print("bezier1 intersections= $intersections1");
// now try to translate this situation by 429px to right -> it's OK
CubicBezier bezier2 = CubicBezier([Vector2(429.0 - 214.5, 80), Vector2(429.0 - 52.0, 80), Vector2(429.0 + 52.0, 530), Vector2(429.0 + 214.5, 530)]);
Vector2 start2 = Vector2(429, 0);
Vector2 end2 = Vector2(429, 1080);
List<double> intersections2 = bezier2.intersectionsWithLineSegment(start2, end2);
print("bezier2 intersections= $intersections2");
}
it's output is:
bezier1 intersections= []
bezier2 intersections= [0.4999999999999998]
But both intersections should be the same.
This is how it look like in canvas 429x1080px
(it is cropped by canvas)
SDK version 2.1.0
Bezier library version:1.1.1
Hi,
How do I use this in a Widget in Flutter?
Thank you for writing this awesome library , but I don't know Dart , any chance to convert this library to apple Swift ?
I want to realize such line effect :
(Draw with Adobe Flash CC Pen Tool , single line but with tapered width effect)
At first, I tried to use 2 Cubic Bezier Curves, but seems it's not so simple (I have no idea how to adjust that 4 control points, and even I don't know that if this is possible)
so now I'm trying to use single curves , and split it to segments (same length) ,and draw those segments with different width from big to small (maybe bad performance ? since the line(s) will be animated , any suggest ? )
Hi! Thanks for the great package. It works very well and helps a lot. However, I recognized intersectionsWithCurve method was not working in greater values. Here are the details:
Scenario 1 (Works):
final line =
CubicBezier([Vector2(100, 100), Vector2(200, 100), Vector2(200, 100), Vector2(400, 100)]);
final curve =
CubicBezier([Vector2(200, 50), Vector2(350, 150), Vector2(350, 150), Vector2(200, 200)]);
final intersection = line.intersectionsWithCurve(curve);
debugPrint('${intersection.length}');
>>> 1
Scenario 2 (Not work):
final line =
CubicBezier([Vector2(100, 100), Vector2(400, 100), Vector2(400, 100), Vector2(3000, 100)]);
final curve = CubicBezier(
[Vector2(2000, 50), Vector2(2350, 150), Vector2(2350, 150), Vector2(2000, 200)]);
final intersection = line.intersectionsWithCurve(curve);
debugPrint('${intersection.length}');
>>> 0
I also tried to increase curveIntersectionThreshold
and decrease minTValueDifference
but it did not help me. Would you happen to know any fixes/workarounds? I am not well-informed about bezier curves and might be wrong about some concepts. Thanks in advance!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.