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

先正确的评判自己，才有能力评断他人。
你是否欺骗别人，或是自己？想清楚再回答。
三思而后行的人，很少会做错事情。
企图说服不用大脑的人，是徒劳无功。
认为整个世界都错的人，极可能错在自己。

drawLine（绘制直线）

drawLine(Offset p1, Offset p2, Paint paint)

Offset【off 开始或结束的意思；set 设置、设定的意思】

p1：绘制开始坐标【相对于原点 [0,0] 的偏移量】

p2：绘制结束坐标【相对于原点 [0,0] 的偏移量】

paint：画笔

isAntiAlias	是否抗锯齿（bool）
strokeWidth	画笔宽度（double）
color	画笔颜色（Color）
strokeCap	延伸绘制（画冒）
invertColors	转换颜色值（二进制补码）

isAntiAlias=false（保留锯齿）

CustomPaint(size: Size(300, 300), //指定画布大小painter: MyPainter(),),

class MyPainter extends CustomPainter {@overridevoid 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,50.0), paint..strokeCap);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

isAntiAlias=true（消除锯齿）

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

strokeWidth（画笔宽度）

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

strokeCap（buff、round、square）

StrokeCap.butt（无延伸）

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

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

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

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

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

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

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

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

invertColors

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

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

绘制等间距刻度

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

绘制斜线

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

网格线

class MyPainter extends CustomPainter {@overridevoid 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+1;i++){double y=i*10.0;canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);}double colLineCount=size.width/10.0;for(int i=0;i<colLineCount+1;i++){double x=i*10.0;canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);}}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid 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+1;i++){double y=i*10.0;paint..color=(i%2==0)?Colors.green:Colors.blue;canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);}double colLineCount=size.width/10.0;for(int i=0;i<colLineCount+1;i++){double x=i*10.0;paint..color=(i%2==0)?Colors.green:Colors.blue;canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);}}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

倾斜网格线

class MyPainter extends CustomPainter {@overridevoid 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+1;i++){double y=i*10.0;double sX=size.width/2-i*4.0;double eX=size.width-i*4.0;canvas.drawLine(Offset(sX, y), Offset(eX, y), paint);}double colLineCount=size.width/10.0;for(int i=0;i<colLineCount+1;i++){double sX=size.width-i*5.0;double eX=size.width-colLineCount*4.0-i*5.0;double sY=0;double eY=size.height;canvas.drawLine(Offset(sX, sY), Offset(eX, eY), paint);}}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

倾斜竖线

class MyPainter extends CustomPainter {@overridevoid 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+1;i++){double sX=i*10.0;double eX=i*10.0;double sY=size.height/rowLineCount*i;double eY=size.height-size.height/rowLineCount*i;canvas.drawLine(Offset(sX, sY), Offset(eX, eY), paint);}}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

Flutter 画笔(Paint)、绘制直线(drawLine)相关推荐

Flutter 画笔(Paint)、drawRect(绘制矩形)、PaintingStyle
观察走在你前面的人,看看他为何领先,学习他的做法. drawRect(rect, paint) rect 矩形 paint 画笔 PaintingStyle.fill(用画笔填充绘制) Rect.fr ...
【Android】自定义View、画布Canvas与画笔Paint
安卓自定义View其实很简单.这个View可以像<[Android]利用Java代码布局,按钮添加点击事件>(点击打开链接)一样,利用Java代码生成一系列的组件.也可以配合画布Canva ...
Flutter 画笔绘制二维码扫描框
文章目录一.CustomPaint介绍 1. CustomPaint 2. CustomPainter 3. Paint & Canvas 4. 示例(绘制文本背景) 二.计算扫描框四个点坐 ...
Delphi下的GDI+编程[2] DrawLine - 绘制直线
例一效果图: 在GDI+中,绘制直线是通过TGPGraphics类的DrawLine方法实现的,此类的一些方法如下: DrawLine(线条) DrawRectangle(矩形) DrawEllips ...
Android中使用Canvas和Paint绘制一个安卓机器人
场景在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
WinForm绘制直线、曲线、矩形、椭圆、圆弧
WinForm绘制直线.曲线.矩形.椭圆.圆弧新建一个窗体.添加六个按钮,插入下面的代码.得到上图. private void button1_Click(object sender, EventA ...
Flutter 绘图 Paint strokeCap 延伸类型 strokeJoin 拐角类型图文分析
在 Flutter 绘图中,必然要使用一画笔,一般画笔的创建方法如下 //[定义画笔]Paint _paint = Paint()//画笔颜色..color = Colors.blue//画笔笔触类型 ...
OpenCV基本图形绘制之绘制直线
先上代码 #include <iostream> #include <opencv2/core.hpp> #include <opencv2/highgui.hpp> ...
java水平线代码_java 绘制直线，跪求源代码？？？
在几何中,直线是向两端无限延伸的,本实例所说的绘制直线,实际上是绘制直线上两点之间的线段,线段在实际生产和生活中经常使用.运行程序,将在窗体上绘制线段,效果如图1.1所示.图... 在几何中,直线是向 ...
Qt绘制直线、矩形、圆
Qt绘制直线.矩形.圆新建一个Qt Widgets Application工程添加头文件 #include <QPainter> 添加paintEvent函数,代码如下: void M ...

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

isAntiAlias=false（保留锯齿）

isAntiAlias=true（消除锯齿）

strokeWidth（画笔宽度）

strokeCap（buff、round、square）

StrokeCap.butt（无延伸）

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

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

invertColors

绘制等间距刻度

绘制斜线

网格线

倾斜网格线

倾斜竖线

Flutter 画笔(Paint)、绘制直线(drawLine)相关推荐

最新文章

热门文章

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

isAntiAlias=false（保留锯齿）

isAntiAlias=true（消除锯齿）

strokeWidth（画笔宽度）

strokeCap（buff、round、square）

StrokeCap.butt（无延伸）

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

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

invertColors

绘制等间距刻度

绘制斜线

网格线

倾斜网格线

倾斜竖线

Flutter 画笔(Paint)、绘制直线(drawLine)相关推荐

最新文章

热门文章

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

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