Flutter绘制拖尾效果

news2024/11/27 18:23:29

演示:

代码:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:kq_flutter_widgets/widgets/chart/ex/extension.dart';

class TrailingView extends StatelessWidget {
  const TrailingView({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (v1, v2) {
      Path path = Path();
      path.moveTo(50, 50);
      path.cubicTo(50, 50, 100, 300, 300, 400);

      return CustomPaint(
        size: Size(v2.maxWidth, v2.maxHeight),
        painter: Trailing(path: path, r: 8),
      );
    });
  }
}

///拖尾效果
class Trailing extends CustomPainter {
  ///路径
  final Path path;

  ///起始值大小半径
  final double r;

  Trailing({
    required this.path,
    required this.r,
  });

  @override
  void paint(Canvas canvas, Size size) {
    PathMetric? pathMetric1 = path.computeMetric();
    if (pathMetric1 != null) {
      int length1 = pathMetric1.length.toInt();
      for (int i = 0; i < length1.toInt(); i++) {
        Tangent? tangent1 = pathMetric1.getTangentForOffset(i.toDouble());
        double mix = i / length1.toInt();
        if (tangent1 != null) {
          Offset cur = tangent1.position;
          canvas.drawCircle(
              cur,
              r * mix,
              Paint()
                ..color = Colors.redAccent
                ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 8));
        }
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

主要思路:

根据路径获取路径上的点,并从路径的起始点到终点绘制从大变小的圆点,且设置画笔为外发光模式,就可以达到一个可以根据路径显示的拖尾效果了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1028746.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

成绩发布系统攻略

作为一名教师&#xff0c;管理学生成绩是我们工作中的重要任务之一。传统的手工成绩记录和发布方式已经无法满足现代教育的需求。因此&#xff0c;制作一个高效、安全、便捷的学生成绩发布系统是至关重要的。本文将为您介绍如何制作学生成绩发布系统&#xff0c;以提高教学效率…

MyBatis-Plus的常用注解

一、TableName 在使用MyBatis-Plus实现基本的CRUD时&#xff0c;我们并没有指定要操作的表&#xff0c;只是在Mapper接口继承BaseMapper时&#xff0c;设置了泛型User&#xff0c;而操作的表为user表&#xff0c;由此得出结论&#xff0c;MyBatis-Plus在确定操作的表时&#xf…

Flutter实现PS钢笔工具,实现高精度抠图的效果。

演示&#xff1a; 代码&#xff1a; import dart:ui;import package:flutter/material.dart hide Image; import package:flutter/services.dart; import package:flutter_screenutil/flutter_screenutil.dart; import package:kq_flutter_widgets/widgets/animate/stack.dart…

react如何根据变量渲染组件

三元运算符useMemo 第一种方法的缺点&#xff1a;其他变量更改时&#xff0c;会再次进入三元运算符,例子如下&#xff1a; //这里有一个父组件:Father { n0 ? <Father><div>{111}</div></Father> : <div>{111}</div> }第二种方法如图 …

apk获取MD5方式记录

1&#xff0c;低版本android studio 我这里是Android studio Arctic Fox 直接使用keytool -printcert -jarfile xxx.apk获取 获取得到的效果&#xff1a; 2&#xff0c;高版本android studio 在高版本下&#xff0c;按照如下图点击打开到gradle。在③步骤下直接输入signning…

《向量数据库指南》——火山引擎向量数据库对正式外开放服务

向量数据库技术全景 经过长期的内部探索和优化,抖音采用的向量数据库产品结构如下图所示:基于云基础设施,提供经过深度打磨和优化的各个引擎,提供从多模态数据写入,到向量生成,再到在线检索,以及上线后的弹性调度和监控的一整套全链路解决方案。 火山引擎向量数据库的场…

C++ 里 ++i 是原子操作吗?

1.什么是原子操作 在多线程环境下,原子操作是指不会被线程调度机制打断的操作;这种操作一旦开始,就一直运行到结束,中间不会有任何 context switch (切换到另一个线程)。 原子操作可以确保某些特定操作在多线程条件下,不会由于线程切换而导致数据污染。比如,对一个变量的读/写…

ASEMI快恢复二极管S1FD40A180H参数,S1FD40A180H应用

编辑-Z S1FD40A180H参数描述&#xff1a; 型号&#xff1a;S1FD40A180H 最大直流反向电压VR&#xff1a;1800V 最大工作峰值反向电压VRWM&#xff1a;1440V 最大平均正向电流IF&#xff1a;40A 非重复正向浪涌电流IFSM&#xff1a;500A 操作和储存温度范围TJ ,TSTG&…

洞察2023:中国心室辅助装置行业竞争格局及市场份额

本文核心数据&#xff1a;代表性企业排名 ; 代表性企业优势分析等 1、中国心室辅助装置行业竞争梯队 人工心脏 ( Artificial Heart, AH ) 是机械辅助类器械的代表&#xff0c;用于替代或辅助心脏泵血功能。按照功能可分为心室辅助装置 ( Ventricular Assist Device&#xff0…

Python与数据分析--每天绘制Matplotlib库实例图片3张-第1天

目录 1.实例1--Bar color demo 2.实例2--Bar Label Demo 3.实例3--Grouped bar chart with labels 1.实例1--Bar color demo import matplotlib.pyplot as plt # 支持中文 plt.rcParams[font.sans-serif] [SimHei] # 用来正常显示中文标签 plt.rcParams[axes.unicode_minus…

Node.js环境安装与服务设置,结合内网穿透随时随地公网访问!

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

spring boot +vue 博客系统,开源的资源网站

spring boot vue 博客系统&#xff0c;开源的资源网站&#xff08;Aurora前后端分离博客) 体验地址&#xff1a;http://blog.tlzcf.vip/ 相关技术 前端&#xff1a; 样式来自于&#xff1a;hexo的aurora主题基础框架&#xff1a;vue3(前台) vue2(后台)状态管理&#xff1a;…

蓝桥杯每日一题2023.9.21

蓝桥杯2021年第十二届省赛真题-异或数列 - C语言网 (dotcpp.com) 题目描述 Alice 和 Bob 正在玩一个异或数列的游戏。初始时&#xff0c;Alice 和 Bob 分别有一个整数 a 和 b&#xff0c;有一个给定的长度为 n 的公共数列 X1, X2, , Xn。 Alice 和 Bob 轮流操作&#xff0…

安科瑞为工业能效提升行动计划提供EMS解决方案-安科瑞黄安南

摘要: 2022年6月29日工信部、发改委、财政部、生态环境部、国资委、市场监管总局六部门联合下发《关于印发工业能效提升行动计划的通知》&#xff08;工信部联节〔2022〕76号&#xff0c;以下简称《行动计划》&#xff09;&#xff0c;主要目的是为了提高工业领域能源利用效率&…

共享门店:一种创新的商业模式

你是否想过&#xff0c;如果你的门店可以和你的客户、好友、合作伙伴共享经营权和收益权&#xff0c;你的门店会有多大的发展空间和盈利能力&#xff1f;你是否想过&#xff0c;如果你的门店可以利用互联网、人工智能、物联网等先进技术&#xff0c;你的门店会有多高的效率和竞…

MySQL 学习笔记(基础)

首先解释数据库DataBase&#xff08;DB&#xff09;&#xff1a;即存储数据的仓库&#xff0c;数据经过有组织的存储 数据库管理系统DataBase Management System&#xff08;DBMS&#xff09;&#xff1a;管理数据库的软件 SQL&#xff08;Structured Query Language&#xf…

GIT使用需知,哪些操作会导致本地代码变动

系列文章目录 手把手教你安装Git&#xff0c;萌新迈向专业的必备一步 GIT命令只会抄却不理解&#xff1f;看完原理才能事半功倍&#xff01; 常用GIT命令详解&#xff0c;手把手让你登堂入室 GIT实战篇&#xff0c;教你如何使用GIT可视化工具 GIT使用需知&#xff0c;哪些操作…

手机全自动无人直播系统,成为商家实景无人直播带货好帮手!

商家手机无人直播系统最近太火爆了&#xff0c;那么&#xff0c;这个产品究竟是什么呢&#xff1f;全自动无人直播系统是一款手机自动直播软件&#xff0c;目地在于帮助广大商家和企业实现无人直播卖货&#xff0c;从而解放双手、降低人工干预的需求。 当然&#xff0c;无人直播…

ModStartCMS v7.3.0 富文本MP3支持,后台组件优化

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议&#xff0c;免费且不限制商业使用。 功能特性 丰富的模块市…

抗锯齿的线

抗锯齿的线 右下角的时候h是0,到顶部 h是1&#xff0c;然后中间y相距4个像素&#xff0c;那dy就是0.25 如果让h abs(fract(h - 0.5) - 0.5) 中间一行0.5&#xff0c;第一行 第三行都是0.25&#xff0c;两端都是0 根据插值来看 这里是 如果用h/dy 那么第一行以上&#xff0…