🎨 Ketcher 化学结构式绘制演示

开源在线结构编辑器，可嵌入网页应用

← 返回首页

📖 什么是 Ketcher？

Ketcher 是一个开源的在线化学结构编辑器，由 EPAM Systems 开发。它提供了完整的化学结构绘制和编辑功能，可以轻松嵌入到网页应用中。主要特性包括：

  • 完整的化学结构编辑器
  • 直观的用户界面
  • 支持多种文件格式（MOL, SDF, SMILES, InChI 等）
  • 反应式绘制
  • 模板库
  • 完全开源免费

🧭 新手学习路径（建议先看）

先按“看界面 → 画第一个分子 → 学会选择与删除 → 记住常用快捷键”的顺序练习，通常 10 分钟就能独立完成基础绘制。

1) 三步画出第一个分子

  • 先点原子工具（建议从 C 开始）
  • 在画布点击放置原子，再次点击自动连单键
  • 拖动鼠标可控制键角度；空价位会自动补氢

2) 最常用编辑动作

  • 框选/套索/片段选择：快速选中对象或整个分子
  • 选中后按 Delete：删除对象
  • 双击原子：修改元素、电荷和原子属性

3) 先记这 8 个高频快捷键

  • Ctrl + Z 撤销，Ctrl + Y 重做
  • Ctrl + C / V 复制粘贴，Ctrl + A 全选
  • 1/2/3/4 快速切换单/双/三/芳香键
  • C/N/O/S/P/H 直接切换常用原子

4) 两个常见误区

  • 导出为 SVG/PNG 后将丢失化学可编辑信息
  • 建议同时保存一份 .mol 或 .ket 便于继续编辑

✏️ 交互式结构编辑器

下方是完整的 Ketcher 编辑器，你可以直接绘制、修改和导出分子结构：

快速加载：

🧪 5 分钟练习（附答案）

建议每题先在上方编辑器独立完成，再导出 SMILES 与答案比对。若 SMILES 写法不同但结构等价，也算正确。

练习 1（入门）：画出乙醇（CH3-CH2-OH）。

查看答案

参考 SMILES：CCO

练习 2（双键）：画出乙酸（CH3-COOH），重点练习把单键改成双键。

查看答案

参考 SMILES：CC(=O)O

练习 3（环结构）：画出苯环，并再接一个甲基，得到甲苯。

查看答案

参考 SMILES：Cc1ccccc1

练习 4（含氮与羧基）：画出甘氨酸，注意氨基和羧基都要完整。

查看答案

参考 SMILES：NCC(=O)O

练习 5（综合）：画出乳酸，并尝试切换楔形键/虚线键观察立体表示变化。

查看答案

参考 SMILES：CC(O)C(=O)O（不含手性标记）

可选进阶：C[C@H](O)C(=O)O 或 C[C@@H](O)C(=O)O

💾 导出结构

💻 代码示例

基本用法

// 1. 使用官方 release 的 remote 包（本地静态资源） // 目录示例：./vendor/ketcher-standalone-2.7.0/standalone/ // 2. 通过 iframe 嵌入编辑器 <iframe id="ketcherFrame" src="./vendor/ketcher-standalone-2.7.0/standalone/index.html"></iframe> // 3. 从 iframe 获取 ketcher 实例 const ketcher = document.getElementById('ketcherFrame').contentWindow.ketcher;

从 SMILES 加载

// 从 SMILES 字符串加载分子 ketcher.setMolecule('CCO'); // 乙醇 // 或者使用 Promise ketcher.setMolecule('CCO').then(function() { console.log('分子已加载'); });

导出结构

// 导出为 SMILES ketcher.getSmiles().then(function(smiles) { console.log('SMILES:', smiles); }); // 导出为 MOL ketcher.getMolfile().then(function(mol) { console.log('MOL:', mol); }); // 导出为 InChI ketcher.getInchi().then(function(inchi) { console.log('InChI:', inchi); }); // 导出为 SVG ketcher.getSvg().then(function(svg) { console.log('SVG:', svg); });

监听结构变化

// 监听结构变化事件 ketcher.editor.subscribe('change', function() { console.log('结构已改变'); // 获取当前结构 ketcher.getSmiles().then(function(smiles) { console.log('当前 SMILES:', smiles); }); });

🌟 主要功能特性

功能 说明
完整编辑器 提供完整的化学结构绘制和编辑功能
直观界面 用户友好的图形界面
文件格式支持 支持 MOL, SDF, SMILES, InChI, SVG 等多种格式
反应式绘制 可以绘制化学反应方程式
模板库 内置常用化学结构模板
API 支持 提供完整的 JavaScript API

📚 扩展阅读：什么是“计算 CIP”？

你在工具栏看到的“计算 CIP”，本质是让程序按 Cahn-Ingold-Prelog 规则自动判定立体化学标记（R/S、E/Z）。

字母含义速查：R = Rectus（拉丁语，右）、S = Sinister（拉丁语，左）、E = Entgegen（德语，相对/相反）、Z = Zusammen（德语，在一起/同侧）。

CIP 规则速读（R/S 与 E/Z）
  • CIP = Cahn-Ingold-Prelog，用于统一判定立体构型。
  • R/S：用于手性中心（通常是连四个不同基团的碳）。
  • E/Z：用于双键两端各连两个不同基团的情况。
  • 优先级先看直接连接原子的原子序数，序数越大优先级越高（如 O > N > C > H）。
  • 若第一层相同，则逐层比较后续原子；双键/三键按“重复连接”原则处理。
在 Ketcher 中如何“计算 CIP”
  • 先画好分子（含手性中心或可判定 E/Z 的双键）。
  • 点击工具栏 计算 CIP 按钮，Ketcher 会自动完成判定。
  • 结果会在结构上显示为 R/S 或 E/Z 标记。
  • 若结果异常，优先检查：楔形键方向、双键两端取代基是否正确。
一个快速例子（便于自测）

乳酸常见写法：CC(O)C(=O)O。如果加入手性标记，可写为 C[C@H](O)C(=O)O 或 C[C@@H](O)C(=O)O（两者互为对映体）。

2-丁烯 可用于练习 E/Z 判定：比较双键两端高优先级基团是否同侧（Z）或异侧（E）。

🔗 更多资源

• Ketcher 官方网站: https://lifescience.opensource.epam.com/ketcher/

• GitHub: https://github.com/epam/ketcher

• 文档: https://lifescience.opensource.epam.com/ketcher/demo.html

← 返回首页