尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

QML 自定义按钮:带笔刷边框的按钮

发布时间:2026/9/27 22:04:28

资讯中心
01
ARTICLE

QML 自定义按钮:带笔刷边框的按钮

QML 自定义按钮:带笔刷边框的按钮
目录最终效果核心原理按弧长逐段画笔刷颜色动画怎么跑文字和按压可调参数适用场景完整代码工程下载这篇做一个笔刷边框按钮:加载时边框像被一笔一笔画出来,悬停时反向擦除再重画。最终效果240×64 的线框按钮,加载时边框从左上角开始沿路径一笔画出(渐变墨色),悬停时先擦除再重画。按钮没有背景色,只有渐变边框和文字。实现上用的是 Canvas 按弧长逐段画路径的思路,把圆角矩形拆成 4 条直线和 4 段圆弧,动画进度决定每一帧画到路径的哪个位置。SVG 里常见的setLineDash+lineDashOffset描边动画我也试过,但 Qt 的 Canvas 里偏移行为和标准不一致,边框会整条一起出现,画不出渐进效果,所以放弃了。核心原理核心是把圆角矩形的闭合路径拆成 8 段,用弧长预算逐段画。按弧长逐段画onPaint: { var ctx = getContext("2d") ctx.reset() var lw = 3 ctx.lineWidth = lw var grad = ctx.createLinearGradient(0, 0, width, 0) grad.addColorStop(0, bru
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。