vue3水波柱状图 ,实现
效果图
//引用页面
<div style="height: 60px;background-color: #fff;border-radius: 5px;width: 40px;"><WavePercentage:percentage="progress"primary-color="#ffcb7c"secondary-color="#ffcb7c"/></div>import WavePercentage from './WavePercentage.vue'
const progress = ref(60)//WavePercentage页面
<template><div ref="containerRef" class="wave-percentage-container"><canvas ref="canvasRef" class="wave-canvas"></canvas></div></template><script setup>import { ref, onMounted, onUnmounted, defineProps, withDefaults } from 'vue'class Wave {constructor(height, power = 60) {this.__force = 0this.__wavePower = powerthis.__count = 0this.__y = heightthis.__h = heightthis.__pos = 0}get height() {return this.__h}set height(value) {this.__h = Math.max(0, value)}get percent() {return (1 - this.__y / this.__h) * 100}set percent(value) {this.__y = this.__h * (1 - value / 100)}update() {// 添加一个持续的波动效果,但不改变实际百分比this.__count += 0.1this.__pos += 0.04this.__force = Math.sin(this.__count)}draw(ctx, w, h, makeGrd, percentage) {// 固定波浪高度,但添加动态波动效果const actualY = this.__h * (1 - percentage / 100)ctx.fillStyle = makeGrd(h)ctx.beginPath()ctx.moveTo(0, actualY)const p = Math.sin(this.__pos)ctx.quadraticCurveTo(w * (p + 0.25), actualY + (this.__wavePower * this.__force * 0.2), w * (p + 0.5), actualY)ctx.quadraticCurveTo(w * (p + 0.75), actualY - (this.__wavePower * this.__force * 0.2), w, actualY)ctx.lineTo(w, h)ctx.lineTo(0, h)ctx.lineTo(0, actualY)ctx.closePath()ctx.fill()}}// Props definitionconst props = defineProps({percentage: {type: Number,default: 50,validator: (value) => value >= 0 && value <= 100},wavePower: {type: Number,default: 100},primaryColor: {type: String,default: '#419dff'},secondaryColor: {type: String,default: '#66bfff'}})// Refs for canvas and containerconst containerRef = ref(null)const canvasRef = ref(null)// Animation variableslet animationFrameId = nulllet wave = nulllet ctx = null// Create gradient functionconst makeGrd = (ctx, h, primaryColor, secondaryColor) => {const g = ctx.createLinearGradient(0, 0, 0, h)g.addColorStop(0, primaryColor)g.addColorStop(1, secondaryColor)return g}// Draw functionconst draw = () => {if (!containerRef.value || !canvasRef.value) returnconst canvas = canvasRef.valueconst container = containerRef.value// Update dimensionsconst w = canvas.width = container.clientWidthconst h = canvas.height = container.clientHeight// Recreate wave if not exists or dimensions changedif (!wave || wave.height !== h) {wave = new Wave(h, props.wavePower)}// Update wave animationwave.update()ctx = canvas.getContext('2d')// Clear canvasctx.globalCompositeOperation = 'source-over'ctx.fillStyle = "rgba(255, 255, 255, 1)"ctx.fillRect(0, 0, w, h)ctx.globalCompositeOperation = 'xor'ctx.fillStyle = "rgba(0, 0, 0, 1)"ctx.fillRect(0, 0, w, h)// Draw wave with current percentagewave.draw(ctx, w, h, (h) => makeGrd(ctx, h, props.primaryColor, props.secondaryColor), props.percentage)// Draw percentage textctx.textAlign = "center"ctx.textBaseline = 'middle'ctx.font = 'bold 1rem serif'ctx.fillStyle = "rgba(0, 0, 0, 1)"ctx.fillText(`${props.percentage | 0}%`, w / 2, h / 2)// Continue animationanimationFrameId = requestAnimationFrame(draw)}// Lifecycle hooksonMounted(() => {animationFrameId = requestAnimationFrame(draw)})onUnmounted(() => {if (animationFrameId) {cancelAnimationFrame(animationFrameId)}})</script><style scoped>.wave-percentage-container {position: relative;width: 100%;height: 100%;}.wave-canvas {width: 100%;height: 100%;}</style>
直接贴代码可以直接使用,支持动态设置值,修改波纹颜色
相关文章:
vue3水波柱状图 ,实现
效果图 //引用页面 <div style"height: 60px;background-color: #fff;border-radius: 5px;width: 40px;"><WavePercentage:percentage"progress"primary-color"#ffcb7c"secondary-color"#ffcb7c"/></div>import Wa…...
如何在两台 PostgreSQL 服务器之间使用逻辑复制槽进行数据复制
如何在两台 PostgreSQL 服务器之间使用逻辑复制槽进行数据复制 如何在两台 PostgreSQL 服务器之间使用逻辑复制槽进行数据复制环境准备1. 配置主服务器(Publisher)1.1 修改 postgresql.conf1.2 修改 pg_hba.conf1.3 重启 PostgreSQL 服务1.4 创建逻辑复制…...
System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本
问题1:“/”应用程序中的服务器错误。 System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本。 说明: 执行当前 Web 请求期间,出现未经处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细…...
【机器人】振动分析和控制工具之Bode图
Bode 图完整介绍 Bode 图由两个部分组成: 幅值图 (Magnitude Plot):描述系统对不同频率输入信号的增益大小(幅值响应)。相位图 (Phase Plot):描述系统输出信号相对于输入信号的相位差。 Bode 图的横轴是频率&#x…...
生成:安卓证书uniapp
地址: https://ask.dcloud.net.cn/article/35777 // 使用keytool -genkey命令生成证书: 官网: keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore ----------------------------------…...
酒店/电影推荐系统里面如何应用深度学习如CNN?
【1】酒店推荐系统里面如何应用CNN?具体过程是什么 在酒店推荐系统中应用卷积神经网络(CNN)并不是一个常见的选择,因为 CNN 主要用于处理具有空间结构的数据,如图像、音频和某些类型的序列数据。然而,在某…...
【CSS in Depth 2 精译_069】11.3 利用 OKLCH 颜色值来处理 CSS 中的颜色问题(上)
当前内容所在位置(可进入专栏查看其他译好的章节内容) 第四部分 视觉增强技术 ✔️【第 11 章 颜色与对比】 ✔️ 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法 11.2.2.1 RGB…...
Redis篇-6--原理篇5--单线程模型
1、概述 Redis 采用单线程模型来处理客户端请求,这意味着在任意时刻只有一个命令被执行。这种设计简化了 Redis 的实现,并确保了高并发环境下的数据一致性。尽管 Redis 是单线程的,但它通过高效的内存管理和网络 I/O 操作,仍然能…...
Java版-图论-最小生成树-Prim算法
实现描述 如图: Prim算法的基本思想是从一个顶点开始,逐步构建最小生成树。具体步骤如下: 随机选取一个顶点作为起始点,并将其加入最小生成树的集合中。从该顶点出发,选择一条边连接到其他未被访问的顶点中的最小权…...
Python 基础学习(一)
一.基础语法 注释 Python中单行注释以 # 开头,如下: #!/usr/bin/python3# 第一个注释 print ("Hello, Python!") # 第二个注释多行注释可以用多个 # 号,还有 ‘’’ 和 “”": #!/usr/bin/python3# 第一个注释…...
vue2使用rtsp视频流接入海康威视摄像头(纯前端)
一.获取海康威视rtsp视频流 海康威视官方的RTSP最新取流格式如下: rtsp://用户名:密码IP:554/Streaming/Channels/101 用户名和密码 IP就是登陆摄像头时候的IP(笔者这里IP是192.168.1.210) 所以笔者的rtsp流地址就是rtsp://用户名:密码192.168.1.210:554/Streaming/Channel…...
利用PHP和GD库实现图片拼接的方法
利用PHP和GD库实现图片拼接的方法主要涉及到加载图片资源、创建目标画布、将图片资源绘制到目标画布上,并最终输出或保存拼接后的图片。以下是实现图片拼接的基本步骤: 加载图片资源: 使用imagecreatefromjpeg()、imagecreatefrompng()或ima…...
自动驾驶领域常用的软件与工具
CarSim:专门针对车辆动力学的仿真软件,能够预测和仿真汽车整车的操纵稳定性、制动性、平顺性、动力性和经济性。CarMaker:德国IPG公司推出的动力学、ADAS和自动驾驶仿真软件,提供精准的车辆本体模型和闭环仿真系统。VTD (Virtual …...
uniapp-内部项目使用文档
uniapp-内部项目使用文档 目录 uniapp-内部项目使用文档阶段1自行实现内容:阶段1问题记录: 阶段2自行实现内容: 阶段3 APP项目介绍及规范阶段4 公共组件方法UseList 列表页面HooksListItem 列表项uni-load-more 列表加载更多组件CardTitle 列…...
ASP .NET Core 中的环境变量
在本文中,我们将通过组织一场小型音乐会(当然是在代码中)来了解 ASP .NET Core 中的环境变量。让我们从创建项目开始: dotnet new web --name Concert 并更新Program.cs: // replace this: app.MapGet("/"…...
学科竞赛管理系统
文末获取源码和万字论文,制作不易,感谢点赞支持。 摘 要 随着国家教育体制的改革,全国各地举办的竞赛活动数目也是逐年增加,面对如此大的数目的竞赛信息,传统竞赛管理方式已经无法满足需求,为了提高效率&am…...
unity 让文字变形
效果: using TMPro; using UnityEngine; using NaughtyAttributes;[ExecuteInEditMode] public class TMTextPerpective : MonoBehaviour {[OnValueChanged("DoPerspective")][Range(-1f, 1f)]public float CenterBias 0f;[OnValueChanged("DoPers…...
Linux高并发服务器开发 第一天(Linux的目录结构 cd用法 终端提示符格式)
目录 1.命令解析器:shell 2.LINUX下的目录结构 3.cd的使用 3.1cd 绝对路径 3.2cd 相对路径 3.3cd 回车 3.4cd - 4. 终端提示符格式 1.命令解析器:shell 默认运行与计算机系统终端的 用来解析用户输入命令的工具 内核:操作系统的核…...
可造成敏感信息泄露!Spring Boot之Actuator信息泄露漏洞三种利用方式总结
1.介绍 Spring Boot是一个基于Spring的套件,它提供了一个即开即用的应用程序架构,可以简化Spring应用的创建及部署流程,帮助开发者更轻松快捷地构建出企业及应用。 Spring Boot项目中Actuator模块提供了众多HTTP接口端点(Endpoi…...
支持图像和视频理解多模态开源大模型:CogVLM2 CogVLM2-Video
CogVLM2和CogVLM2-Video是新一代的开源模型,支持图像和视频理解,具有显著的性能提升。最近发布的更新包括CogVLM2论文的发表、在线演示和对视频理解的支持,能够处理最多1分钟的视频。新模型支持中英文,文本长度可达8K,…...
低成本自动化方案:OpenClaw+Qwen3-32B替代SaaS API调用实测
低成本自动化方案:OpenClawQwen3-32B替代SaaS API调用实测 1. 为什么选择本地AI自动化方案 去年我在处理海外客户邮件时,每月需要支付近200美元的SaaS服务费。这些费用主要消耗在邮件分类、摘要生成和自动回复等基础功能上。当我发现OpenClaw框架可以对…...
实战应用:从git安装到项目初始化,用快马生成数据分析项目版本控制模板
今天想和大家分享一个数据分析项目中经常被忽视但极其重要的环节——Git版本控制的初始化配置。作为一个经常用Python做数据分析的开发者,我发现很多人在项目初期就忽略了版本控制的重要性,导致后期协作时出现各种混乱。下面我就结合InsCode(快马)平台&a…...
自适应混沌粒子群优化算法在PID参数整定中的应用:高效控制策略的代码详解与模型分享
自适应混沌粒子群整定PID/ACPSO-PID/PID参数整定 ACPSO(自适应混沌粒子群优化)整定PID(比例-积分-微分控制器)是一种高效的控制参数优化方法。 它利用粒子群优化(PSO)的基本框架,同时融入混沌理…...
ArcSWAT实战避坑指南 | 从数据库配置到模型运行,详解常见报错与高效解决方案
1. ArcSWAT入门避坑:从安装到首次运行的关键准备 第一次接触ArcSWAT的水文研究者,往往会在安装环节就踩坑。我见过太多人因为版本兼容性问题,导致后续模型根本无法启动。这里分享几个血泪教训: ArcGIS版本选择是首要关键。虽然官方…...
为什么你的Python多解释器程序总在崩溃?进程隔离、对象序列化与引用计数泄漏全链路诊断,立即修复
第一章:Python多解释器通信的底层本质与崩溃根源Python 多解释器(Multi-Interpreter,PEP 684)是 CPython 3.12 引入的核心机制,旨在实现真正的并行解释器隔离——每个解释器拥有独立的全局状态(如 sys.modu…...
PyTorch 2.8 + CUDA 12.4镜像实战教程:适配10核CPU+120GB内存的完整配置
PyTorch 2.8 CUDA 12.4镜像实战教程:适配10核CPU120GB内存的完整配置 1. 镜像概述与环境准备 1.1 核心特性介绍 这个深度优化镜像基于RTX 4090D 24GB显卡和CUDA 12.4驱动构建,专为高性能深度学习任务设计。主要特点包括: 硬件适配&#…...
ChezScheme测试性能优化:从53分钟到8分钟的效率跃迁
ChezScheme测试性能优化:从53分钟到8分钟的效率跃迁 【免费下载链接】ChezScheme Chez Scheme 项目地址: https://gitcode.com/gh_mirrors/ch/ChezScheme 一、痛点分析:串行测试的性能瓶颈 识别测试效率问题 在软件开发迭代过程中,…...
基于ChatGPT的文字冒险游戏开发实战:从对话引擎到状态管理
背景痛点:当传统文字游戏遇上AI叙事革命 文字冒险游戏(Interactive Fiction, IF)有着悠久的历史,从早期的《巨洞冒险》到后来的《80天》,其核心魅力在于通过文字构建一个充满想象力的世界,让玩家通过输入指…...
构建全渠道智能通知系统:从高可用架构到用户体验优化
1. 全渠道智能通知系统的核心价值 想象一下这样的场景:你在电商平台下单后,系统立即通过短信发送订单确认通知;当你忘记支付时,APP推送会及时提醒;订单发货后,邮箱里静静躺着物流信息;而站内信则…...
手把手教你用两块STM32F103C8T6实现CAN总线点对点通信(附完整代码)
从零开始实现STM32F103C8T6双板CAN总线通信实战指南 在嵌入式开发领域,CAN总线因其高可靠性和实时性成为工业控制、汽车电子等场景的首选通信协议。对于初学者而言,使用两块STM32F103C8T6开发板搭建CAN通信系统是掌握该技术的经典入门项目。本文将彻底拆…...
