我们需要实现一个垂直进度条效果,但使用图片裁剪的方式。具体需求: 1. 图片位置固定,容器对齐其左边和下边,宽度和图片相同。 2. 容器背景透明,调整裁剪容器的高度,使其有高度进度条的感觉(从下往上增长)。 实现思路: - 固定图片的位置(例如,在某个Item内定位)。 - 创建一个裁剪容器,宽度与图片相同,高度由进度值控制(从0到图片高度)。 - 裁剪容器内放置图片,并将图片的底部与裁剪容器的底部对齐(因为进度是从下往上增长,所以图片需要向上移动)。 - 裁剪容器设置`clip: true`,这样图片超出裁剪容器的部分将被隐藏。 具体步骤: 1. 用一个Item作为图片的容器(固定位置)。 2. 在容器内,再创建一个Item作为裁剪容器(宽度与图片相同,高度由进度值控制)。 3. 裁剪容器内放置图片,并设置图片的y坐标为:-(图片高度 - 裁剪容器高度),这样图片的底部就会与裁剪容器的底部对齐。 注意:图片的锚定或位置设置要确保底部对齐。 假设我们有一张高度为200px的图片,进度为50%时,裁剪容器高度为100px,此时图片的y坐标应为-100px(即向上移动100px),这样图片的底部就对齐了裁剪容器的底部,而裁剪容器只显示图片的下半部分(从下往上显示了一半)。 我们将通过一个进度值(0.0到1.0)来控制裁剪容器的高度(0到图片高度)。

