如何显示从一个点绘制到另一点的线? [英] 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.

要逐步"画线，可以使用 Tween (开始值和结束值之间的线性插值).

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

然后，您只需要在调用canvas.drawLine时将当前进度传递给线条画并在每个paint()上计算新的宽度/高度.

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.

工作示例:

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;
  }
}

然后像这样使用它:

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()),
    );
  }
}

将在3秒内在尺寸框内从0,0到200,200绘制线条.

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

结果:

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