压感手写笔迹
perfect-freehand,Steve Ruiz,2021 年

正在布展…
它是怎么做的
- 第 1 步对输入点做流线(streamline)平滑。
- 第 2 步根据速度或真实压力计算每点半径,并做 thinning。
- 第 3 步沿笔画两侧偏移出左右轮廓点,首尾加圆角或收尖(taper)。
- 第 4 步把轮廓点转成一个闭合 SVG path 并填充。
复刻配方
一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。
Collect pointer events with pressure (fall back to simulated pressure from speed). Smooth points with an exponential moving average, then for each point compute a radius from pressure and a thinning factor. Offset each point along the perpendicular of the local direction by +radius and -radius to get left and right outlines, add tapered caps by shrinking radius over the first and last segments, and join left plus reversed right into one polygon. Render it as a filled SVG path using quadratic curves between midpoints for smoothness.
档案
性能开销
视觉强度
实现难度
尺度为策展判断(1 到 5),用于比较和推荐。
核实记录:Site loads (HTTP 200, title 'perfect-freehand'); gh api: MIT, created 2021-02-19.


