Flutter 自定义控件-仿照安卓和抖音图标绘制

article/2025/8/28 4:44:54

抖音图标：

1、绘制黑色圆角矩形

class MyTrillPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 1.0..color = Colors.black; //背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rRect, paint);}
@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

2、绘制红色区域

class MyTrillPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 1.0..color = Colors.black; //背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rRect, paint);paint..style = PaintingStyle.stroke //..strokeWidth = 60.0 / 3..color = Colors.redAccent; //背景为纸红色rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

 

class MyTrillPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 1.0..color = Colors.black; //背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rRect, paint);paint..style = PaintingStyle.stroke //..strokeWidth = 60.0 / 3..color = Colors.redAccent; //背景为纸红色rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyTrillPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 1.0..color = Colors.black; //背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rRect, paint);paint..style = PaintingStyle.stroke //..strokeWidth = 60.0 / 3..color = Colors.redAccent; //背景为纸红色rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyTrillPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 1.0..color = Colors.black; //背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rRect, paint);paint..style = PaintingStyle.stroke //..strokeWidth = 60.0 / 3..color = Colors.redAccent; //背景为纸红色rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

3、绘制青色区域

class MyTrillPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 1.0..color = Colors.black; //背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rRect, paint);paint..style = PaintingStyle.stroke //..strokeWidth = 60.0 / 3..color = Colors.redAccent; //背景为纸红色rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);rect = Rect.fromCircle(center: Offset(size.width / 2 - 7.0, size.height / 2 - 9.0), radius: 30.0);canvas.drawArc(rect, 0, math.pi * 3 / 2 + 0.1, false, paint..color = Colors.cyanAccent);canvas.drawLine(Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 9.0), Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 80.0 - 9.0), paint);rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0 - 7.0, size.height / 2 - 80.0 - 9.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.526, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

4、绘制白色区域

class _MyHomePageState extends State<MyHomePage> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overrideWidget build(BuildContext context) {print("main_build");return Scaffold(backgroundColor: Colors.white,appBar: AppBar(title: Text(widget.title),),body: Center(child: CustomPaint(size: Size(300, 300), //指定// 画布大小painter: MyTrillPainter(),),),);}
}//抖音
class MyTrillPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 1.0..color = Colors.black; //背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rRect, paint);paint..style = PaintingStyle.stroke //..strokeWidth = 60.0 / 3..color = Colors.redAccent; //背景为纸红色rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);rect = Rect.fromCircle(center: Offset(size.width / 2 - 7.0, size.height / 2 - 9.0), radius: 30.0);canvas.drawArc(rect, 0, math.pi * 3 / 2 + 0.1, false, paint..color = Colors.cyanAccent);canvas.drawLine(Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 9.0), Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 80.0 - 9.0), paint);rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0 - 7.0, size.height / 2 - 80.0 - 9.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.526, false, paint);rect = Rect.fromCircle(center: Offset(size.width / 2 - 4.0, size.height / 2 - 4.0),radius: 30.0);canvas.drawArc(rect, 0,math.pi * 3 / 2,false,paint..color = Colors.white..strokeWidth = 16.0);canvas.drawLine(Offset(size.width / 2 + 30.0 - 4.0, size.height / 2 - 4.0),Offset(size.width / 2 + 30.0 - 4.0, size.height / 2 - 80.0 - 4.0),paint);rect = Rect.fromCircle(center:Offset(size.width / 2 + 60.0 - 4.0, size.height / 2 - 80.0 - 4.0),radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

安卓图标

1、绘制灰色矩形背景

class MyAndroidPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;_drawRect(size, canvas, paint);}//绘制灰色矩形背景void _drawRect(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);canvas.drawRect(rect, paint..color = Colors.black12);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

2、绘制绿色圆角背景

class MyAndroidPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);}//绘制灰色矩形背景void _drawRect(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);canvas.drawRect(rect, paint..color = Colors.black12);}//绘制圆角矩形背景void _drawRRect(Size size, Canvas canvas, paint, rCircular) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.lightGreen);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

3、绘制半圆角白色背景

 @overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);//绘制中间半圆角_drawMHalfRRect(size, canvas, paint, _rCircular / 3); }//绘制半圆角背景void _drawMHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _halfRRectStartX = size.width / 3,_halfRRectStartY = size.height / 3,_halfRRectEndX = size.width * 2 / 3,_halfRRectEndY = size.height * 2 / 3;Rect rect = Rect.fromLTRB(_halfRRectStartX, _halfRRectStartY, _halfRRectEndX, _halfRRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}

