Flutter绘制弯曲虚线

栏目: Html5 · 发布时间: 5年前

内容简介:修改main.dart文件:这里使用贝塞尔曲线绘制,需要4个点,分别是:起点,终点和两个控制点,像图中那样,移动控制点就能改变曲线形状。你可以在

效果

Flutter绘制弯曲虚线

开始

修改main.dart文件:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Drawing Shapes",
      home: DrawingPage(),
    );
  }
}

class DrawingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Curved Line"),
      ),
      body: CustomPaint(
        painter: CurvePainter(),
        child: Container(),
      ),
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {

  }

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

接下来我们在CurvePainter中实现绘制:

这里使用贝塞尔曲线绘制,需要4个点,分别是:起点,终点和两个控制点,像图中那样,移动控制点就能改变曲线形状。你可以在 在线工具 中尝试:

Flutter绘制弯曲虚线

我们使用 cubicTo 方法设置路径path:

void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)

函数绘制路径从当前点到(x3,y3),控制点是(x1,y1),(x2,y2)

正如你看到的, cubicTo 方法接受3个点作为参数,前两个代表控制点,最后一个是结束点。开始点就是你的pen当前坐在canvas中的点。

canvas的坐标系是左上角是(0,0)。右下角是(size.width, size.height)。所以可以尝试调整4个点:

void paint(Canvas canvas, Size size) {

  var paint = Paint();

  paint.color = Colors.lightBlue;
  paint.style = PaintingStyle.stroke;
  paint.strokeWidth = 3;

  var startPoint = Offset(0, size.height / 2);
  var controlPoint1 = Offset(size.width / 4, size.height / 3);
  var controlPoint2 = Offset(3 * size.width / 4, size.height / 3);
  var endPoint = Offset(size.width, size.height / 2);

  var path = Path();
  path.moveTo(startPoint.dx, startPoint.dy);
  path.cubicTo(controlPoint1.dx, controlPoint1.dy,
      controlPoint2.dx, controlPoint2.dy,
      endPoint.dx, endPoint.dy);

  canvas.drawPath(path, paint);
}

paint 对象就是相当于我们的笔,被设置了蓝色和宽度为3.

我们使用path表述贝塞尔曲线。moveTo方法移动笔到开始点的位置。最后使用drawPath方法绘制出来。

Flutter绘制弯曲虚线

虚线

可以是使用三方库绘制虚线: https://pub.dartlang.org/packages/path_drawing

要使用它现在 pubspec.yml文件添加这个库:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  path_drawing: ^0.4.0

运行“flutter packages get”获得库,然后导入头文件就可以使用了:

import 'package:path_drawing/path_drawing.dart';

把上面的路径用dashPath包裹一下就可以了:

canvas.drawPath(
  dashPath(
    path,
    dashArray: CircularIntervalList<double>(<double>[15.0, 10.5]),
  ),
  paint,
);

dashPath 方法接受两个参数,第一个就是要绘制的path,第二个参数定义每一段虚线的长度和两个虚线间的间隔长度。结果如下:

Flutter绘制弯曲虚线

热度: 4


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法详解(卷1)——算法基础

算法详解(卷1)——算法基础

[美]蒂姆·拉夫加登(Tim Roughgarden) / 徐波 / 人民邮电出版社 / 2019-1-1 / 49

算法是计算机科学领域最重要的基石之一。算法是程序的灵魂,只有掌握了算法,才能轻松地驾驭程序开发。 算法详解系列图书共有4卷,本书是第1卷——算法基础。本书共有6章,主要介绍了4个主题,它们分别是渐进性分析和大O表示法、分治算法和主方法、随机化算法以及排序和选择。附录A和附录B简单介绍了数据归纳法和离散概率的相关知识。本书的每一章均有小测验、章末习题和编程题,这为读者的自我检查以及进一步学习提......一起来看看 《算法详解(卷1)——算法基础》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器