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

saber1年前 ⋅ 1176 阅读

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 创建具有手绘、草图、素描外观的图形可以在以下场景中使用:

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

    相关推荐