Я хотел бы нарисовать произвольный путь вдоль круга (например, синусоида или кривая Безье) в Flutter, используя Custom Painter.
Я ищу способ преобразовать этот путь с помощью Matrix4, но не могу найти правильный способ сделать это.
Допустим, я начинаю со следующего макета:
И я хотел бы получить следующий прогноз:
Пожалуйста, найдите минимальный начальный пример. Я пытался повернуть mpath
с использованием преобразования Matrix, но не смог придумать правильное преобразование. Например:
final matrix = Matrix4.identity()
..setEntry(0, 1, 2)
..rotateY(val * math.pi)
..translate(-120.0);
canvas.transform(matrix.storage);
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyAppHome(),
);
}
}
class MyAppHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: SizedBox(
height: 300,
width: 300,
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: OnCriclePainter(),
);
}
}
class OnCriclePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
canvas.saveLayer(null, Paint());
canvas.save();
canvas.translate(size.width / 2, size.height / 2);
final paint = Paint()
..strokeWidth = 1
..style = PaintingStyle.stroke;
Path mpath = new Path();
var val = 1.0;
mpath.relativeQuadraticBezierTo(40, val * 100, 80, 0);
mpath.relativeQuadraticBezierTo(40, -val * 100, 80, 0);
canvas.drawPath(mpath, paint);
// how to place it onto the circle?
canvas.restore();
canvas.drawCircle(
Offset(size.width / 2, size.height / 2),
size.width / 2,
Paint()
..strokeWidth = 1
..style = PaintingStyle.stroke,
);
canvas.restore();
}
@override
bool shouldRepaint(OnCriclePainter oldDelegate) {
return true;
}
}