跳到正文
网页珍奇柜Web Curio

手绘草图图形库

Rough.js,Preet Shihn,2017 年

正在布展…

原作直展:这是 Preet Shihn 的原始作品,按 MIT(附带 d3 v3、topojson v1 为 BSD-3;美国地图数据为公有领域) 许可证收录(版本 a1a7f24)。原样展出 gh-pages 上的 Canvas 示例页(rough.js 3.0.0),只把失效的 rawgit/d3js.org 脚本换成本地副本;页底链接可切换到同站的手绘美国地图示例(WebWorker 绘制,每次刷新随机配色与影线角度)。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步直线被拆成带随机偏移控制点的贝塞尔曲线,并画两遍。
  2. 第 2 步椭圆用带抖动的多点曲线近似,起止点不完全闭合。
  3. 第 3 步多边形填充用扫描线生成影线,再给每条影线加抖动。
  4. 第 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.

档案

能不能拿来用

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

性能开销

视觉强度

实现难度

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

核实记录:Site loads (HTTP 200, title 'Rough.js'); gh api: MIT, created 2016-12-13.