4、绘制中间半圆角-左、右边圆角矩形

  @overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);//绘制中间半圆角_drawMHalfRRect(size, canvas, paint, _rCircular / 3);_drawMLRRect(size, canvas, paint, _rCircular / 4);_drawMRRRect(size, canvas, paint, _rCircular / 4);}//绘制中间半圆角-左边圆角矩形void _drawMLRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 - 30.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 - 6.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制中间半圆角-右边圆角矩形void _drawMRRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 + 6.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 * 2 + 30.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}

5、绘制底部2个半圆角矩形

@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);_drawBLHalfRRect(size, canvas, paint, _rCircular / 4);_drawBRHalfRRect(size, canvas, paint, _rCircular / 4);
}//绘制底部左边半圆角void _drawBLHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 20.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 + 44.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制底部右边半圆角void _drawBRHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 56.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 * 2 - 20.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}

6、绘制顶部弧形区域

//绘制顶部半圆void _drawTopArc(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(size.width / 3, size.height / 6,size.width * 2 / 3, size.height / 6 + 90.0);canvas.drawArc(rect, 3.14, 3.14, true, paint..color = Colors.white);}

7、绘制顶部弧形内部2个小圆点

//绘制顶部半圆-眼睛void _drawTopLeftEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width / 3 + 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}//绘制顶部半圆-眼睛void _drawTopRightEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width * 2 / 3 - 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}

8、绘制顶部类似天线的圆角矩形

 //绘制顶部左边天线void _drawTopLeftMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 + 8.0,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(-0.3);canvas.translate(0.0, 18.0);canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制顶部左边天线void _drawTopRightMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 - 8.0,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 * 2,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(0.3);canvas.translate(0.0, -90.0);canvas.rotate(0.3);canvas.drawRRect(rRect, paint..color = Colors.white);}

安卓图标

class MyAndroidPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);//绘制中间半圆角_drawMHalfRRect(size, canvas, paint, _rCircular / 3);_drawMLRRect(size, canvas, paint, _rCircular / 4);_drawMRRRect(size, canvas, paint, _rCircular / 4);_drawBLHalfRRect(size, canvas, paint, _rCircular / 4);_drawBRHalfRRect(size, canvas, paint, _rCircular / 4);_drawTopArc(size, canvas, paint);_drawTopLeftEyes(size, canvas, paint);_drawTopRightEyes(size, canvas, paint);_drawTopLeftMast(size, canvas, paint, _rCircular / 8);_drawTopRightMast(size, canvas, paint, _rCircular / 8);}//绘制灰色矩形背景void _drawRect(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);canvas.drawRect(rect, paint..color = Colors.black12);}//绘制圆角矩形背景void _drawRRect(Size size, Canvas canvas, paint, rCircular) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.lightGreen);}//绘制半圆角背景void _drawMHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _halfRRectStartX = size.width / 3,_halfRRectStartY = size.height / 3,_halfRRectEndX = size.width * 2 / 3,_halfRRectEndY = size.height * 2 / 3;Rect rect = Rect.fromLTRB(_halfRRectStartX, _halfRRectStartY, _halfRRectEndX, _halfRRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制中间半圆角-左边圆角矩形void _drawMLRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 - 30.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 - 6.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制中间半圆角-右边圆角矩形void _drawMRRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 + 6.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 * 2 + 30.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制底部左边半圆角void _drawBLHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 20.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 + 44.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制底部右边半圆角void _drawBRHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 56.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 * 2 - 20.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制顶部半圆void _drawTopArc(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(size.width / 3, size.height / 6,size.width * 2 / 3, size.height / 6 + 90.0);canvas.drawArc(rect, 3.14, 3.14, true, paint..color = Colors.white);}//绘制顶部半圆-眼睛void _drawTopLeftEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width / 3 + 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}//绘制顶部半圆-眼睛void _drawTopRightEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width * 2 / 3 - 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}//绘制顶部左边天线void _drawTopLeftMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 + 8.0,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(-0.3);canvas.translate(0.0, 18.0);canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制顶部左边天线void _drawTopRightMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 - 8.0,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 * 2,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(0.3);canvas.translate(0.0, -90.0);canvas.rotate(0.3);canvas.drawRRect(rRect, paint..color = Colors.white);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

 


http://chatgpt.dhexx.cn/article/qLSNpHPj.shtml

相关文章

Unity之ASE实现 故障干扰 效果(抖音图标)

Unity之ASE实现 故障干扰 效果(抖音图标)

