Как нарисовать путь по кругу во флаттере? - PullRequest
2 голосов
/ 16 апреля 2020

Я хотел бы нарисовать произвольный путь вдоль круга (например, синусоида или кривая Безье) в Flutter, используя Custom Painter.

Я ищу способ преобразовать этот путь с помощью Matrix4, но не могу найти правильный способ сделать это.

Допустим, я начинаю со следующего макета:

enter image description here

И я хотел бы получить следующий прогноз:

enter image description here

Пожалуйста, найдите минимальный начальный пример. Я пытался повернуть 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;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...