去看原文:http://tryenough.com/flutter-curved-line
效果
開始
去看原文:http://tryenough.com/flutter-curved-line
修改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;
}
}
去看原文:http://tryenough.com/flutter-curved-line
接下來我們在CurvePainter中實現繪製:
這裏使用貝塞爾曲線繪製,需要4個點,分別是:起點,終點和兩個控制點,像圖中那樣,移動控制點就能改變曲線形狀。你可以在在線工具中嘗試:
我們使用 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方法繪製出來。
虛線
去看原文:http://tryenough.com/flutter-curved-line
可以是使用三方庫繪製虛線: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,第二個參數定義每一段虛線的長度和兩個虛線間的間隔長度。結果如下: