Rough.js 创建具有手绘、草图、素描外观的图形

saber ⋅ 1年前 ⋅ 1181 阅读

Rough.js是一个小型（<9kB gzipped）图形库，可让您以粗略的、类似手绘的风格进行绘制。该库定义了绘制直线、曲线、圆弧、多边形、圆和椭圆的基元。

https://github.com/rough-stuff/rough

https://roughjs.com/         官网

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60, // angle of hachure,
  hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid' // solid fill
});

填充样式可以是：影线（默认）、实心、之字形、交叉影线、点、朝阳、虚线或之字线

这个库有什么用处？

@Felix  看官网，大名鼎鼎的excalidraw绘图就用的这个库

精工利器 别具匠心 Rough js 手绘 草图 素描

有哪些使用场景？

Rough.js 创建具有手绘、草图、素描外观的图形可以在以下场景中使用：

1. 用户界面设计：Rough.js 可以用于设计具有手绘风格的用户界面，增加其视觉吸引力和独特性。

2. 数据可视化：Rough.js 可以用于创建图表和图形，支持对数据进行可视化的呈现，同时为这些数据提供独特的外观和风格。

3. 幻灯片和演示文稿：Rough.js 可以用于创建幻灯片和演示文稿中的图形、符号和文本，使它们看起来更加生动有趣。

4. 游戏设计：Rough.js 可以用于创建游戏中的图形和角色，具有生动的手绘风格，同时增加游戏的独特性和趣味性。

5. 创意项目：Rough.js 可以用于各种创意项目中，如宣传海报、网站设计、数字艺术等，为这些项目增加一种独特的艺术风格。

有哪些类似的项目？

类似的项目有：

1. p5.js：一个基于 JavaScript 的可视化开发库，可以进行类似手绘、草图、艺术风格的图形设计。

2. Paper.js：另一个开源的矢量图形库，提供了丰富的绘图工具和 API，可以帮助用户快速创建独特的艺术形式。

3. Doodle.js：一个基于 JavaScript 的图形库，可以创建具有手绘风格的草图和插图，提供了可定制化的颜色、样式和线条宽度等选项。

4. Sketch.js：一个轻量级的绘图库，可以让用户在网页上绘制直线、弧线、矩形、圆形等基本图形，并可以导出 SVG、PNG、JPEG 等格式的文件。

5. Roughnotation：一个基于 JavaScript 的库，可以将 Web 页面上的元素标记为手绘、草图风格，提供了多种图形和动画效果可供选择。

有哪些优缺点？

优点：
1. 能够创建具有手绘风格和艺术感的图形；
2. 可以模拟草图和素描的效果，增强视觉效果；
3. 不需要专业的绘画技能，简单易学；
4. 可以在不同设备和平台上使用。

缺点：
1. 由于是手绘风格，因此图形可能不够准确和精细；
2. 无法实现高度精准度和复杂度的绘画，因此不适合用于一些专业绘图场合；
3. 可能需要一些时间和精力去调整绘画参数，以获得理想的效果。
4. 不能完全取代传统绘画技能和工具，还需要一定的绘画基础。

全部评论: 0 条

    相关推荐