在本文中碱工，我們將繪制如下的彎曲虛線：
我想你已經(jīng)熟悉了如何在Flutter中繪制自定義形狀和線條。如果沒有，你可以閱讀我在這個(gè)主題上寫的文章棘街。
讓我們開始創(chuàng)建我們的主文件：
main.dart
import 'package:custom_shape/pages/drawing_page.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(),
);
}
}
繪圖將在DrawingPage課堂上進(jìn)行：
drawing_page.dart
import 'package:curved_line/curve_painter.dart';
import 'package:flutter/material.dart';
class DrawingPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Curved Line"),
),
body: CustomPaint(
painter: CurvePainter(),
child: Container(),
),
);
}
}
像往常一樣蟆盐，我們的頁(yè)面首先Scaffold有一個(gè)appBar和一個(gè)body設(shè)置為CustomPaint小部件實(shí)例的頁(yè)面。
Container我使用的空（對(duì)于child屬性）將擴(kuò)展并填充整個(gè)屏幕遭殉，因此我們的大小canvas將與整個(gè)屏幕一樣大（再次石挂，如果你不明白為什么，請(qǐng)閱讀我在這個(gè)主題上寫的文章）险污。
這是CurvePainter類：
curve_painter.dart
import 'package:flutter/material.dart';
class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
我們將實(shí)現(xiàn)paint繪制曲線的方法痹愚。
要繪制貝塞爾線，我們需要四個(gè)點(diǎn)：起點(diǎn)蛔糯，終點(diǎn)和兩個(gè)控制點(diǎn)拯腮，如下圖所示。移動(dòng)控制點(diǎn)會(huì)改變曲線的斜率蚁飒。您可以在此在線工具中使用控制點(diǎn)动壤。
我們可以使用類Path的cubicTo方法繪制貝塞爾曲線：
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
使用控制點(diǎn)（x1，y1）和（x2淮逻，y2）添加從當(dāng)前點(diǎn)到給定點(diǎn)（x3琼懊，y3）的曲線的三次貝塞爾曲線段。
如您所見弦蹂，該cubicTo方法接受三個(gè)參數(shù)肩碟。其中兩個(gè)是控制點(diǎn)，最后一個(gè)參數(shù)是終點(diǎn)凸椿。起點(diǎn)是您的筆已經(jīng)位于畫布上的位置削祈。
不要忘記在畫布坐標(biāo)中，左上角是（0,0）點(diǎn)脑漫，右下角是（size.width髓抑，size.height）。因此优幸，請(qǐng)嘗試相應(yīng)地調(diào)整四點(diǎn)：
curve_painter.dart
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);
}
請(qǐng)記住吨拍，paint對(duì)象就像我們的筆，我們將其顏色設(shè)置為藍(lán)色网杆，寬度設(shè)置為3羹饰。
我們用path對(duì)象描述了bezier路徑。該moveTo方法已用于將筆移動(dòng)到路徑的起??點(diǎn)碳却。然后我們調(diào)用cubicTo方法來(lái)定義控制點(diǎn)和終點(diǎn)队秩。之后，我們使用該drawPath方法繪制了路徑昼浦。嘗試更改已定義點(diǎn)的x和y馍资，并查看曲線形狀如何變化：
虛線路徑
為了將任何正常路徑轉(zhuǎn)換為虛線路徑，幸運(yùn)的是关噪，可以在此處使用第三方包鸟蟹。它被稱為路徑繪圖乌妙。
要使用此包，首先將其添加到pubspec.yml項(xiàng)目文件的依賴項(xiàng)部分（包版本當(dāng)前為0.4.0）：
pubspec.yaml
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
然后運(yùn)行“flutter packages get”命令獲取新包建钥。
現(xiàn)在導(dǎo)入文件中的以下curve_painter.dart文件：
import 'package:path_drawing/path_drawing.dart';
并在繪制之前將其包裝path在dashPath方法中：
curve_painter.dart
canvas.drawPath(
dashPath(
path,
dashArray: CircularIntervalList<double>(<double>[15.0, 10.5]),
),
paint,
);
該dashPath方法有兩個(gè)參數(shù)藤韵。第一個(gè)是您想要被破折的路徑，第二個(gè)參數(shù)定義每個(gè)破折號(hào)的長(zhǎng)度（15.0）以及每?jī)蓚€(gè)破折號(hào)（10.0）之間的空間長(zhǎng)度锦针。使用這兩個(gè)數(shù)字進(jìn)行播放荠察，看看虛線是如何變化的置蜀。結(jié)果是：
好的伙計(jì)們奈搜，這就是今天的一切！
如果您想知道繪制這種線的用途是什么盯荤，您很快就會(huì)發(fā)現(xiàn)馋吗！在下一篇文章中，我將向您展示AnimationFlutter中的工作原理秋秤。我們將為餐館應(yīng)用程序?qū)崿F(xiàn)以下動(dòng)畫：
GitHub上提供了本文的源代碼宏粤。
謝謝閱讀！
轉(zhuǎn)：https://medium.com/@meysam.mahfouzi/drawing-curved-dashed-lines-in-flutter-b5d0645b04c8
