目錄最終效果核心原理按弧長逐段畫筆刷顏色動畫怎么跑文字和按壓可調參數(shù)適用場景完整代碼工程下載這篇做一個筆刷邊框按鈕：加載時邊框像被一筆一筆畫出來，懸停時反向擦除再重畫。最終效果240×64 的線框按鈕，加載時邊框從左上角開始沿路徑一筆畫出（漸變墨色），懸停時先擦除再重畫。按鈕沒有背景色，只有漸變邊框和文字。實現(xiàn)上用的是 Canvas 按弧長逐段畫路徑的思路，把圓角矩形拆成 4 條直線和 4 段圓弧，動畫進度決定每一幀畫到路徑的哪個位置。SVG 里常見的setLineDash+lineDashOffset描邊動畫我也試過，但 Qt 的 Canvas 里偏移行為和標準不一致，邊框會整條一起出現(xiàn)，畫不出漸進效果，所以放棄了。核心原理核心是把圓角矩形的閉合路徑拆成 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