flutter 带抖动画布的虚线圆(自定义绘画和自定义绘画器)

0lvr5msh  于 2023-01-21  发布在  Flutter
关注(0)|答案(1)|浏览(149)

我学校的作业需要用自定义绘图工具(Flutter)画一个虚线圆。我怎样才能在画布上画出虚线圆呢?我只知道如何在画布上画实心圆。如果你知道,请回答我。不要跳过。谢谢!
我试着在互联网上到处搜索,但我找不到。我希望我会得到解决方案从StackOverflow。

bq8i3lrv

bq8i3lrv1#

你说你可以画一个实心圆。画一个虚线圆非常类似。使用for循环你只需要画一堆实心圆,它们一起形成虚线圆。每个圆的偏移量可以使用基本的三角函数来确定。代码示例:

import 'package:flutter/material.dart';
import "dart:math";

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: CustomPaint(
          size: const Size(
            100,
            100,
          ),
          painter: MyPainter(
            20,
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  MyPainter(this.radius);

  final double radius;

  @override
  void paint(Canvas canvas, Size size) {
    final double centerX = size.width / 2;
    final double centerY = size.height / 2;
    final Paint paint = Paint()..color = Colors.black;
    final double filledCircleRadius = 3;
    final int numberOfDots = 10;
    final double radiantStep = 2 * pi / numberOfDots;
    for (int i = 0; i < numberOfDots; i++) {
      canvas.drawCircle(
        Offset(centerX + sin(i * radiantStep) * radius,
            centerY + cos(i * radiantStep) * radius),
        filledCircleRadius,
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

相关问题