跳到正文
网页珍奇柜Web Curio

压感手写笔迹

perfect-freehand,Steve Ruiz,2021 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步对输入点做流线(streamline)平滑。
  2. 第 2 步根据速度或真实压力计算每点半径,并做 thinning。
  3. 第 3 步沿笔画两侧偏移出左右轮廓点,首尾加圆角或收尖(taper)。
  4. 第 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.

档案

交互

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Site loads (HTTP 200, title 'perfect-freehand'); gh api: MIT, created 2021-02-19.