Мне нужно нарисовать следующий виджет во Flutter:
У меня уже есть способ нарисовать эти крестики-нолики:
var path = Path();
path.lineTo(size.width * 2, size.height * 0.05);
path.cubicTo(size.width * 2, size.height * 0.05, size.width,
size.height * 0.05, size.width, size.height * 0.05);
path.cubicTo(size.width, size.height * 0.05, size.width, size.height * 1.05,
size.width, size.height * 1.05);
path.cubicTo(size.width, size.height * 1.05, size.width * 2,
size.height * 1.05, size.width * 2, size.height * 1.05);
path.cubicTo(size.width * 2, size.height * 1.05, size.width * 2,
size.height * 0.05, size.width * 2, size.height * 0.05);
Однако этот крестик-так является горизонтальным. Мне нужно нарисовать несколько из них, и под разными углами. Математика того, куда поместить каждый из них, — это простая тригонометрия (синусы и косинусы с длиной). Угол, который должен составить каждый из них, является углом синуса/косинуса. Однако рисовать многие из них с помощью инструмента обрезки Flutter сложно.
Есть ли способ нарисовать один сложный элемент во флаттере, используя путь, а затем перерисовать его в разных местах с небольшим вращением?
Если нет, то какую другую технику следует использовать?
@RaviSinghLodhi Хотя использование .png было бы плохой идеей, в основном из-за разных разрешений, но также и из-за производительности, если необходимо быстро изменить состояние





Форма представляет собой прямоугольник с закругленными краями. Вы можете использовать CustomPaint. Пожалуйста, посмотрите код ниже или запустите его непосредственно на DartPad здесь >> https://dartpad.dev/e0792a6ab7c9ff3aa1516bfeb77c3886
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(MaterialApp(
home: MyApp(),
debugShowCheckedModeBanner: false,
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
body: Center(
child: CustomPaint(
painter: PillPainter(
circleSize: 100,
pillWidth: 11,
pillHeight: 20,
distanceBetweenPills: 10,
),
),
),
);
}
}
class PillPainter extends CustomPainter {
PillPainter({
this.circleSize,
this.pillWidth,
this.pillHeight,
this.distanceBetweenPills,
});
double circleSize;
double pillWidth;
double pillHeight;
int distanceBetweenPills;
@override
void paint(Canvas canvas, Size size) {
final double rotationFactor = 1.75;
final double numOfPills = 360 / distanceBetweenPills;
final Paint innerPaint = Paint()
..color = Colors.orange
..style = PaintingStyle.fill;
final Path path = Path();
final double rotationAngle = rotationFactor * pi;
final double initialDisplacement = 0.75 * pi;
for (int i = 0; i < numOfPills; i++) {
path.addRRect(
RRect.fromRectXY(
Rect.fromCenter(
center: Offset(
size.width / 2 +
circleSize * cos(initialDisplacement + rotationAngle),
size.height / 2 +
circleSize * sin(initialDisplacement + rotationAngle)),
width: pillWidth,
height: pillHeight),
20,
20),
);
canvas.rotate((distanceBetweenPills * pi) / 180);
innerPaint.color = i % 2 == 0 ? Colors.green : Colors.red;
canvas.drawPath(path, innerPaint);
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Зачем тебе это красить? Почему бы вам не использовать форму как изображение
pngилиsvg?