手绘草图图形库
Rough.js,Preet Shihn,2017 年

正在布展…
它是怎么做的
- 第 1 步直线被拆成带随机偏移控制点的贝塞尔曲线,并画两遍。
- 第 2 步椭圆用带抖动的多点曲线近似,起止点不完全闭合。
- 第 3 步多边形填充用扫描线生成影线,再给每条影线加抖动。
- 第 4 步参数 roughness、bowing 控制粗糙程度;同一 seed 可复现。
复刻配方
一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。
Implement a seeded PRNG so drawings are stable across redraws. For a line, generate two cubic Bézier curves from start to end whose control points are offset perpendicular to the line by random amounts scaled by roughness and line length. For ellipses, sample points around the curve with jittered radius and an overshoot so the stroke does not close perfectly. For fills, compute hachure lines by intersecting parallel lines at an angle with the polygon edges, then draw each segment with the same jittered-line routine. Output either canvas paths or SVG path strings.
档案
性能开销
视觉强度
实现难度
尺度为策展判断(1 到 5),用于比较和推荐。
核实记录:Site loads (HTTP 200, title 'Rough.js'); gh api: MIT, created 2016-12-13.


