Flutter 画笔(Paint)、绘制弧(drawArc)

2023-11-01 17:50
文章标签 绘制 flutter 画笔 paint drawarc

本文主要是介绍Flutter 画笔(Paint)、绘制弧(drawArc)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

人生在勤，不索何获。－－张衡 

drawArc（绘制弧线）

 

drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
rect构造矩形
startAngle开始角度
sweepAngle绘制的弧形占用角度弧度(360°角=2π)
userCenter扇形或圆弧段（true或false）
paint画笔
/// The PI constant.
const double pi = 3.1415926535897932;

paint（画笔）

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

 useCenter=false（绘制圆弧段）

Rect.fromCircle({ Offset center, double radius })
center圆弧中心点（相对于原点的偏移量）
radius圆弧半径(double)

 

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

Rect.fromLTRB(this.left, this.top, this.right, this.bottom)
left矩形最左边相对于原点(0,0)偏移量
top矩形最顶部相对于原点(0,0)偏移量
right矩形最右边相对于原点(0,0)偏移量
bottom矩形最底部相对于原点(0,0)偏移量

 

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromLTRB(0.0, 0.0, size.width, size.height/2);canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

Rect.fromCenter({ Offset center, double width, double height })
center矩形中心相对于原点偏移量
width矩形宽度
height矩形高度

 

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromCenter(center: Offset(size.width/2,size.height/2),width:size.width/2,height:size.height/2);canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

Rect.fromLTWH(double left, double top, double width, double height)
left矩形最左边相对于原点偏移量
top矩形最顶部相对于原点偏移量
width矩形宽度
height矩形高度

 

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromLTWH(0.0, 0.0, size.width/2, size.height/2);canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

 Rect.fromPoints(Offset a, Offset b) : this.fromLTRB(math.min(a.dx, b.dx),math.min(a.dy, b.dy),math.max(a.dx, b.dx),math.max(a.dy, b.dy),);
a相对于原点x方向上的偏移范围
b相对于原点y方向上的偏移范围

 下面三种写法效果一样（主要是取x或y方向上偏移量的范围）

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=1.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromPoints(Offset(size.width, 0.0),Offset(0,size.height));canvas.drawArc(rect, 0.0, 2*pi/4, false, 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;Rect rect=Rect.fromPoints(Offset(0.0, 0.0),Offset(size.width,size.height));canvas.drawArc(rect, 0.0, 2*pi/4, false, 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;Rect rect=Rect.fromPoints(Offset(size.width, size.height),Offset(0.0,0.0));canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

 useCenter=false（绘制扇形）

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromLTRB(0.0, 0.0, size.width, size.height/2);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

Rect.lerp(在两个矩形之间进行线性插值)

源码：

 static Rect lerp(Rect a, Rect b, double t) {assert(t != null);if (a == null && b == null)return null;if (a == null)return Rect.fromLTRB(b.left * t, b.top * t, b.right * t, b.bottom * t);if (b == null) {final double k = 1.0 - t;return Rect.fromLTRB(a.left * k, a.top * k, a.right * k, a.bottom * k);}return Rect.fromLTRB(lerpDouble(a.left, b.left, t),lerpDouble(a.top, b.top, t),lerpDouble(a.right, b.right, t),lerpDouble(a.bottom, b.bottom, t),);}
double lerpDouble(num a, num b, double t) {if (a == null && b == null)return null;a ??= 0.0;b ??= 0.0;return a + (b - a) * t;
}
a矩形
b矩形
t时间值（0.0~1.0之间）

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect a=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/3);Rect b=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/2);Rect rect=Rect.lerp(a, b, 1.0);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);rect=Rect.lerp(a, b, 0.2);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint..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=0.0..color=Colors.redAccent..invertColors=false;Rect a=Rect.fromLTRB(80.0, 80.0, size.width-30.0, size.height-60.0);Rect b=Rect.fromLTRB(50.0, 50.0, size.width-20.0, size.height-20.0);Rect rect=Rect.lerp(a, b, 1.0);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);rect=Rect.lerp(a, b, 0.2);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint..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=0.0..color=Colors.redAccent..invertColors=false;Rect a=Rect.fromLTRB(80.0, 80.0, size.width-80.0, size.height-80.0);Rect b=Rect.fromLTRB(50.0, 50.0, size.width-50.0, size.height-50.0);Rect rect=Rect.lerp(a, b, 1.0);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);rect=Rect.lerp(a, b, 0.7);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint..color=Colors.blue);rect=Rect.lerp(a, b, 0.5);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint..color=Colors.green);rect=Rect.lerp(a, b, 0.3);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint..color=Colors.deepPurpleAccent);rect=Rect.lerp(a, b, 0.1);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint..color=Colors.cyanAccent);rect=Rect.lerp(a, b, -0.2);canvas.drawArc(rect, 0.0, 2*pi/4, true, paint..color=Colors.lightGreenAccent);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

