Flutter 浅析之 自定义view (自定义图形) 三

技术无止境，只怕不学习啊，Flutter 我们开始吧

绘制路径drawPath

drawPath(Path path, Paint paint)

绘制路径非常的简单，首先需要一个要绘制的路径path，然后就是这个paint了。
Path的用法也非常的简单，下面列出一下常用的方法：

举个例子：

 @overridevoid paint(Canvas canvas, Size size) {
    // TODO: implement paintPath path = new Path();path.lineTo(200, 300);canvas.drawPath(path, _paint);}

效果：

也可以绘制多个过程path

 @overridevoid paint(Canvas canvas, Size size) {
    // TODO: implement paintPath path = new Path();path.moveTo(50, 50);path.lineTo(160, 50);path.lineTo(160, 160);path.lineTo(50, 160);path.moveTo(160, 105);path.lineTo(50, 105);path.moveTo(50, 50);path.lineTo(50, 160);canvas.drawPath(path, _paint);}

效果：

我们也可以尝试画画其他的图形
使用arcTo绘制曲线，不熟悉贝塞尔曲线的童鞋可以自行google你科普下。
二阶贝塞尔曲线绘制弧线

 @overridevoid paint(Canvas canvas, Size size) {
    // TODO: implement paintPath path = new Path();path.arcTo(Rect.fromCircle(center: Offset(100, 100),radius: 80),0,3.14,false);canvas.drawPath(path, _paint);}

效果：

或者直接绘制一个圆

 @overridevoid paint(Canvas canvas, Size size) {
    // TODO: implement paintPath path = new Path();path.arcTo(Rect.fromCircle(center: Offset(100, 100),radius: 80),0,6.28,false);canvas.drawPath(path, _paint);}

效果：

当然我们也可以使用三阶贝塞尔曲线来绘制其他的图形：

比如，我对你们的爱哦

@overridevoid paint(Canvas canvas, Size size) {
    // TODO: implement paintPath path = new Path();var width = 200;var height = 300;path.moveTo(width / 2, height / 4);path.cubicTo((width * 6) / 7, height / 9, (width * 12) / 13,(height * 2) / 5, width / 2, (height * 7) / 12);canvas.drawPath(path, _paint);Path path2 = new Path();path2.moveTo(width / 2, height / 4);path2.cubicTo(width / 7, height / 9, width / 13, (height * 2) / 5,width / 2, (height * 7) / 12);canvas.drawPath(path2, _paint);}

效果：

绘制图片drawImage

drawImage(Image image, Offset p, Paint paint)

绘制起来也非常的简单，首先我们需要获取本地图片文件，然后绘制图片即可。
注意：自定义绘制Image 使用的是ui.Image对象

import 'dart:ui';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutterapptest/NewRoute.dart';
import 'TestPainter.dart';void main() {
    runApp(MyApp());
}class MyApp extends StatelessWidget {
    // This widget is the root of your application.@overrideWidget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.red, // 风格颜色visualDensity: VisualDensity.adaptivePlatformDensity,),routes:{
    "new_page":(context) => NewRoute(),},home: MyHomePage(title: '测试项目'),);}
}class MyHomePage extends StatefulWidget {
    MyHomePage({
    Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {
    ui.Image _image;@overridevoid initState() {
    super.initState();/*** 注意在初始化函数里面加加载图片* build 函数中把图片传给TestPainter对象*/load("images/timg.jpg").then((i) {
    setState(() {
    _image = i;});});}@overrideWidget build(BuildContext context) {
    // TODO: implement buildvar paint = CustomPaint(size: Size(300,300),painter: TestPainter(_image),);return Scaffold(appBar: AppBar(title: Text( "Canvas的用法"),),body: Container(child: paint,),);}/// 通过assets路径，获取资源图片Future<ui.Image> load(String asset) async {
    ByteData data = await rootBundle.load(asset);ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());ui.FrameInfo fi = await codec.getNextFrame();return fi.image;}}

自定义view类 TestPainter：

import 'dart:ui' as ui;
import 'dart:ui';
import 'package:flutter/material.dart';class TestPainter extends CustomPainter {
    Paint _paint = new Paint()..color = Colors.blueAccent // 画笔颜色..strokeCap = StrokeCap.round //画笔笔触类型..isAntiAlias = true //是否启动抗锯齿..strokeWidth = 6.0 //画笔的宽度..style = PaintingStyle.stroke; // 样式ui.Image _image;TestPainter(this._image) {
    this._image = _image;}@overridevoid paint(Canvas canvas, Size size) {
    // TODO: implement paintif (_image != null) {
    print(_image);canvas.drawImage(_image, Offset(0, 0), _paint);}}@overridebool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint///是否需要重绘return false;}
}

效果：

改变图片的大小

  @overridevoid paint(Canvas canvas, Size size) {
    // TODO: implement paintif (_image != null) {
    
// canvas.drawImage(_image, Offset(0, 0), _paint);canvas.drawImageRect(_image, Offset(0.0, 0.0) & Size(_image.width.toDouble(), _image.height.toDouble()), Offset(0.0, 0.0) & Size(200, 200), _paint);}}

效果：

绘制颜色drawColor

绘制颜色用起来就比较简单了，主要是用来给你绘制过的图形上做颜色的变换，颜色的变换模式有多种
先绘制一个颜色为蓝色的圆

 @overridevoid paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset(100, 100), 80.0, _paint);}

效果：

绘制红色

canvas.drawColor(Colors.red, BlendMode.color);

效果：

或者我们修改绘制的模式为

 Paint _paint = new Paint()..color = Colors.blueAccent // 画笔颜色..strokeCap = StrokeCap.round //画笔笔触类型..isAntiAlias = true //是否启动抗锯齿..strokeWidth = 6.0 //画笔的宽度..style = PaintingStyle.stroke // 样式..blendMode = BlendMode.colorDodge; // 模式

效果：

其他的可以自行尝试 本篇文章就到这里了。