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

saber1年前 ⋅ 2818 阅读

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绘图就用的这个库

全部评论: 0

    

    1. 友善是交流的起点。
    2. 请尽量使用Chrome浏览器(手机端遇到不兼容其他浏览器的情况请使用简单编辑器)。
    3. 同一条评论中多@其他人更容易得到Time。
    4. 支持直接粘贴图片(gif等动图不支持复制粘贴到文本框,需手动保存后上传才可显示)。

    相关推荐