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

最新推荐文章于 2024-04-17 08:10:20 发布
最新推荐文章于 2024-04-17 08:10:20 发布
阅读量1k 收藏 17
点赞数 19
分类专栏： 程序员 文章标签： flutter java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84009317/article/details/137188419
版权
本文详细介绍了如何使用Flutter的Paint类绘制不同类型的线条，包括StrokeCap.round（半圆端点）和Square（半正方形端点），以及如何绘制等间距刻度和网格线。同时，讨论了invertColors属性在颜色处理中的应用。
摘要由CSDN通过智能技术生成

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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

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

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

class MyPainter extends CustomPainter {

@override

void 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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void 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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

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

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

class MyPainter extends CustomPainter {

@override

void 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

@override

bool

最低0.47元/天 解锁文章
2401_84009317
关注
专栏目录
flutter 自定义曲线绘制
07-01
首先，`canvas`是Flutter中的核心绘图接口，它提供了一系列的绘图方法，如`drawLine`、`drawPath`、`drawCircle`等，用于在屏幕上绘制图形。自定义曲线绘制主要依赖于`canvas.drawPath`方法，因为路径（Path）可以...
Flutter 绘制Paint
chwei_cson的专栏
08-31 5709
Flutter 的绘制主要涉及两个Widget： CustomPainter, CustomPaint CustomPainter：提供画布的组件； 有几个主要的参数： a. painter : 绘制的对象，是一个CustomPaint。它的绘制是在children之前。如果设置了children，该painter绘制的内容会被覆盖。  b. foregroundPainter： 绘制...
Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字
热门推荐
xhuww的博客
09-22 1万+
Flutter Text 实现下划线、波浪线、删除线，添加文字背景色，设置渐变文字、添加阴影、描边，实现空心文字。
Flutter 画笔(Paint)、绘制弧(drawArc)(1)，阿里大神最佳总结Flutter进阶学习笔记
2401_84148955的博客
04-08 568
【Android 详细知识点思维脑图（技能树）】我个人是做Android开发，已经有十来年了，目前在某创业公司任职CTO兼系统架构师。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。
Flutter 画笔(Paint)、绘制弧(drawArc)
2301_82242499的博客
04-17 816
override@override//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override。
flutter窗口初始和绘制流程详析
08-25
Flutter 窗口初始和绘制流程详析 Flutter 窗口初始和绘制流程是 Flutter 框架中的一部分，它负责处理窗口的初始和绘制过程。下面是 Flutter 窗口初始和绘制流程的详细介绍。 一、环境准备 在 Flutter 框架中，...
Flutter 绘制加载动画
08-14
绘制加载动画：由小圆组成的大圆 效果视频展示：https://live.csdn.net/v/417383 请查看我的博客Flutter进阶，有此视频的代码介绍
在Flutter中的小部件之间绘制箭头-Flutter开发
05-27
这个方法会使用`canvas`参数来执行实际的绘图操作，比如使用`canvas.drawLine()`绘制直线，`canvas.drawPath()`绘制箭头头。 2. **定义箭头属性**：在`ArrowPainter`中，可以定义箭头的属性，如起点、终点坐标，...
Flutter 画笔(Paint)、drawCircle(绘制圆)、PaintingStyle
fghis的博客
04-05 893
面试题集可以帮助你查漏补缺，有方向有针对性的学习，为之后进大厂做准备。但是如果你仅仅是看一遍，而不去学习和深究。那么这份面试题对你的帮助会很有限。最终还是要靠资深技术水平说话。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。建议先制定学习计划，根据学习计划把知识点关联起来，形成一个系统化的知识体系。学习方向很容易规划，但是如果只通过碎片化的学习，对自己的提升是很慢的。
Flutter入门系列-自定义Paint
好好学习，天天向上
04-27 226
//customPaint widget //foregroundPaint CustomPainter的实现类 //在子类中canvas和paint配合进行原的绘制 class CustomCirclePage extends StatefulWidget { @override _CustomCirclePageState createState() => _CustomCirclePageState(); } class _CustomCirclePageState extends.
flutter实现分割线的三种方法
bugyinyin的博客
11-16 1072
这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》，从编程语言到项目实战，一条龙服务！！
Flutter 画笔(Paint)、绘制直线(drawLine)(1)，一个Android程序员的腾讯面试心得
2401_84148981的博客
04-08 730
/在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override。
Flutter 画笔(Paint)、绘制直线(drawLine)(1)
2401_84132401的博客
04-10 1069
/在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override。
Flutter 画笔(Paint)、绘制弧(drawArc)(1)
2401_84132617的博客
04-05 671
题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。【Android思维脑图（技能树）】
flutter CustomPaint解析
晨风的小窝
05-28 2384
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之Decoration（编写圆角竖线）
lyj1005353553的专栏
12-10 1077
自己根据资料编写圆角竖线，具体实现代码如下： Container( margin: EdgeInsets.fromLTRB(10, 10, 5, 10), width: 3, height: 11, decoration: ShapeDecoration( color: Colors.lig...
Flutter 画笔(Paint)、绘制直线(drawLine)(2)
2401_84123357的博客
04-17 733
override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override@override//画背景//在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true@override。
flutter 着色器绘制
最新发布
10-12
`CustomPaint` 组件允许你在 widget 树中插入自定义的 Skia 图形上下文（SkCanvas），然后通过编写 Dart 代码，使用 Skia API 来绘制各种类型的着色器。例如，你可以使用 ` LinearGradient` 来创建线性渐变，或者 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值