如何显示从一个点到另一个点绘制的线? [英] How to show a line being drawn from one point to another?

问题描述

我使用 canvas.drawLine 来显示一条线，但我希望用户能够看到它从一个点绘制到另一个点，并且如果可能的话，还可以控制动画的持续时间.(类似于进度条，但这是我的自定义小部件)

解决方案

您可以使用

I used canvas.drawLine to show a line but I want user to be able to see it being drawn from one point to another and also, if possible, control the duration of the animation. (something like progress bar but this is my custom widget)

解决方案

You can use an AnimationController to control the animation duration.

To draw the line "step by step" you can use a Tween (linear interpolation between a beginning and ending value).

Then you just need to pass the current progress to your line painter and calculate the new width/height on each paint() when you call canvas.drawLine.

Working example :

import 'package:flutter/material.dart';

class Line extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LineState();
}

class _LineState extends State<Line> with SingleTickerProviderStateMixin {
  double _progress = 0.0;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    var controller = AnimationController(duration: Duration(milliseconds: 3000), vsync: this);

    animation = Tween(begin: 1.0, end: 0.0).animate(controller)
      ..addListener(() {
        setState(() {
          _progress = animation.value;
        });
      });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: LinePainter(_progress));
  }
}

class LinePainter extends CustomPainter {
  Paint _paint;
  double _progress;

  LinePainter(this._progress) {
    _paint = Paint()
      ..color = Colors.green
      ..strokeWidth = 8.0;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(Offset(0.0, 0.0), Offset(size.width - size.width * _progress, size.height - size.height * _progress), _paint);
  }

  @override
  bool shouldRepaint(LinePainter oldDelegate) {
    return oldDelegate._progress != _progress;
  }
}

Then use it like this :

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Line animation'),
        leading: new Icon(Icons.insert_emoticon),
      ),
      backgroundColor: Colors.white,
      body: SizedBox(height: 200, width: 200, child: Line()),
    );
  }
}

The line will be drawn in the sized box from 0,0 to 200,200 in 3 seconds.

Result :

这篇关于如何显示从一个点到另一个点绘制的线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！