Flutter 画笔(Paint)、绘制直线(drawLine)(2)

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = false

…strokeWidth=30.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(100.0,60.0), paint…strokeCap);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = false

…strokeWidth=30.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(100.0,70.0), paint…strokeCap);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

isAntiAlias=true（消除锯齿）

    

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=30.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(100.0,60.0), paint…strokeCap);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=30.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(100.0,70.0), paint…strokeCap);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

strokeWidth（画笔宽度）

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…color = Colors.red;

canvas.drawLine(Offset(50.0, 46.0), Offset(200.0,46.0), paint…strokeCap…strokeWidth=4.0);

canvas.drawLine(Offset(50.0, 60.0), Offset(200.0,60.0), paint…strokeCap…strokeWidth=8.0);

canvas.drawLine(Offset(50.0, 80.0), Offset(200.0,80.0), paint…strokeCap…strokeWidth=16.0);

canvas.drawLine(Offset(50.0, 110.0), Offset(200.0,110.0), paint…strokeCap…strokeWidth=20.0);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

strokeCap（buff、round、square）

StrokeCap.butt（无延伸）

（画笔绘制轮廓的边缘是平的，无延伸）buff_cap.png

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=40.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(200.0,50.0), paint…strokeCap=StrokeCap.butt);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

StrokeCap.round（两边 、延伸、半圆）

（画笔绘制的开始和结束轮廓都会扩展，扩展的直线距离为画笔宽度的一半，扩展为半圆）round_cap.png

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=40.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(200.0,50.0), paint…strokeCap=StrokeCap.butt);

canvas.drawLine(Offset(50.0, 100.0), Offset(200.0,100.0), paint…strokeCap=StrokeCap.round…color=Colors.blue);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=40.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(200.0,50.0), paint…strokeCap=StrokeCap.butt);

canvas.drawLine(Offset(50.0, 100.0), Offset(200.0,100.0), paint…strokeCap=StrokeCap.round…color=Colors.blue);

canvas.drawLine(Offset(200.0, 80.0), Offset(200.0,120.0), paint…color=Colors.black…strokeWidth=1.0);

canvas.drawLine(Offset(200.0, 100.0), Offset(220.0,100.0), paint…color=Colors.black…strokeWidth=1.0);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

StrokeCap.square（两边 、延伸、半正方形[长方形]）

（画笔绘制的开始和结束轮廓都会扩展，扩展的直线距离为画笔宽度的一半，扩展为半正方形）square_cap.png

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=40.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(200.0,50.0), paint…strokeCap=StrokeCap.butt);

canvas.drawLine(Offset(50.0, 100.0), Offset(200.0,100.0), paint…strokeCap=StrokeCap.square…color=Colors.blue);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=40.0

…color = Colors.red;

canvas.drawLine(Offset(50.0, 50.0), Offset(200.0,50.0), paint…strokeCap=StrokeCap.butt);

canvas.drawLine(Offset(50.0, 100.0), Offset(200.0,100.0), paint…strokeCap=StrokeCap.square…color=Colors.blue);

canvas.drawLine(Offset(200.0, 80.0), Offset(200.0,120.0), paint…color=Colors.black…strokeWidth=1.0);

canvas.drawLine(Offset(200.0, 100.0), Offset(220.0,100.0), paint…color=Colors.black…strokeWidth=1.0);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

invertColors

将颜色值以一个二进制补码的形式转换成字节数组，存储在一个长度为52的字节数组中。

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=40.0

…invertColors=true;

canvas.drawLine(Offset(50.0, 50.0), Offset(200.0,50.0), paint…strokeCap=StrokeCap.butt…color = Colors.red);

canvas.drawLine(Offset(50.0, 100.0), Offset(200.0,100.0), paint…strokeCap=StrokeCap.square…color=Colors.blue);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=40.0

…invertColors=false;

canvas.drawLine(Offset(50.0, 50.0), Offset(200.0,50.0), paint…strokeCap=StrokeCap.butt…color = Colors.red);

canvas.drawLine(Offset(50.0, 100.0), Offset(200.0,100.0), paint…strokeCap=StrokeCap.square…color=Colors.blue);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

绘制等间距刻度

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=2.0

…invertColors=false;

canvas.drawLine(Offset(0.0, 50.0), Offset(size.width,50.0), paint…strokeCap=StrokeCap.square…color = Colors.red);

double caliCount=size.width/5.0;

for(int i=0;i<=caliCount;i++){

double x=i*5.0;

canvas.drawLine(Offset(x, 50.0), Offset(x, 40.0), paint);

}

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=2.0

…invertColors=false;

canvas.drawLine(Offset(0.0, 0.0), Offset(0.0,size.height), paint…strokeCap=StrokeCap.square…color = Colors.red);

double caliCount=size.height/5.0;

for(int i=0;i<=caliCount;i++){

double y=i*5.0;

canvas.drawLine(Offset(0.0, y), Offset(10.0, y), paint);

}

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

绘制斜线

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=2.0

…color=Colors.redAccent

…invertColors=false;

double caliCount=size.width/20;

for(int i=0;i<=caliCount;i++){

double x=i*10.0;

canvas.drawLine(Offset(x, 10.0), Offset(x*2, 100.0), paint);

}

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=1.0

…color=Colors.redAccent

…invertColors=false;

double caliCount=size.width/10;

for(int i=0;i<caliCount;i++){

double x1=i*10.0;

double x2=(i+1)*10.0;

canvas.drawLine(Offset(x1, 10.0), Offset(x2, 100.0), paint);

}

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=1.0

…color=Colors.redAccent

…invertColors=false;

double rowLineCount=size.height/10.0;

for(int i=0;i<rowLineCount;i++){

canvas.drawLine(Offset(0, 0.0), Offset(size.width, i*10.0), paint);

}

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

尾声

以薪资待遇为基础，以发展为最终目标，要在高薪资的地方，谋求最好的发展！

下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
9ibG9nLmNzZG4ubmV0L3UwMTM0OTE4Mjk=,size_16,color_FFFFFF,t_70)

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

//画背景

var paint = Paint()

…isAntiAlias = true

…strokeWidth=1.0

…color=Colors.redAccent

…invertColors=false;

double rowLineCount=size.height/10.0;

for(int i=0;i<rowLineCount;i++){

canvas.drawLine(Offset(0, 0.0), Offset(size.width, i*10.0), paint);

}

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

尾声

以薪资待遇为基础，以发展为最终目标，要在高薪资的地方，谋求最好的发展！

下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。

[外链图片转存中…(img-1I1MxfwJ-1714813345135)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！