前言 今天我们来实现一个类似抖音图标的 故障干扰效果，如下图所示： 原理 我们看到效果图里面有看到红色和蓝色的颜色左右扰动偏移，其实它的实现原理很简单。就是一个图片的R通道和B通道左右偏移，加上一个扰动效果即可，下面我们来打个分析下。 1.扰动效果 扰动我们说…
阅读更多...
PS—制作 抖音 图标

PS—制作 抖音 图标

博客概要 私下自学过ps&#xff0c;短学期的时候在上UID&#xff0c;巩固了一些ps技巧&#xff0c;至此总结一下~模仿制作 抖音 图标。 文章目录 博客概要总流程图标的详细制作过程 总流程 1.准备Photoshop软件,运行软件并新建合适大小的画布 2.在画布上制作完成 抖音 图标 图标…
阅读更多...
PS教程：如何制作抖音UI图标

PS教程：如何制作抖音UI图标

说到抖音，大家都不陌生，无论是老人还是小孩在闲暇时间都喜欢刷抖音，大家知道抖音图标是怎样制作成的吗？下面将方法告诉大家！ 　　1.首先新建一个1024X768分辨率为72像素/英寸的文档，为了看的清楚一点，给背景填充一个浅蓝色#8d8dff，然后选择椭圆选框工具，属性栏上将样…
阅读更多...
摩尔定律还会一直生效吗？

摩尔定律还会一直生效吗？

摩尔定律是由英特尔&#xff08;Intel&#xff09;创始人之一戈登摩尔&#xff08;Gordon Moore&#xff09;提出来的。其内容为&#xff1a;当价格不变时&#xff0c;集成电路上可容纳的元器件的数目&#xff0c;约每隔18-24个月便会增加一倍&#xff0c;性能也将提升一倍。换…
阅读更多...
芯片——摩尔定律的传奇（下）

芯片——摩尔定律的传奇（下）

芯片——摩尔定律的传奇&#xff08;下&#xff09; 引自:　http://www.ccf.org.cn/c/2017-08-16/603629.shtml 50多年来&#xff0c;集成电路(IC)一直按照摩尔定律前行。但是&#xff0c;IC芯片的密度和计算机的速度能够一直按照摩尔定律前行吗&#xff1f;又有哪些物理极限和…
阅读更多...
摩尔定律的瓶颈

摩尔定律的瓶颈

摩尔定律的瓶颈 上世纪60年代&#xff0c;摩尔发现半导体晶体管制程发展的速度对于一个半导体厂商至关重要。 随着制程的进化&#xff0c;同样的芯片的制造成本会更低&#xff0c;因为单位面积晶体管数量提升导致相同的芯片所需要的面积缩小。所以制程发展速度如果过慢&#…
阅读更多...
摩尔定律将失效后的发展方向

摩尔定律将失效后的发展方向

1. 摩尔定律 摩尔在1965年4月19日的《电子学》杂志上公布了这一著名预言。英特尔CEO科再奇(Brian Krzanich)表示&#xff1a;“摩尔定律是一项经济定律&#xff0c;与物理和化学并无太大关系。在几年时间里&#xff0c;我们将使芯片上的晶体管数量增加一倍。实际上&#xff0c…
阅读更多...
摩尔定律的失效

摩尔定律的失效

摩尔定律由英特尔公司&#xff08;Intel&#xff09;的创始人之一的戈登摩尔与1965年提出。 摩尔定律的定义归纳起来有三种说法&#xff1a; 1.集成电路芯片上所集成的电路的数目&#xff0c;每隔18个月就翻一倍。 2.微处理器的性能每隔18个月提高一倍&#xff0c;或价格下…
阅读更多...
反摩尔定律

反摩尔定律

反摩尔定律的兄弟摩尔定律鼎鼎有名&#xff0c; 但同为IT行业三大定律的反摩尔定律也有很大的指导意义。 要了解反摩尔定律首先要了解摩尔定律。 摩尔定律最早是由英特尔公司创始人戈登摩尔(Gordon Moore)博士提出。摩尔定律的主要内容是&#xff1a;每18个月计算机等IT产品的…
阅读更多...
摩尔定律还会有效吗

摩尔定律还会有效吗

摩尔定律作为计算机发展的三大定律之一&#xff0c;其意义也是深远的。 先简单介绍下摩尔定律&#xff1a;摩尔定律是由英特尔&#xff08;Intel&#xff09;创始人之一戈登摩尔&#xff08;Gordon Moore&#xff09;提出来的。其内容为&#xff1a;当价格不变时&#xff0c;集…
阅读更多...
计算机内存发展摩尔定律,摩尔定律还能走多远? CPU 的内存瓶颈

计算机内存发展摩尔定律,摩尔定律还能走多远? CPU 的内存瓶颈

