Flutter 画笔(Paint)、drawCircle(绘制圆)、PaintingStyle

最新推荐文章于 2024-09-08 15:30:00 发布
最新推荐文章于 2024-09-08 15:30:00 发布
阅读量795 收藏 15
点赞数 16
分类专栏： 程序员 文章标签： flutter 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84408404/article/details/138411366
版权
本文详细介绍了如何在Flutter中使用CustomPainter和Paint类进行圆形绘制，包括使用PaintingStyle.fill填充颜色和PaintingStyle.stroke绘制边框，并展示了不同颜色和大小的圆的实例。同时，文章提醒在实际应用中注意减少重绘的开销。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth = 1.0

…style = PaintingStyle.fill

…color = Colors.green

…invertColors = false;

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, 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

…style = PaintingStyle.fill

…color = Colors.green

…invertColors = false;

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, paint);

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2.5, paint…color=Colors.red);

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/4, paint…color=Colors.deepPurpleAccent);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回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

…style = PaintingStyle.fill

…color = Colors.green

…invertColors = false;

canvas.drawCircle(Offset(size.width/2, size.height/6), size.width/6, paint);

canvas.drawCircle(Offset(size.width/2, size.height/6*1.4), size.width/6, paint…color=Colors.deepPurpleAccent);

canvas.drawCircle(Offset(size.width/2, size.height/6*1.8), size.width/6, paint…color=Colors.deepOrange);

canvas.drawCircle(Offset(size.width/2, size.height/6*2.2), size.width/6, paint…color=Colors.amber);

canvas.drawCircle(Offset(size.width/2, size.height/6*2.6), size.width/6, paint…color=Colors.blue);

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.purple);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回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

…style = PaintingStyle.fill

…color = Colors.red

…invertColors = false;

canvas.drawCircle(Offset(size.width/2, size.height/6), size.width/6, paint…color=Colors.red.withOpacity(0.1));

canvas.drawCircle(Offset(size.width/2, size.height/6*1.4), size.width/6, paint…color=Colors.red.withOpacity(0.14));

canvas.drawCircle(Offset(size.width/2, size.height/6*1.8), size.width/6, paint…color=Colors.red.withOpacity(0.18));

canvas.drawCircle(Offset(size.width/2, size.height/6*2.2), size.width/6, paint…color=Colors.red.withOpacity(0.22));

canvas.drawCircle(Offset(size.width/2, size.height/6*2.6), size.width/6, paint…color=Colors.red.withOpacity(0.26));

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.red.withOpacity(0.30));

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.red.withOpacity(0.34));

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.red.withOpacity(0.38));

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.red.withOpacity(0.42));

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.red.withOpacity(0.46));

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.red.withOpacity(0.46));

}

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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

PaintingStyle.fill（用画笔绘制边框）

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth = 1.0

…style = PaintingStyle.stroke

…color = Colors.green

…invertColors = false;

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, 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

…style = PaintingStyle.stroke

…color = Colors.green

…invertColors = false;

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, paint);

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2.5, paint…color=Colors.red);

canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/4, paint…color=Colors.deepPurpleAccent);

}

//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回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

…style = PaintingStyle.stroke

…color = Colors.green

…invertColors = false;

canvas.drawCircle(Offset(size.width/2, size.height/6), size.width/6, paint);

canvas.drawCircle(Offset(size.width/2, size.height/6*1.4), size.width/6, paint…color=Colors.deepPurpleAccent);

canvas.drawCircle(Offset(size.width/2, size.height/6*1.8), size.width/6, paint…color=Colors.deepOrange);

canvas.drawCircle(Offset(size.width/2, size.height/6*2.2), size.width/6, paint…color=Colors.amber);

canvas.drawCircle(Offset(size.width/2, size.height/6*2.6), size.width/6, paint…color=Colors.blue);

canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint…color=Colors.purple);

文末

当你打算跳槽的时候，应该把“跳槽成功后，我能学到什么东西？对我的未来发展有什么好处”放在第一位。这些东西才是真正引导你的关键。在跳槽之前尽量“物尽其用”，把手头上的工作做好，最好是完成了某个项目或是得到提升之后再走。跳槽不是目的，而是为了达到最终职业目标的手段

最后祝大家工作升职加薪，面试拿到心仪Offer



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

文末

当你打算跳槽的时候，应该把“跳槽成功后，我能学到什么东西？对我的未来发展有什么好处”放在第一位。这些东西才是真正引导你的关键。在跳槽之前尽量“物尽其用”，把手头上的工作做好，最好是完成了某个项目或是得到提升之后再走。跳槽不是目的，而是为了达到最终职业目标的手段

最后祝大家工作升职加薪，面试拿到心仪Offer

