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