原标题&#xff1a;摩尔定律还能走多远? CPU 的内存瓶颈 在2002年之前&#xff0c;随着芯片密度的增加&#xff0c; CPU的时钟频率也一直不断增加。 对于普通消费者而言&#xff0c;CPU 的频率就代表计算机的快慢。 1981年最早出厂的 IBM PC&#xff0c; CPU 的频率是 4.77 兆…
阅读更多...
摩尔定律已经走到尽头？

摩尔定律已经走到尽头？

关注星标公众号&#xff0c;不错过精彩内容 直接来源 | 半导体行业观察 来源&#xff1a;https://mp.weixinbridge.com/mp/wapredirect?urlhttps%3A%2F%2Finterestingengineering.com%2Ftransistors-moores-law 至少过去十年来&#xff0c;人们就一直在谈论摩尔定律的终结以及…
阅读更多...
摩尔定律的现实意义

摩尔定律的现实意义

IT行业有着已知的三大定律&#xff1a; 1.moore’s law&#xff08;摩尔定律&#xff09; 该定律的大意是IT产业的硬件或设备生产商的技术每十八个月翻一番&#xff0c;也就是说相关技术涉及的产品每十八个月价格下降一半。 2.Andy and Bill’s Law&#xff08;安迪-比尔定…
阅读更多...
摩尔定律与反摩尔定律

摩尔定律与反摩尔定律

摩尔定律是由因特尔的创始人之一的戈登摩尔提出来的。主要内容是当价格不变时&#xff0c;集成电路上可容纳的元件的数目&#xff0c;每过2年就会增加一倍&#xff0c;那么&#xff0c;性能也随之提升一倍。摩尔定律也就揭示了信息技术的进步速度。 苹果公司的手机开发也基本上…
阅读更多...
IT界的经典定律

IT界的经典定律

概述 IT有很多的定律&#xff0c;不仅在揭示IT行业的发展规律&#xff0c;而且还说明了一些人生道理。我们要了解这些规律&#xff0c;利用这些规律&#xff0c;懂的顺势而为。下面就整理一下&#xff0c;我所知道的一些IT经典定律。 1、摩尔定律 摩尔定律是由英特尔&#x…
阅读更多...
摩尔定律还有效吗

摩尔定律还有效吗

moore’s law&#xff08;摩尔定律&#xff09; 该定律的大意是IT产业的硬件或设备生产商的技术每十八个月翻一番&#xff0c;也就是说相关技术涉及的产品每十八个月价格下降一半。 摩尔定律的提出 “摩尔定律”是由Intel公司联合创始人戈登摩尔于1965年首次提出的。“摩尔…
阅读更多...
Hadoop集群测试

Hadoop集群测试

文章目录 Hadoop集群测试一&#xff0c;通过UI界面查看Hadoop运行状态1&#xff0c;hadoop2和hadoop3端口区别表2&#xff0c;查看HDFS集群状态3&#xff0c;查看yarn状态 二&#xff0c;Hadoop集群体验1&#xff0c;启动Hadoop集群2&#xff0c;在虚拟机上准备文件3&#xff0…
阅读更多...
CentOS7搭建hadoop集群

CentOS7搭建hadoop集群

说明&#xff1a; 1.准备三台虚拟机&#xff0c;参考&#xff1a;CentOS7集群环境搭建(以3台为例) 2.配置虚拟机间免密登陆&#xff1a;参考&#xff1a;CentOS7集群配置免密登录 3.虚拟机分别安装jdk&#xff1a;参考&#xff1a;CentOS7集群安装JDK1.8 4.hadoop安装包下载&am…
阅读更多...
启动Hadoop集群

启动Hadoop集群

启动Hadoop集群 第一次启动前置工作 注意&#xff1a;首次启动 HDFS 时&#xff0c;必须对其进行格式化操作。本质上是一些清理和准备工作&#xff0c;因为此时的 HDFS 在物理上还是不存在的。(本质是对namenode进行初始化) 命令&#xff1a;hdfs namenode -format 或者 had…
阅读更多...
Hadoop集群部署和启动与关闭

Hadoop集群部署和启动与关闭

文章目录 一、安装Hadoop二、Hadoop高可用集群配置三、启动Hadoop高可用集群配置四、关闭Hadoop高可用集群 Hadoop集群的部署方式分为三种&#xff0c;分别是独立模式&#xff08;Standalone mode&#xff09;、伪分布式模式&#xff08;Pseudo-Distributed mode&#xff09;和…
阅读更多...
推荐文章

Copyright @ 2022~2023