Rough.js几何图形绘制：矩形、圆形、椭圆形的快速上手

Rough.js几何图形绘制：矩形、圆形、椭圆形的快速上手

【免费下载链接】rough 项目地址: https://gitcode.com/gh_mirrors/rou/rough

Rough.js是一个轻量级（小于9kB）的图形库，专为创建手绘风格的草图效果而生。这个强大的几何图形绘制工具支持Canvas和SVG两种渲染方式，让开发者能够轻松绘制出具有自然手绘感的矩形、圆形、椭圆形等基本几何形状。🎨

📦 安装与引入Rough.js

通过npm安装Rough.js非常简单：

npm install --save roughjs

或者直接通过CDN引入：

<script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>

🎯 基础几何图形绘制

矩形绘制教程

使用Rough.js绘制矩形非常简单。无论是Canvas还是SVG环境，都能快速创建手绘风格的矩形：

// Canvas方式
const canvas = document.getElementById('myCanvas');
const rc = rough.canvas(canvas);
rc.rectangle(50, 50, 200, 100); // x, y, 宽度, 高度

// SVG方式
const svg = document.getElementById('mySvg');
const rc = rough.svg(svg);
const rectNode = rc.rectangle(50, 50, 200, 100);
svg.appendChild(rectNode);

圆形绘制方法

绘制圆形只需要指定圆心坐标和直径：

rc.circle(150, 150, 80); // 圆心x, 圆心y, 直径

椭圆形创建指南

椭圆形绘制需要指定中心点坐标和两个轴的半径：

rc.ellipse(250, 150, 120, 80); // 中心x, 中心y, 宽度, 高度

🎨 样式自定义技巧

Rough.js提供了丰富的样式选项来控制几何图形的外观：

// 带填充的矩形
rc.rectangle(100, 100, 150, 80, {
  fill: 'blue',
  roughness: 2.5,    // 粗糙度控制
  bowing: 3,        // 弯曲程度
  stroke: 'red',     // 边框颜色
  strokeWidth: 2     // 边框宽度
});

// 不同填充样式的圆形
rc.circle(200, 200, 60, {
  fill: 'green',
  fillStyle: 'zigzag', // 填充样式：hachure, solid, zigzag等
  hachureAngle: 45,    // 填充线角度
  hachureGap: 6        // 填充线间距
});

💡 实用技巧与最佳实践

1. 性能优化：对于复杂的几何图形场景，建议使用SVG渲染方式
2. 响应式设计：结合CSS媒体查询调整几何图形尺寸
3. 动画效果：可以通过requestAnimationFrame实现平滑的几何图形动画
4. 交互功能：为绘制的几何图形添加事件监听器

🔧 常见问题解答

Q: 如何控制几何图形的粗糙程度？ A: 通过roughness参数（0-10）控制，值越大越粗糙

Q: 支持哪些填充样式？ A: 支持hachure、solid、zigzag、cross-hatch、dots、dashed、zigzag-line等7种样式

Q: 如何实现几何图形的渐变色？ A: 目前需要手动创建多个重叠的几何图形来实现渐变效果

Rough.js让几何图形绘制变得简单而富有创意，无论是制作数据可视化图表、UI设计元素还是艺术创作，都能轻松实现专业级的手绘效果。立即开始你的手绘几何图形之旅吧！🚀

【免费下载链接】rough 项目地址: https://gitcode.com/gh_mirrors/rou/rough