🔬 Kekule.js 化学结构式绘制演示

开源 JavaScript 化学结构库,支持结构式编辑和渲染

← 返回首页

📖 什么是 Kekule.js?

Kekule.js 是一个开源的 JavaScript 化学信息学库,专门用于在网页中表示、绘制、编辑和搜索化学结构。它支持:

  • 完整的化学结构编辑器
  • 多种文件格式支持(MOL, SDF, SMILES, InChI 等)
  • 结构式查看器和渲染器
  • 化学结构搜索和匹配
  • 反应式绘制
  • 完全开源免费

🎨 基础示例

示例 1: 结构查看器 - 苯环

示例 2: 结构查看器 - 水分子

示例 3: 结构查看器 - 咖啡因

✏️ 交互式结构编辑器

下方是一个完整的化学结构编辑器,你可以直接在其中绘制和编辑分子结构:

🔤 SMILES 字符串输入

在下方输入 SMILES 字符串,然后点击"加载"按钮来在编辑器中显示分子结构:

💻 代码示例

基本用法 - 查看器

// 1. 引入 Kekule.js 库 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kekule/dist/themes/default/kekule.css"> <script src="https://cdn.jsdelivr.net/npm/kekule/dist/kekule.min.js"></script> // 2. 创建查看器 <div id="viewer" style="width:500px; height:400px;"></div> // 3. 初始化并加载分子 var viewer = new Kekule.ChemWidget.Viewer(document.getElementById('viewer')); var mol = Kekule.IO.loadFormatData('CCO', 'smi'); // 从 SMILES 加载 viewer.setChemObj(mol);

结构编辑器

// 创建可编辑的结构编辑器 var editor = new Kekule.Editor.Composer(document.getElementById('editor')); editor.setChemObj(Kekule.IO.loadFormatData('C1=CC=CC=C1', 'smi'));

从 MOL 文件加载

// 从 MOL 文件内容加载 var molContent = '...'; // MOL 文件内容 var mol = Kekule.IO.loadFormatData(molContent, 'mol'); viewer.setChemObj(mol);

导出结构

// 导出为 SMILES var mol = editor.getChemObj(); var smiles = Kekule.IO.saveFormatData(mol, 'smi'); console.log(smiles); // 导出为 MOL var molFile = Kekule.IO.saveFormatData(mol, 'mol'); console.log(molFile);

🌟 主要功能特性

功能 说明
结构编辑器 完整的交互式化学结构编辑器
结构查看器 只读的分子结构查看器
文件格式支持 支持 MOL, SDF, SMILES, InChI, CML 等多种格式
结构搜索 支持子结构搜索和相似度搜索
反应式绘制 可以绘制化学反应方程式
开源免费 完全开源,可自由使用和修改
← 返回首页