词云图生成器 · WordCloud Generator

一个功能丰富的中文/多语言词云生成器，支持均等模式与加权模式，可完全自定义颜色、字号、旋转角度、重叠程度和画布尺寸，并支持导出为 PNG、JPG、JPEG 和 SVG 格式。

✨ 功能特性

• 两种输入模式
  • 均等模式：手动输入关键词或文案，每个词权重相同，字号随机分布。
  • 加权模式：粘贴长文本，自动统计词频，高频词字号更大。
• 丰富的自定义选项
  • 动态添加/删除主题色（颜色选择器）
  • 自定义背景色
  • 字号范围精确调节
  • 旋转角度控制：支持随机角度范围，或仅使用 0° 与 90°（水平/垂直）
  • 字体重叠率滑块：从稀疏到密集，并可选 允许词语重叠
  • 均等模式下可勾选 铺满画布（重复词汇填满整个画布）
  • 画布尺寸自定义：输入宽高（px），支持锁定宽高比及常用比例预设（16:9、4:3、1:1 等）
• 导出功能
  • 导出为 PNG、JPG、JPEG 和 SVG
  • SVG 保留文字可编辑性
• 美观的 UI
  • 控件采用卡片式布局
  • 滑块带有进度条颜色指示
  • 复选框与滑块自定义样式，与主题色协调
  • 滚动条主题色美化
  • 底部页脚包含项目信息

🚀 使用方法

1. 直接运行
   克隆或下载本仓库，用浏览器打开 index.html 即可。

2. 生成词云

   • 在左侧控制面板选择 均等模式 或 加权模式。
   • 输入关键词/文本。
   • 调整颜色、字号、旋转角度、重叠率等参数。
   • 点击 生成词云 按钮。
   • 在右侧画布查看效果。

3. 调整画布大小
   在“画布尺寸”卡片中输入宽高（像素），可勾选“锁定比例”并选择预设比例，点击“生成词云”时自动应用。

4. 导出图片
   点击 PNG / JPEG / JPG / SVG 按钮下载对应格式的图片。

🛠️ 技术栈

• HTML5 Canvas
• 原生 JavaScript（无框架依赖）
• CSS3（Flexbox 布局、自定义滚动条、复选框与范围滑块样式）
• Font Awesome 6 图标

📁 项目结构

index.html # 主页面
style.css # 全局样式（包含卡片、滑块、复选框、页脚样式）
script.js # 核心逻辑（词云布局算法、事件处理、导出功能）

注：footer.js 与 footer.css 已整合至 index.html 引用的 style.css 中，无需额外文件。

🧩 主要算法

• 词频统计：加权模式下，根据空格、逗号、换行等分隔符提取单词并统计出现次数，归一化为 0~1 的权重。
• 词云布局：采用 螺旋布局 算法，从画布中心向外螺旋搜索可放置位置，大词优先放置；支持 旋转后轴对齐包围盒 精确碰撞检测，保证不重叠或按需重叠。
• 进度条滑块：通过 linear-gradient 动态更新滑块背景，实现进度可视化。

📝 自定义与扩展

• 修改主题色进度条颜色：在 script.js 中的 updateRangeBackground 函数里调整 #0ab8b2 和 #e2e8f0。
• 增加预设比例：在 index.html 的 <select id="aspectPreset"> 中添加新选项，如 21:9。
• 拓展导出格式：在 exportImage 函数中添加新的 MIME 类型处理即可。

📄 许可

本项目仅供学习与个人使用，保留所有权利。词云图生成器 · 2026 多恩星环 DornGames。

---

Enjoy your wordcloud! ☁️