簡(jiǎn)介面向圖形處理與數(shù)字藝術(shù)開發(fā)者的C#毛筆字模擬源碼包聚焦筆鋒算法與平滑算法的工程實(shí)現(xiàn)可直接編譯運(yùn)行。資源內(nèi)包含完整的Visual Studio解決方案共47個(gè)文件以C#源碼文件.cs為核心輔以圖片素材png/jpg、配置文件config/resx及運(yùn)行示例exe整體僅809KB便于快速閱讀與調(diào)試。已有715人學(xué)習(xí)下載適合對(duì)數(shù)字書法、渲染效果或交互式繪畫感興趣的中高級(jí)開發(fā)者。通過源碼可深入理解筆觸壓力與角度模擬、筆尖形態(tài)計(jì)算及圖像平滑濾波等關(guān)鍵邏輯為游戲美術(shù)、UI特效或創(chuàng)意工具開發(fā)提供可直接借鑒的算法參考。1. 毛筆字算法在 C# 里落地平滑、筆鋒與可編譯工程的關(guān)系把鼠標(biāo)采集到的一串 PointF 直接連成線寫出來的字永遠(yuǎn)不會(huì)像毛筆字問題不在畫線而在筆鋒。真正的毛筆字算法核心是筆鋒算法而不是筆刷貼圖起筆和收筆的錐形輪廓、運(yùn)筆過程中由速度調(diào)制出的寬窄變化、以及最后交給 C# 渲染層的那條平滑軌跡三件事疊在一起才產(chǎn)生“筆意”。這套可編譯的 C# 源碼常見形態(tài)就是把這三塊拆成能單獨(dú)調(diào)參的模塊底層用 WinForms 的 GraphicsPath 和 FillPath 完成渲染不依賴外部圖像引擎。適合正在做手寫批注、電子簽名、美術(shù)字編輯器的人也適合想在 Windows 桌面上快速驗(yàn)證書寫效果的上位機(jī)程序員。下文按平滑、筆鋒、輪廓生成、調(diào)參避坑的順序展開最后給出一套驗(yàn)證筆跡的自檢方法。2. 平滑算法選型把鼠標(biāo)軌跡變成連貫曲線的三條路徑2.1 Catmull-Rom 插值最少依賴的平滑方案凡是和手寫軌跡打交道的 C# 工程我第一選擇基本是 Catmull-Rom 樣條而不是貝塞爾。原因很直接Catmull-Rom 穿過所有原始采樣點(diǎn)而貝塞爾曲線不經(jīng)過控制點(diǎn)。毛筆字的骨架是用戶的真實(shí)運(yùn)筆軌跡任何偏離采樣點(diǎn)的擬合后續(xù)在做筆鋒寬度調(diào)制時(shí)都會(huì)出現(xiàn)“寫的是 A渲染成 B”的錯(cuò)位感。public static ListPointF CatmullRomSmooth(ListPointF input, int samplesPerSegment) { var result new ListPointF(input.Count * samplesPerSegment); for (int i 0; i input.Count - 1; i) { var p0 input[Math.Max(i - 1, 0)]; var p1 input[i]; var p2 input[i 1]; var p3 input[Math.Min(i 2, input.Count - 1)]; for (int s 1; s samplesPerSegment; s) { float t s / (float)samplesPerSegment; float t2 t * t; float t3 t2 * t; // Catmull-Rom 的 Cardinal 形式張力參數(shù)固定為 0.5 float x 0.5f * (2f * p1.X (-p0.X p2.X) * t (2f * p0.X - 5f * p1.X 4f * p2.X - p3.X) * t2 (-p0.X 3f * p1.X - 3f * p2.X p3.X) * t3); float y 0.5f * (2f * p1.Y (-p0.Y p2.Y) * t (2f * p0.Y - 5f * p1.Y 4f * p2.Y - p3.Y) * t2 (-p0.Y 3f * p1.Y - 3f * p2.Y p3.Y) * t3); result.Add(new PointF(x, y)); } } result.Add(input[input.Count - 1]); return result; }這段代碼里最關(guān)鍵的是相鄰四個(gè)點(diǎn) p0 到 p3 的選取方式在首尾段用 clamp 復(fù)制端點(diǎn)避免索引越界。samplesPerSegment 表示每?jī)蓚€(gè)原始采樣點(diǎn)之間插入多少個(gè)新點(diǎn)我一般在 6 到 10 之間取值。取 4 時(shí)曲線已經(jīng)比較順但快速轉(zhuǎn)角處會(huì)出現(xiàn)輕微多邊形感取到 16 以上視覺差距不明顯還會(huì)讓后續(xù)法線寬度計(jì)算的循環(huán)量成倍上漲。對(duì)于實(shí)時(shí)書寫8 是性價(jià)比最好的起點(diǎn)值。2.2 先抽稀再平滑給手抖軌跡做 Douglas-Peucker 預(yù)處理鼠標(biāo) Move 事件在慢速書寫時(shí)會(huì)產(chǎn)生大量噪聲點(diǎn)這些點(diǎn)不全是用戶主動(dòng)運(yùn)筆更多是傳感器抖動(dòng)。直接對(duì)原始點(diǎn)做 Catmull-Rom插值結(jié)果會(huì)忠實(shí)地穿過每一個(gè)噪聲點(diǎn)筆畫邊緣會(huì)出現(xiàn)細(xì)小的毛刺而且這些毛刺在筆鋒錐化階段會(huì)被方法線偏移進(jìn)一步放大。我一般會(huì)在平滑之前先做一次抽稀去掉那些偏離主體方向過遠(yuǎn)的冗余點(diǎn)。Douglas-Peucker 是這里最穩(wěn)的方案它不改變剩余點(diǎn)的原始坐標(biāo)只刪點(diǎn)保留下來的點(diǎn)仍然在真實(shí)軌跡上。public static ListPointF Simplify(ListPointF pts, float tolerance) { if (pts.Count 3) return pts; float maxDist 0f; int index -1; var start pts[0]; var end pts[pts.Count - 1]; for (int i 1; i pts.Count - 1; i) { float dist PointLineDistance(pts[i], start, end); if (dist maxDist) { maxDist dist; index i; } } if (maxDist tolerance index ! -1) { var left Simplify(pts.GetRange(0, index 1), tolerance); var right Simplify(pts.GetRange(index, pts.Count - index), tolerance); left.RemoveAt(left.Count - 1); left.AddRange(right); return left; } return new ListPointF { start, end }; } private static float PointLineDistance(PointF p, PointF a, PointF b) { float dx b.X - a.X; float dy b.Y - a.Y; if (dx 0 dy 0) return Vector2.Distance(p, a); float t ((p.X - a.X) * dx (p.Y - a.Y) * dy) / (dx * dx dy * dy); t Math.Clamp(t, 0f, 1f); float projX a.X t * dx; float projY a.Y t * dy; return Vector2.Distance(p, new PointF(projX, projY)); }tolerance 是抽稀的強(qiáng)度單位是像素。普通鼠標(biāo)手寫我建議從 1.0 開始調(diào)數(shù)位板輸入源抖動(dòng)小可以壓到 0.3 到 0.5。注意抽稀和插值的順序不能反過來先插值再抽稀噪聲已經(jīng)被插值“洗”成了平滑曲線上的起伏Douglas-Peucker 會(huì)因?yàn)榫嚯x偏差太小而認(rèn)為處處合格等于白做。先抽稀后插值剩下的關(guān)鍵點(diǎn)仍然在軌跡上插值只是加密而不是修正。2.3 為什么不用均值濾波和高階貝塞爾有人會(huì)問直接用滑動(dòng)平均值不行嗎均值濾波確實(shí)能壓噪聲但它會(huì)系統(tǒng)性地縮小軌跡曲率半徑寫出來的字整體“瘦”一圈而且筆鋒尖角位置會(huì)被平均成圓角這對(duì)書法效果是致命的。貝塞爾擬合更適合離線生成美術(shù)字在實(shí)時(shí)手寫場(chǎng)景里控制點(diǎn)不落在筆跡上后續(xù)計(jì)算筆鋒方向時(shí)你必須額外維護(hù)一套控制點(diǎn)映射關(guān)系復(fù)雜度不成比例。平滑層做到 Catmull-Rom 加 Douglas-Peucker 已經(jīng)夠用。這組代碼不依賴具體窗體框架把它放進(jìn)一個(gè) GraphicUtils 靜態(tài)類里就是一份可以獨(dú)立編譯的 C# 類庫WinForms、WPF 甚至控制臺(tái)輸出位圖都能復(fù)用。3. 筆鋒算法實(shí)現(xiàn)從等寬描邊到毛筆感的兩個(gè)關(guān)鍵步驟3.1 動(dòng)態(tài)寬度用速度和壓力調(diào)制當(dāng)前筆劃粗細(xì)等寬線條是記號(hào)筆寬度隨運(yùn)筆速度變化才是毛筆的第一特征。慢的地方吸墨多、筆畫粗快的地方筆畫細(xì)。鼠標(biāo)沒有壓感事件常見的替代方案是用瞬時(shí)速度反推壓力值再把壓力映射到寬度上。float EstimatePressure(StrokePoint current, StrokePoint previous, float maxSpeed) { float dt Math.Max(current.Timestamp - previous.Timestamp, 0.001f); float speed Vector2.Distance(current.Position, previous.Position) / dt; // 速度越快壓力越小用冪函數(shù)讓中間段變化更自然 float normalized Math.Clamp(speed / maxSpeed, 0f, 1f); return MathF.Pow(1f - normalized, 1.5f); }maxSpeed 的取值需要看輸入設(shè)備。鼠標(biāo)在屏幕上快速劃過速度能到 3000 像素每秒我一般在 2500 到 3500 之間調(diào)。指數(shù)取 1.5 而不是 1是為了讓中速書寫時(shí)的粗細(xì)變化明顯一點(diǎn)否則大部分筆畫會(huì)落在“中等寬度”附近缺少棱角。得到 estimatedPressure 之后當(dāng)前點(diǎn)寬度就是float currentWidth baseWidth * (0.35f 0.65f * pressure);0.35 這個(gè)下限是防止寬度歸零導(dǎo)致筆跡斷裂。如果后續(xù)加了筆鋒錐化這里不需要再額外收窄錐化邏輯會(huì)在輪廓層統(tǒng)一處理。3.2 端點(diǎn)錐化讓起筆和收筆變成尖角而不是半圓毛筆字最難的其實(shí)是兩端。直接把 lastWidth 設(shè)為 0輪廓會(huì)在終點(diǎn)處形成一個(gè)突兀的折角視覺上像被菜刀切了一刀。正確的做法是按“弧長”做寬度衰減從筆畫起點(diǎn)到當(dāng)前點(diǎn)走過的路徑長度越短寬度越接近 0距離終點(diǎn)越近寬度同樣越小。public static float TaperWidth(float arcLengthFromStart, float totalLength, float taperLen, float width) { // 起筆段0 - 1 float startT MathF.Min(arcLengthFromStart / taperLen, 1f); // 收筆段1 - 0 float endT MathF.Min((totalLength - arcLengthFromStart) / taperLen, 1f); // 取兩者中較小的系數(shù)表示“兩端都要錐化” float taper MathF.Min(startT, endT); // 正弦曲線讓端部更圓潤避免線性漸變產(chǎn)生折角 taper MathF.Sin(taper * 0.5f * MathF.PI); return width * taper; }這里最關(guān)鍵的細(xì)節(jié)是必須用弧長而不是點(diǎn)索引。如果直接拿當(dāng)前點(diǎn)的下標(biāo)做錐化當(dāng)鼠標(biāo)快速掃過時(shí)端點(diǎn)附近密集的插值點(diǎn)會(huì)讓錐化區(qū)突然變短寫出來的字每一筆的筆鋒長度都不一樣。用弧長計(jì)算后無論采樣點(diǎn)密還是稀筆鋒都固定在 taperLen 這段幾何長度內(nèi)。taperLen 我通常取 16 到 24 像素寫小字時(shí)降到 10 左右寫大字可以到 30。3.3 收筆處的定向出鋒讓筆勢(shì)有一個(gè)明確方向毛筆收筆時(shí)不光是寬度變窄還會(huì)順著運(yùn)筆方向帶出一小段“鋒”。這個(gè)效果可以在錐化基礎(chǔ)上再加一段方向延展取最后兩個(gè)軌跡點(diǎn)的方向向量把輪廓終點(diǎn)向該方向再推出幾像素。Vector2 lastDir lastPoint - previousPoint; lastDir.Normalize(); // 出鋒長度一般取筆鋒長度的 30%~40% float tailOffset taperLen * 0.35f; PointF tailEnd lastPoint lastDir * tailOffset;然后把錐化輪廓的最后一個(gè)頂點(diǎn)從 lastPoint 替換成 tailEnd。這一小步能讓“撇”“捺”這類收筆產(chǎn)生明顯的筆勢(shì)。注意 tailOffset 不要超過 taperLen 的一半否則出鋒會(huì)脫離主體筆畫看起來像筆尖斷掉了。我踩過的坑是把 tailOffset 設(shè)成和 taperLen 等長結(jié)果寫“一”字時(shí)收筆拖出一條細(xì)長尾巴放大后非常突兀。4. 渲染管線與工程結(jié)構(gòu)把三段代碼拼成可編譯的 C# 程序4.1 數(shù)據(jù)結(jié)構(gòu)StrokePoint、StrokeData 和值元組的使用為了讓源碼可編譯且可維護(hù)我一般會(huì)把數(shù)據(jù)結(jié)構(gòu)和渲染邏輯拆開。單個(gè)采樣點(diǎn)用 readonly record struct 保存StrokeData 存放一段完整筆畫的原始點(diǎn)和平滑結(jié)果。public readonly record struct StrokePoint(PointF Position, float Pressure, float Timestamp); public class StrokeData { public ListStrokePoint RawPoints { get; } new(); public ListPointF SmoothedPoints { get; set; } new(); public float BaseWidth { get; set; } 10f; public float TaperLen { get; set; } 18f; }record struct 是 C# 10 之后的語法用來做一筆畫里的點(diǎn)集合很適合復(fù)制成本低撤銷重繪時(shí)不會(huì)誤改歷史數(shù)據(jù)。在計(jì)算邏輯里我偶爾會(huì)用值元組把 Position 和 Pressure 一起解構(gòu)出來比如var (pos, pressure, _) (p.Position, p.Pressure, p.Timestamp);這樣寫的好處是代碼意圖清晰后面做寬度計(jì)算時(shí)不需要反復(fù)訪問結(jié)構(gòu)體字段。如果你在舊版 .NET Framework 上編譯把 record struct 換成普通 struct 即可算法部分不受影響。4.2 GraphicsPath 輪廓生成左右輪廓合并成閉合多邊形平滑點(diǎn)和寬度都算好后剩下就是把軌跡“撐”成一塊可以填充的封閉區(qū)域。做法是沿著軌跡逐點(diǎn)計(jì)算法線方向向左右兩側(cè)各偏移半個(gè)當(dāng)前寬度生成左輪廓和右輪廓再把右輪廓反轉(zhuǎn)后拼成一個(gè)閉合多邊形。public static GraphicsPath BuildOutline(StrokeData stroke) { var pts stroke.SmoothedPoints; int n pts.Count; var left new ListPointF(n); var right new ListPointF(n); for (int i 1; i n - 1; i) { Vector2 dir pts[i] - pts[i - 1]; dir.Normalize(); Vector2 normal new Vector2(-dir.Y, dir.X); // 寬度由壓力和端點(diǎn)錐化共同決定 float width GetWidthAt(stroke, i); left.Add(new PointF( pts[i].X normal.X * width, pts[i].Y normal.Y * width)); right.Add(new PointF( pts[i].X - normal.X * width, pts[i].Y - normal.Y * width)); } right.Reverse(); var path new GraphicsPath(); path.AddPolygon(left.Concat(right).ToArray()); return path; }這段代碼里最值得注意的坑是方向向量直接取相鄰點(diǎn)差。如果平滑層做得好方向變化是連續(xù)的如果平滑密度不夠方向會(huì)跳躍輪廓就會(huì)出現(xiàn)擰巴的交叉。所以輪廓生成對(duì)平滑質(zhì)量極其敏感寧可多插值也不要在這一步做額外修正。GetWidthAt 內(nèi)部做的事就是先按速度算出基礎(chǔ)寬度再用 TaperWidth 按弧長錐化。你可以在這一步把兩種寬度策略合起來最后效果等于“動(dòng)態(tài)寬度 × 端點(diǎn)錐化”兩個(gè)系數(shù)相乘即可不要做疊加。4.3 實(shí)時(shí)書寫的狀態(tài)管理與雙緩沖刷新實(shí)時(shí)書寫時(shí)我會(huì)把交互抽象成一個(gè)小狀態(tài)機(jī)Down 表示落筆Move 表示運(yùn)筆Up 表示收筆。MouseDown 時(shí) new 一個(gè) StrokeDataMouseMove 時(shí)追加采樣點(diǎn)并即時(shí)重繪MouseUp 時(shí)把這段筆畫放進(jìn)已完成列表。private readonly ListStrokeData _strokes new(); private StrokeData _current; private bool _drawing; protected override void OnMouseDown(MouseEventArgs e) { _drawing true; _current new StrokeData(); _current.RawPoints.Add(new StrokePoint(e.Location, 1f, Environment.TickCount64)); } protected override void OnMouseMove(MouseEventArgs e) { if (!_drawing) return; float now Environment.TickCount64; var last _current.RawPoints[^1]; float pressure EstimatePressure( new StrokePoint(e.Location, 0f, now), last, 3000f); _current.RawPoints.Add(new StrokePoint(e.Location, pressure, now)); Invalidate(); } protected override void OnMouseUp(MouseEventArgs e) { if (!_drawing) return; _drawing false; _current.RawPoints Simplify(_current.RawPoints, 1f) .Select(p new StrokePoint(p, 1f, 0f)) .ToList(); _current.SmoothedPoints CatmullRomSmooth( _current.RawPoints.Select(p p.Position).ToList(), 8); _strokes.Add(_current); _current null; Invalidate(); }鼠標(biāo)沒有壓感所以 Move 里的 pressure 全靠速度估算。Environment.TickCount64 返回毫秒計(jì)算速度時(shí)記得除以 1000。重繪時(shí)我建議用 BufferedGraphics 做雙緩沖避免筆跡多時(shí)閃爍protected override void OnPaint(PaintEventArgs e) { var buffer BufferedGraphicsManager.Current.Allocate(e.Graphics, ClientRectangle); var g buffer.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; g.Clear(Color.White); foreach (var stroke in _strokes) { using var path BuildOutline(stroke); using var brush new SolidBrush(Color.Black); g.FillPath(brush, path); } buffer.Render(e.Graphics); buffer.Dispose(); }撤銷功能不要在 Canvas 級(jí)別的位圖上做擦除而是維護(hù)一個(gè) Stack 出棧后全量重繪。這樣撤銷后參數(shù)仍然保留后續(xù)如果想“還原”或者調(diào)整粗細(xì)數(shù)據(jù)還在不會(huì)變成黑匣子。5. 毛筆字算法調(diào)參避坑五個(gè)最容易翻車的參數(shù)與排查5.1 必調(diào)參數(shù)對(duì)照表參數(shù)建議起始值作用調(diào)大后效果調(diào)小后效果samplesPerSegment8平滑插值密度曲線更圓潤計(jì)算量增大轉(zhuǎn)角變生硬simplifyTolerance1.0抽稀強(qiáng)度筆跡更簡(jiǎn)練細(xì)節(jié)丟失噪聲保留多taperLen18筆鋒長度筆鋒更舒展筆鋒變短促baseWidth10基準(zhǔn)筆畫寬度整體變粗整體變細(xì)maxSpeed3000速度壓力映射上限粗細(xì)變化遲鈍粗細(xì)變化敏感5.2 筆鋒像被切了一刀現(xiàn)象是每個(gè)筆畫的起筆和收筆處有一條明顯的直線切口放大到 200% 看就是一個(gè)平頭沒有弧度。原因是錐化系數(shù)直接用了“剩余點(diǎn)索引 / 總點(diǎn)數(shù)”而不是弧長比例。當(dāng)插值密度調(diào)整后同一個(gè)筆鋒長度在慢速段和快速段對(duì)應(yīng)的點(diǎn)數(shù)量不一樣錐化區(qū)長度跟著采樣率飄視覺上有時(shí)鈍、有時(shí)尖。解決方法是把 TaperWidth 里的參數(shù)改成 arcLengthFromStart并且在 BuildOutline 之前先算好每段弧長不要在每個(gè)點(diǎn)臨時(shí)累加。5.3 快速書寫時(shí)筆跡斷斷續(xù)續(xù)現(xiàn)象是快速畫一條長線筆畫中間出現(xiàn)細(xì)小的空白缺口像墨水?dāng)嗔?。原因是鼠?biāo) Move 事件間隔大前后兩個(gè)采樣點(diǎn)之間距離超過筆畫寬度輪廓左右偏移后中間出現(xiàn)空洞。常見做法是增加插值段數(shù)同時(shí)把抽稀 tolerance 調(diào)大一點(diǎn)點(diǎn)讓軌跡更干凈。注意不要把 baseWidth 隨便調(diào)大來蓋缺口那會(huì)讓慢速段變得過粗整篇字失去粗細(xì)對(duì)比。5.4 大回環(huán)或轉(zhuǎn)彎急處出現(xiàn)自交和填充空洞現(xiàn)象是寫“乙”或“乃”這類回筆字時(shí)FillPath 填充區(qū)域內(nèi)出現(xiàn)三角形白斑。原因是輪廓點(diǎn)沿著法線向外偏移寬度 w如果當(dāng)前曲率半徑小于 w左右輪廓就會(huì)交叉填充算法無法判斷哪邊是里、哪邊是外。我在處理這種場(chǎng)景時(shí)會(huì)對(duì)寬度的上限加一個(gè)曲率約束三點(diǎn)外接圓半徑小于兩倍寬度時(shí)把寬度壓到半徑的 0.8 倍。這樣會(huì)輕微損失粗度但不會(huì)破洞。5.5 撤銷后筆跡整體變形或粗細(xì)錯(cuò)位現(xiàn)象是寫完幾筆調(diào)整畫筆粗細(xì)后再撤銷之前的筆畫也跟著變粗。原因是撤銷棧里只存了 Points 點(diǎn)列表沒有把 StrokeData 整個(gè)對(duì)象入棧。Width、TaperLen 這些參數(shù)屬于繪制狀態(tài)不隨點(diǎn)數(shù)據(jù)保存重繪時(shí)用了當(dāng)前畫筆的新參數(shù)歷史筆畫就被“污染”了。解決方法是 Stack 里直接壓 StrokeData 引用或者至少把 BaseWidth、TaperLen、SmoothedPoints 一起打包成快照再入棧。6. 進(jìn)階壓感模擬、頓筆與驗(yàn)證筆跡的自檢方法如果后續(xù)想做得更像毛筆可以引入頓筆檢測(cè)。頓筆在軌跡上的特征是短時(shí)間內(nèi)速度急速下降但位移很小此時(shí)寬度會(huì)短暫放大。我通常用速度的一階差分來判斷當(dāng)前速度低于前一段速度的 40%且位移小于 3 像素就認(rèn)為用戶在頓筆把當(dāng)前寬度乘以 1.3。這個(gè)技巧在小字場(chǎng)景里效果很明顯寫“橫折”時(shí)轉(zhuǎn)折點(diǎn)會(huì)自然鼓起來。驗(yàn)證一套筆鋒算法是否合格我一般用三步自檢。第一步是把渲染結(jié)果放大到 400%檢查所有端部是否形成光滑的錐形有沒有平頭和折角。第二步是分別畫一條直線、一條慢速曲線、一條快速弧線比較三者的寬度變化是否連續(xù)如果出現(xiàn)忽粗忽細(xì)說明速度壓力映射沒有調(diào)平。第三步是顯示原始采樣點(diǎn)和最終輪廓的疊加視圖確認(rèn)輪廓與采樣點(diǎn)之間沒有整體偏移這一步能篩掉方向向量計(jì)算錯(cuò)誤和法線方向反了的問題。最后提醒一個(gè)我踩過的坑早期做手寫批注控件時(shí)我為了省事直接用最后一小段輪廓做線性收窄結(jié)果每個(gè)字的收尾都像被刀削過后來老老實(shí)實(shí)改回弧長錐化才解決問題。這不是玄學(xué)而是筆鋒這件事必須用幾何參數(shù)去算不能靠渲染層碰運(yùn)氣。希望你照著這套思路搭的時(shí)候能少走這一步彎路。本文還有配套的精品資源點(diǎn)擊獲取