📖 什么是 ChemDoodle？
ChemDoodle Web Components 是一个功能强大的 JavaScript 库，专门用于在网页中绘制和编辑化学结构式。它支持：
- 2D 和 3D 分子结构可视化
- 化学反应式绘制
- 多种文件格式支持（MOL, SDF, SMILES 等）
- 交互式结构编辑器
- 高质量的结构渲染
🎨 基础示例
示例 1: 苯环 (Benzene)
示例 2: 水分子 (Water)
示例 3: 咖啡因 (Caffeine)
✏️ 交互式演示
在下方输入 SMILES 字符串，然后点击"绘制"按钮来渲染分子结构：
💻 代码示例
基本用法
// 1. 引入 ChemDoodle 库
<script src="https://web.chemdoodle.com/chemdoodleweb.js"></script>
// 2. 创建画布
<canvas id="myCanvas" width="500" height="500"></canvas>
// 3. 初始化并绘制分子
var canvas = new ChemDoodle.ViewerCanvas('myCanvas', 500, 500);
var mol = ChemDoodle.readMOL(molFileContent);
canvas.loadMolecule(mol);
从 SMILES 字符串创建
// 使用 SMILES 字符串
// 注意：不同版本的 ChemDoodle 可能使用不同的 API
// 方法1: ChemDoodle.readSMILES (如果可用)
var mol = ChemDoodle.readSMILES('CCO'); // 乙醇
// 方法2: ChemDoodle.IO.readSMILES (备用)
// var mol = ChemDoodle.IO.readSMILES('CCO');
var canvas = new ChemDoodle.ViewerCanvas('canvas', 500, 500);
canvas.loadMolecule(mol);
canvas.repaint();
自定义样式
var canvas = new ChemDoodle.ViewerCanvas('canvas', 500, 500);
canvas.specs.bonds_width_2D = 1.5;
canvas.specs.bonds_saturationWidth_2D = 0.18;
canvas.specs.atoms_font_size_2D = 16;
canvas.specs.atoms_font_families_2D = ['Arial', 'sans-serif'];
canvas.specs.backgroundColor = 'white';
canvas.loadMolecule(mol);
canvas.repaint();
🌟 主要功能特性
| 功能 | 说明 |
|---|---|
| 2D 结构绘制 | 支持绘制各种有机和无机化合物的 2D 结构式 |
| 3D 可视化 | 支持分子的 3D 结构显示和旋转 |
| 反应式绘制 | 可以绘制化学反应方程式 |
| 文件格式支持 | 支持 MOL, SDF, SMILES, InChI 等多种格式 |
| 交互式编辑 | 提供完整的结构编辑器组件 |
| 高质量渲染 | 专业的化学结构渲染质量 |
🔗 更多资源
• ChemDoodle 官方网站: https://www.chemdoodle.com
• 文档和示例: https://web.chemdoodle.com/docs
• GitHub: https://github.com/chensk/ChemDoodleWeb