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

最新推荐文章于 2024-05-01 01:04:27 发布
最新推荐文章于 2024-05-01 01:04:27 发布
阅读量856 收藏 21
点赞数 19
分类专栏： 程序员 文章标签： flutter 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fghis/article/details/137389261
版权
这篇博客深入探讨了Flutter中CustomPainter类的使用，特别是如何利用Paint对象和drawCircle方法绘制不同颜色和样式的圆。文章通过示例展示了如何设置Paint的属性如fill和stroke样式，以及如何调整透明度来实现丰富的视觉效果。此外，还提到了shouldRepaint方法在优化重绘中的作用。
摘要由CSDN通过智能技术生成

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=

最低0.47元/天 解锁文章
fghis
关注
  • 19
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter CustomPainter实现半圆形饼图
10-20
在`paint`方法内，我们可以使用各种绘图API，如`drawCircle`、`drawRect`、`drawPath`等，来绘制复杂的图形。 要创建半圆形饼图，我们需要计算每个扇形的角度和路径。饼图通常由一系列扇形组成，每个扇形代表数据的...
android中对Canvas.drawCircle()方法的理解
MR CUI的专栏
01-09 1万+
功能说明 该方法用于在画布上绘制圆形，通过指定圆形圆心的坐标和半径来实现。该方法是绘制圆形的主要方法，同时也可以通过设置画笔的空心效果来绘制空心的圆形。 基本语法 public void drawCircle (float cx, float cy, float radius, Paint paint) 参数说明 cx：圆心的x坐标。 cy：圆心的y坐标。 radius：圆的半径。 pa...
Flutter 绘制Paint
chwei_cson的专栏
08-31 5069
Flutter 的绘制主要涉及两个Widget： CustomPainter, CustomPaint CustomPainter：提供画布的组件； 有几个主要的参数： a. painter : 绘制的对象，是一个CustomPaint。它的绘制是在children之前。如果设置了children，该painter绘制的内容会被覆盖。  b. foregroundPainter： 绘制...
Flutter：教你用CustomPaint画一个自定义的CircleProgressBar
2401_84123357的博客
05-01 370
总之啊，家里没矿的同学们，如果你们想以后的日子过得好一些，多想想你们的业余时间怎么安排吧；技术方面的提升肯定是重中之重，但是技术外的一些“软实力”也不能完全忽视，很多时候升职确实是因为你的技术足够强，但也与你的“软实力”密切相关在这我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅并给下属员工学习的精品资料。
drawCircle方法：绘制圆形
热门推荐
让 学习 成为一种 习惯 ( 谭祖爱 & 技术博客 )
12-22 2万+
drawCircle方法：绘制圆形 【功能说明】该方法用于在画布上绘制圆形，通过指定圆形圆心的坐标和半径来实现。该方法是绘制圆形的主要方法，同时也可以通过设置画笔的空心效果来绘制空心的圆形。 【基本语法】public void drawCircle (float cx, float cy, float radius, Paint paint) 参数说明 cx：圆心的x坐标。
Flutter 画笔(Paint)、绘制弧(drawArc)(1)，阿里大神最佳总结Flutter进阶学习笔记
2401_84148955的博客
04-08 523
【Android 详细知识点思维脑图（技能树）】我个人是做Android开发，已经有十来年了，目前在某创业公司任职CTO兼系统架构师。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。
flutter窗口初始和绘制流程详析
08-25
Flutter 窗口初始和绘制流程详析 Flutter 窗口初始和绘制流程是 Flutter 框架中的一部分，它负责处理窗口的初始和绘制过程。下面是 Flutter 窗口初始和绘制流程的详细介绍。 一、环境准备 在 Flutter 框架中，...
flutter 自定义曲线绘制
07-01
首先，`canvas`是Flutter中的核心绘图接口，它提供了一系列的绘图方法，如`drawLine`、`drawPath`、`drawCircle`等，用于在屏幕上绘制图形。自定义曲线绘制主要依赖于`canvas.drawPath`方法，因为路径（Path）可以...
在Flutter中的小部件之间绘制箭头-Flutter开发
05-27
首先，我们需要理解Flutter的绘图系统，它基于Skia图形库，允许开发者通过Canvas对象进行低级绘图操作，包括绘制线条、形状、文本等。在小部件之间绘制箭头，我们可以通过自定义一个Widget并利用`CustomPaint`组件来...
Flutter入门系列-自定义Paint
好好学习，天天向上
04-27 210
//customPaint widget //foregroundPaint CustomPainter的实现类 //在子类中canvas和paint配合进行原的绘制 class CustomCirclePage extends StatefulWidget { @override _CustomCirclePageState createState() => _CustomCirclePageState(); } class _CustomCirclePageState extends.
Flutter 画笔(Paint)、绘制直线(drawLine)
我很好
08-29 9886
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...
Android 绘图基础：Canvas画布——自定义View基础（绘制表盘、矩形、圆形、弧、渐变）
WULILL的博客
03-03 4533
Android 绘图基础：Canvas画布——自定义View基础（绘制表盘、矩形、圆形、弧、渐变）
Flutter 画笔(Paint)、绘制直线(drawLine)(1)，一个Android程序员的腾讯面试心得
2401_84148981的博客
04-08 702
/在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override。
flutter图片实现圆形的四种方法
大圣归来圣骑士清欢的博客
10-11 3338
flutter图片实现圆形的四种方法
一起看画布Canvas
Rongxuan的博客
09-16 396
Canvas 本意是画布的意思,然而将它理解为绘制工具一点也不为过。通过 Canvas 提供的 API，你可以在画布上绘制出绝大部分图形，再配合上一些操作画布的 API，比如旋转剪裁等变换画布的操作，就能够巧妙地画出更加复杂的图形。
flutter CustomPaint解析
晨风的小窝
05-28 2284
import 'dart:math'; import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { r
flutter绘制椭圆
最新发布
05-29
在Flutter中，要绘制椭圆，可以使用CustomPaint和Canvas来实现。具体步骤如下： 1.创建一个CustomPaint Widget，然后重写它的paint方法。 2.在paint方法中获取到Canvas对象。 3.使用Canvas的drawOval方法来绘制椭圆...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值