import QtQuick 2.7
import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4
ApplicationWindow {id: mainWindowwidth: 800height: 600visible: truetitle: "图片裁剪进度条 - 修正版"color: "#121212"// 图片源 - 使用渐变图片模拟进度条property string imageSource: "qrc:/image/a.png"// 进度值 (0.0 - 1.0)property real progress: 0.5// 图片属性property int imageWidth: 50property int imageHeight: 200// 主布局Item {anchors.fill: parent// 状态信息 - 显示在顶部Text {anchors.top: parent.topanchors.horizontalCenter: parent.horizontalCenteranchors.topMargin: 20text: "图片裁剪进度条 - 固定在左下角"font.bold: truefont.pixelSize: 18color: "#4CAF50"}// ==============================================// 图片容器 - 固定在左下角 (核心修正部分)// ==============================================Item {id: imageContainerwidth: imageWidth  // 宽度与图片相同height: imageHeight // 高度与图片相同anchors.left: parent.left // 对齐父元素左边anchors.bottom: parent.bottom // 对齐父元素底边anchors.margins: 20 // 边距// 背景网格 - 帮助可视化Rectangle {anchors.fill: parentcolor: "transparent"border.color: "#333"border.width: 1// 网格线Canvas {anchors.fill: parentonPaint: {var ctx = getContext("2d")ctx.clearRect(0, 0, width, height)ctx.strokeStyle = "#333"ctx.lineWidth = 1// 绘制水平线for (var y = 0; y <= height; y += 10) {ctx.beginPath()ctx.moveTo(0, y)ctx.lineTo(width, y)ctx.stroke()}// 绘制垂直线for (var x = 0; x <= width; x += 10) {ctx.beginPath()ctx.moveTo(x, 0)ctx.lineTo(x, height)ctx.stroke()}}}}// ==============================================// 核心修正:裁剪容器实现进度条效果// ==============================================Item {id: cropContainerwidth: parent.width // 宽度与图片相同height: imageHeight * progress // 高度由进度值控制anchors.left: parent.left // 对齐左边anchors.bottom: parent.bottom // 对齐底边clip: true // 关键:启用裁剪// 图片元素Image {id: progressImagesource: imageSourcesourceSize.width: imageWidth // 原始宽度sourceSize.height: imageHeight // 原始高度asynchronous: true // 异步加载// 关键修正:图片底部对齐容器底部anchors.bottom: parent.bottom}}// 当前进度文本Text {anchors.top: parent.top // 锚定到容器顶部anchors.topMargin: -30 // 在图片上方显示anchors.horizontalCenter: parent.horizontalCenter // 水平居中text: Math.round(progress * 100) + "%" // 显示百分比font.pixelSize: 20 // 字体大小font.bold: true // 粗体color: "white" // 文本颜色style: Text.Outline // 文本轮廓styleColor: "#000" // 轮廓颜色}// 边框装饰Rectangle {anchors.fill: parent // 与图片容器相同大小color: "transparent" // 透明背景border.color: "#4CAF50" // 边框颜色border.width: 2 // 边框宽度radius: 4 // 圆角半径}}// ==============================================// 控制面板 - 在右侧显示// ==============================================Column {id: controlPanelwidth: 300anchors.left: imageContainer.right // 在图片容器右侧anchors.bottom: parent.bottom // 对齐底部anchors.margins: 30 // 边距spacing: 20 // 子元素间距// 标题Text {text: "进度控制" // 标题文本font.bold: true // 粗体font.pixelSize: 24 // 字体大小color: "#4CAF50" // 标题颜色}// 进度滑块Column {width: parent.widthspacing: 5// 滑块标签Text {text: "进度值: " + Math.round(progress * 100) + "%" // 显示当前进度font.pixelSize: 18 // 字体大小color: "white" // 文本颜色}// 进度滑块Slider {id: progressSliderwidth: parent.width // 宽度填满minimumValue: 0.0 // 最小值maximumValue: 1.0 // 最大值value: progress // 当前值onValueChanged: progress = value // 值改变时更新进度// 自定义滑块样式style: SliderStyle {groove: Rectangle {implicitHeight: 8 // 滑槽高度radius: 4 // 圆角color: "#333" // 背景色// 进度填充Rectangle {height: parent.heightwidth: control.value * parent.width // 根据进度填充radius: 4 // 圆角gradient: Gradient {GradientStop { position: 0.0; color: "#4CAF50" } // 绿色GradientStop { position: 0.5; color: "#2196F3" } // 蓝色GradientStop { position: 1.0; color: "#FF9800" } // 橙色}}}// 滑块手柄handle: Rectangle {width: 24 // 宽度height: 24 // 高度radius: 12 // 圆形color: control.pressed ? "white" : "#f0f0f0" // 按下时白色,否则浅灰色border.color: "#4CAF50" // 边框颜色border.width: 2 // 边框宽度// 中心点Rectangle {anchors.centerIn: parentwidth: 8height: 8radius: 4color: "#4CAF50"}}}}}// 预设按钮Grid {columns: 3 // 3列布局spacing: 10 // 按钮间距width: parent.width// 预设按钮文本property var presets: [{text: "0%", value: 0.0},{text: "25%", value: 0.25},{text: "50%", value: 0.5},{text: "75%", value: 0.75},{text: "100%", value: 1.0},{text: "随机", value: -1}]// 生成预设按钮Repeater {model: controlPanel.presetsButton {width: (controlPanel.width - 20) / 3 // 平均宽度text: modelData.text // 按钮文本// 点击事件onClicked: {if (modelData.value === -1) {// 随机值progress = Math.random().toFixed(2)} else {// 预设值progress = modelData.value}}// 按钮样式style: ButtonStyle {background: Rectangle {radius: 5 // 圆角color: control.pressed ? "#4CAF50" : "#333" // 按下时绿色,否则深灰border.color: "#4CAF50" // 边框颜色border.width: 1 // 边框宽度}label: Text {text: control.text // 按钮文本color: "white" // 文本颜色horizontalAlignment: Text.AlignHCenter // 水平居中verticalAlignment: Text.AlignVCenter // 垂直居中}}}}}// 动画控制Row {spacing: 15// 开始动画按钮Button {text: "开始动画"onClicked: progressAnimation.start()style: ButtonStyle {background: Rectangle {radius: 5color: control.pressed ? "#4CAF50" : "#333"border.color: "#4CAF50"border.width: 1}label: Text {text: control.textcolor: "white"}}}// 暂停动画按钮Button {text: "暂停动画"onClicked: progressAnimation.pause()style: ButtonStyle {background: Rectangle {radius: 5color: control.pressed ? "#FF9800" : "#333"border.color: "#FF9800"border.width: 1}label: Text {text: control.textcolor: "white"}}}// 停止动画按钮Button {text: "停止动画"onClicked: progressAnimation.stop()style: ButtonStyle {background: Rectangle {radius: 5color: control.pressed ? "#F44336" : "#333"border.color: "#F44336"border.width: 1}label: Text {text: control.textcolor: "white"}}}}}}// ==============================================// 动画效果 - 自动改变进度值// ==============================================NumberAnimation {id: progressAnimationtarget: mainWindowproperty: "progress"from: 0.0to: 1.0duration: 3000 // 3秒完成easing.type: Easing.InOutQuad // 平滑的缓动效果loops: Animation.Infinite // 无限循环running: false // 默认不运行}
}

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

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dify 工作流全栈解析:从零构建你的 AI 应用流程引擎