[外链图片转存中…(img-uLYiiqYf-1714703520480)]
[外链图片转存中…(img-EQtAGGol-1714703520483)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

Flutter Paint
moyuxueyi的专栏
08-26 473
1、着色器Shader Gradient：渐变 渐变有三种 liner、radial和sweep。 浅谈Flutter 中渐变的高级用法(3种) ImageShader : 图片着色器 ImageShader 使用 ImageShader 可以加载一张图片，绘制时使用图片对图形进行着色。ImageShader 使用的Image为ui.Image ( import ‘dart:ui’ as ui; ) class _MyHomePageState extends State<CanvsBasePage
Flutter 自定义画圆 画笔(Paint)、绘制弧(drawArc)
杰森丶郭达斯坦森的博客
10-24 1474
1.首先创建一个dart文件，命名为line_painter.dart。自定义画圆，通过外部传入修改圆的颜色显示。2.在需要显示的地方加上入下代码即可。
Flutter 画笔(Paint)、drawCircle(绘制圆)、PaintingStyle，该如何高效实用Kotlin
2401_84148955的博客
04-08 539
笔者之前工作是在金融公司可能并不是特别追求技术，而笔者又是喜欢追求技术的人，所以格格不入，只能把目标放在互联网大厂了。也希望大家都去敢于尝试和追逐自己的梦想！BATJ大厂Android高频面试题《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！自己的梦想！BATJ大厂Android高频面试题[外链图片转存中…(img-Smdv5dQ3-1712509816052)][外链图片转存中…(img-NaoxnyF5-1712509816052)]
Flutter 绘制Paint
chwei_cson的专栏
08-31 6608
Flutter 的绘制主要涉及两个Widget： CustomPainter, CustomPaint CustomPainter：提供画布的组件； 有几个主要的参数： a. painter : 绘制的对象，是一个CustomPaint。它的绘制是在children之前。如果设置了children，该painter绘制的内容会被覆盖。  b. foregroundPainter： 绘制...
Flutter CustomPainter实现半圆形饼图
qq1377399077的专栏
10-20 3204
CustomPaint CustomPaint 是一个继承自 SingleChildRenderObjectWidget 的控件,因此我们不能用 setState 的方式来刷新它,但是我们可以通过传值不断刷新build方法取重新绘制它.它需要传入painter结合size属性进行绘制. return CustomPaint( size: Size(double.infinity, w(130)), painter: CurvePainter(), ); Cur..
Flutter 进阶：绘制加载动画
最新发布
yang_6799的博客
09-08 1763
LoadingScreen 类是一个 StatefulWidget，它管理 AnimationController 和 Animation 对象。AnimationController 用于控制动画的播放，Animation 对象则表示动画的具体值。@override以上代码定义了 MyApp 和 LoadingScreen 两个类，其中 MyApp 是应用的入口点，而 LoadingScreen 则是主要的动画屏幕。
drawcircle
11-07
opengl画圆函数，小程序，简便可行，图形环境下，多次分割画圆
DrawCircle
07-14
用于连续画几个圆，在画一个新的圆时，还能保留上一个圆
Flutter组件学习之自定义画板绘制圆形——筑梦之路
筑梦之路
04-30 1092
import 'package:flutter/material.dart'; /** * 自定义画板 * 绘制圆形 */ void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { Widget build(BuildContext context) { return new MaterialApp( title: 'CustomPaint 绘制圆形', home:.
Flutter 画笔(Paint)、绘制弧(drawArc)
2401_84408814的博客
05-03 642
@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
drawCircle
banyunyuan8590的博客
01-31 626
drawChord.prototype.drawCircle = function(x,y) { this.svg.circle(x+0.5, y+0.5, 2); } 转载于:https://www.cnblogs.com/react-js/p/6359625.html
drawCircle、drawArc
edward_leo的博客
04-24 1176
drawCircle(float cx, float cy, float radius, Paint paint)画一个圆：前两个坐标分别是圆心坐标，第三个是半径，第四个画笔drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 画一个椭圆： 第一个是一个矩形，与椭圆外边相切
Draw Circle 沿着圆运动
weixin_33704234的博客
01-20 121
import flash.display.MovieClip; var vx:Number = 0;var vy:Number = 0; var xspeed:Number = 0.05;var yspeed:Number = 0.05; var i:int=0; var xpoint:Number ;var ypoint:Number ; var targetXPoint:Number...
Flutter 画笔(Paint)、drawRect(绘制矩形)、PaintingStyle
2401_84132589的博客
04-05 1031
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
flutter canvas
07-13
在 Flutter 中使用 Canvas，你需要在自定义的绘制方法中重写父类的 paint 方法，并将 Canvas 对象作为参数传入。然后，你可以在这个方法中使用 Canvas 对象提供的方法来绘制你想要的图形。 例如，下面是一个简单的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值