画圆

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

画同心圆

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..color=Colors.redAccent..invertColors=false;Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 80.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.blue);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 60.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.deepPurple);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 40.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.lightGreenAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 20.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.grey);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 10.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.pinkAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 2.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.blueAccent);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

绘制渐变圆

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..invertColors=false;Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.redAccent.withOpacity(0.2));rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 80.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.redAccent.withOpacity(0.3));rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 60.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.redAccent.withOpacity(0.4));rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 40.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.redAccent.withOpacity(0.5));rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 20.0);canvas.drawArc(rect, 0.0, 2*pi, false, paint..color=Colors.redAccent.withOpacity(0.6));}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

同心圆段拼凑正矩形 

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..invertColors=false;Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 0, 2*pi/4, false, paint..color=Colors.redAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 2*pi/4, 2*pi/4, false, paint..color=Colors.redAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 2*pi/2, 2*pi/4, false, paint..color=Colors.redAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 2*pi/4*3, 2*pi/4, false, paint..color=Colors.redAccent);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

画不同颜色等分弧度

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..invertColors=false;Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 0, 2*pi/4, true, paint..color=Colors.redAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 2*pi/4, 2*pi/4, true, paint..color=Colors.blueAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 2*pi/2, 2*pi/4, true, paint..color=Colors.grey);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, 2*pi/4*3, 2*pi/4, true, paint..color=Colors.indigo);}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

五彩蜘蛛网

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..invertColors=false;for(int i=0;i<10;i++){Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.indigo);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 90.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.grey);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 80.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.blueAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 70.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.blue);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 60.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.purpleAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 50.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.purple);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 40.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.pinkAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 30.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.lightGreen);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 20.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.cyan);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 10.0);canvas.drawArc(rect, i*2*pi/10, 2*pi/10, false, paint..color=Colors.tealAccent);}}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

旋转五彩扇叶

class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..strokeWidth=0.0..invertColors=false;for(int i=0;i<10;i++){Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.indigo);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 90.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.grey);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 80.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.blueAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 70.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.blue);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 60.0);canvas.drawArc(rect, i*2*2*2*pi/10, 2*pi/10, false, paint..color=Colors.purpleAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 50.0);canvas.drawArc(rect, i*2*2*2*pi/10, 2*pi/10, false, paint..color=Colors.purple);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 40.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.pinkAccent);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 30.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.lightGreen);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 20.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.cyan);rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 10.0);canvas.drawArc(rect, i*2*2*pi/10, 2*pi/10, false, paint..color=Colors.tealAccent);}}//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

 

这篇关于Flutter 画笔(Paint)、绘制弧(drawArc)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/324700。

相关文章

四种Flutter子页面向父组件传递数据的方法介绍

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1：使用 GlobalKey 和 State 调用子组件方法方法 2：通过回调函数（Callb
阅读更多...
使用Python绘制蛇年春节祝福艺术图

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》：本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3
阅读更多...
使用Python绘制可爱的招财猫

使用Python绘制可爱的招财猫

《使用Python绘制可爱的招财猫》招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常出现在亚洲文化的商店、餐厅和家庭中,今天,我将带你用Python和matplotlib库从零开始绘制一... 目录1. 为什么选择用 python 绘制？2. 绘图的基本概念3. 实现代码解析3.1 设置绘图画
阅读更多...
Python绘制土地利用和土地覆盖类型图示例详解

Python绘制土地利用和土地覆盖类型图示例详解

《Python绘制土地利用和土地覆盖类型图示例详解》本文介绍了如何使用Python绘制土地利用和土地覆盖类型图,并提供了详细的代码示例,通过安装所需的库,准备地理数据,使用geopandas和matp... 目录一、所需库的安装二、数据准备三、绘制土地利用和土地覆盖类型图四、代码解释五、其他可视化形式1.
阅读更多...
如何用Python绘制简易动态圣诞树

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码：效果：总结 代码：import randomimport timefrom math
阅读更多...
鸿蒙开发搭建flutter适配的开发环境

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE
阅读更多...
【WebGPU Unleashed】1.1 绘制三角形

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123 在 3D 渲染领域，三角形是最基本的绘制元素。在这里，我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
利用matlab bar函数绘制较为复杂的柱状图，并在图中进行适当标注

利用matlab bar函数绘制较为复杂的柱状图，并在图中进行适当标注

示例代码和结果如下：小疑问：如何自动选择合适的坐标位置对柱状图的数值大小进行标注？😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2