AI工作流的导言&#xff1a; 工作流系统&#xff08;Workflow System&#xff09;是 Dify 的核心组成部分&#xff0c;它通过可视化编程界面支持创建复杂的 AI 应用程序。用户可以将不同的功能块连接起来&#xff0c;从而设计出用于处理数据、与 AI 模型交互、管理条件以及执行…

上下位机通讯规则

0&#xff1a;事由 最近开发&#xff0c;上位机Qt与下位机通讯的时候发现通讯规则有些不一样&#xff0c;这里简单记录一下 。所有代码基于元宝生成&#xff0c;属于伪代码不保证真实可用&#xff0c;啊但是逻辑是这么个逻辑。 1&#xff1a;底层通讯规则 以STM32向上位机通讯…

创建平衡二叉树C++

给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 平衡二叉树&#xff1a;每个节点的左右子树高度差不超过1 class Solution { public:TreeNode* dfs(vector<int>& nums, int left, int right){if(l…

海光の初体验

背景 八张K100的风扇已经将近一年没转过了…早在今年4月29日&#xff0c;Qwen3正式发布并全部开源8款「混合推理模型」。作为Qwen系列中的最新一代大型语言模型&#xff0c;Qwen3在推理、指令遵循、工具调用、多语言能力等方面进行了全面增强。海光DCU&#xff08;Deep Comput…

场外交易(OTC)财富管理系统开发及解决方案报告

——跨境金融科技赋能机构客户新增长 一、OTC市场现状与机构业务痛点 1. 政策机遇与市场扩容 “北向互换通”期限延长&#xff1a;2025年7月1日&#xff0c;中国外汇交易中心联合香港交易所将利率互换合约期限延长至30年&#xff0c;首日交易规模达15.3亿元&#xff0c;填补超…

pytorch底层原理学习--JIT与torchscript

文章目录 0 目的1 TorchScript1.1 语言特性的限定性1.2 设计目的&#xff1a;模型表达的专注性 2pytorch JIT&#xff08;Just-in-time compilation)2.1pytorch JIT定义2.1pytorch JIT整个过程&#xff1a;1. 前端转换层&#xff1a;生成静态计算图2. 中间表示层&#xff08;IR…

Ubuntu+Nginx+php+SQLite3+typecho手动搭建个人博客

零.Ubuntu环境 一.安装nginx 使用以下指令进行nginx web服务器安装&#xff1a; apt-get install nginx 如果提示找不到安装包&#xff0c;也可以更新一下系统的apt环境包&#xff1a; sudo apt update 安装完成后&#xff0c;可以使用以下指令查看nginx是否处于激活状态&#…

网络协议概念与应用层

1.概念 1.1 例子 点外卖 上述这个过程,就是自定义协议 自定义协议,具体的方式也是非常灵活的 2.几种开发中更常见的格式 2.1xml 上古时期的组织数据的格式 通过标签来组织数据 xml的优势:让数据的可读性变得更好了 劣势:标签写起来繁琐,传输的时候也占用更多网络带宽 2.2…

pytorch学习—7.处理多维特征的输入

2. 线性模型 3.梯度下降算法 4.反向传播(用pytorch算梯度) 5.用pytorch实现线性回归 6.logistic回归 7.处理多维特征的输入_哔哩哔哩_bilibili 7.1代码复现: import numpy as np import torch import matplotlib.pyplot as plt# 1. 获取数据集 xy_data = np.lo

AI助手“智普清言”《三元》(Python)诗解

文本逻辑解清晰&#xff0c;诗意对应技法轻。 笔记模板由python脚本于2025-07-01 06:54:55创建&#xff0c;本篇笔记适合喜欢python三元语句的coder翻阅。 学习的细节是欢悦的历程 博客的核心价值&#xff1a;在于输出思考与经验&#xff0c;而不仅仅是知识的简单复述。 Pytho…

本地RAG实战:用Spring AI+Ollama+DeepSeek+ChromaDB增强文档问答

本文手把手教你在本地部署RAG系统&#xff1a; 用 Spring AI 整合 Ollama&#xff08;运行DeepSeek中文模型&#xff09;ChromaDB 存储本地文档&#xff08;PDF/TXT&#xff09;向量Java程序实现&#xff1a;文档解析 → 语义检索 → 增强生成 最终效果&#xff1a;模型回答更准…

Python 数据分析:DataFrame,生成,用字典创建 DataFrame ,键值对数量不一样怎么办?

目录 1 示例代码2 欢迎纠错3 论文写作/Python 学习智能体------以下关于 Markdown 编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右S…

Java 并发编程的 CAS(Compare and Swap)是什么?

CAS&#xff08;Compare and Swap&#xff0c;比较并交换&#xff09; 并非 Java 语言特有的概念&#xff0c;而是现代计算机硬件提供的一条核心原子指令。在 Java 并发编程中&#xff0c;它扮演着“幕后英雄”的角色&#xff0c;是构建高性能、无锁并发工具&#xff08;如原子…

【UnityAssetBundle】AssetBundle打包

AssetBundle生成AB包资源文件方式&#xff1a; Unity编辑器开发&#xff0c;自定义打包工具&#xff1b;官方提供好的打包工具&#xff0c;Asset Bundle Browser 打包 选择一个资源&#xff0c;new一个压缩包名称或选择一个压缩包名称 点击Window->AssetBundle Browser&…

Hush Puppies大中华区鞋类业务移交品牌方继续经营

据悉&#xff0c;随着百丽集团运营的暇步士&#xff08;Hush Puppies&#xff09;大中华区鞋类授权的到期&#xff0c;暇步士&#xff08;Hush Puppies&#xff09;鞋类业务已开始运营权移交。其中线上渠道授权于2025年6月30日正式到期&#xff0c;线下渠道将于2025年12月31日前…

解释LLM怎么预测下一个词语的

解释LLM怎么预测下一个词语的 通过上文词的向量进行映射 在Transformer架构的大语言模型(如GPT系列、BERT等)中,词语会先被转化为词向量。在预测下一个词时,模型会基于之前所有词的向量表示(并非仅仅上一个词,但上一个词的向量是重要信息来源之一)进行计算。 以GPT-2…

DAY 49 CBAM注意力

目录 DAY 49 CBAM注意力1.通道注意力模块复习2.空间注意力模块3.CBAM的定义作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 DAY 49 CBAM注意力 1.通道注意力模块复习 2.空间注意力模块 3.CBAM的定义 import torch import torch.nn …

【网络】Linux 内核优化实战 - net.ipv4.conf.all.rp_filter

目录 net.ipv4.conf.all.rp_filter 参数详解一、参数基本概念二、参数取值及含义三、反向路径过滤的工作原理四、配置示例与注意事项五、与其他参数的关联六、总结 net.ipv4.conf.all.rp_filter 参数详解 一、参数基本概念 net.ipv4.conf.all.rp_filter 是 Linux 内核中用于控…

ElementUI el-select多选下拉框,回显数据后无法重新选择和修改

问题 ElementUI el-select多选下拉框&#xff0c;回显数据后无法重新选择和修改&#xff0c;点击选择和删除都没有反应&#xff0c;页面也没有报错 方案一 网上搜出来的基本上都是这个解决办法&#xff0c;但是我设置后没有生效&#xff0c;还是无法选择和修改 原因 下拉框数…

计算机视觉的新浪潮:扩散模型(Diffusion Models)技术剖析与应用前景

近年来&#xff0c;扩散模型&#xff08;Diffusion Models, DMs&#xff09;迅速崛起&#xff0c;成为计算机视觉领域最令人瞩目的生成模型之一。从生成高质量图像到风格迁移、图像修复&#xff0c;再到文本驱动图像生成&#xff08;如 DALLE 2、Stable Diffusion、Midjourney&…