SMILES Drawer：纯JavaScript分子结构可视化工具
项目地址: https://gitcode.com/gh_mirrors/smi/smilesDrawer SMILES Drawer是一款功能强大的JavaScript组件，专门用于解析和绘制SMILES（Simplified Molecular Input Line Entry System）字符串。该项目由Reymond Group开发，采用MIT许可证开源发布，当前版本为2.1.10。
核心特性
SMILES Drawer具备以下突出特点：
无需服务器支持：完全在客户端浏览器中运行，无需后端服务支持 零依赖图像模板：基于纯JavaScript和Canvas/SVG技术生成分子结构图 高性能渲染：即使处理复杂分子结构也能保持流畅的绘制性能 高度可定制：支持亮色和暗色主题，原子颜色和样式完全可配置 跨框架兼容：可在原生JavaScript、React、Vue、Svelte等现代前端框架中使用
快速入门指南
安装方式
通过npm或yarn安装：
npm install smiles-drawer
# 或
yarn add smiles-drawer
或者通过CDN直接引入：
<script src="https://unpkg.com/smiles-drawer@2.1.10/dist/smiles-drawer.min.js"></script>
基础使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SMILES Drawer示例</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" />
</head>
<body>
<input id="smiles-input" placeholder="输入SMILES字符串" />
<canvas id="output-canvas" width="500" height="500"></canvas>
<script src="smiles-drawer.min.js"></script>
<script>
const input = document.getElementById('smiles-input');
const options = { width: 500, height: 500 };
const smilesDrawer = new SmilesDrawer.Drawer(options);
input.addEventListener('input', function() {
SmilesDrawer.parse(input.value, function(tree) {
smilesDrawer.draw(tree, 'output-canvas', 'light', false);
});
});
</script>
</body>
</html>
分子结构可视化示例
高级功能特性
主题定制
SMILES Drawer提供完整的颜色主题定制功能，支持亮色和暗色两种预设主题，并且可以完全自定义原子颜色：
const customTheme = {
C: '#333333', // 碳原子颜色
O: '#FF0000', // 氧原子颜色
N: '#0000FF', // 氮原子颜色
BACKGROUND: '#FFFFFF' // 背景颜色
};
SVG支持
除了Canvas渲染，还提供SVG渲染器，生成矢量图形：
const svgDrawer = new SmilesDrawer.SvgDrawer(options);
svgDrawer.draw(tree, 'output-svg', 'light', false);
反应式绘制
支持实时输入响应，用户在输入框中输入SMILES字符串时实时更新分子结构显示。
反应高亮显示
配置选项详解
SMILES Drawer提供丰富的配置选项：
| 配置项 | 说明 | 默认值 |
|---|---|---|
| width | 画布宽度 | 500px |
| height | 画布高度 | 500px |
| bondThickness | 键粗细 | 0.6 |
| bondLength | 键长度 | 15 |
| atomVisualization | 原子可视化方式 | 'default' |
| terminalCarbons | 显示末端碳原子 | false |
| explicitHydrogens | 显示显式氢原子 | false |
应用场景
化学教育：帮助学生直观理解分子结构和化学键 药物研发：快速可视化候选化合物分子结构 科研论文：为学术论文生成高质量的分子结构图 化学数据库：在线展示化学物质的结构信息
样式定制界面
技术优势
基于现代JavaScript标准开发，不依赖任何外部库（除chroma-js用于颜色处理）。采用模块化设计，易于集成到现有项目中。支持ES6模块导入，兼容现代构建工具如Webpack、Rollup等。
开发与构建
项目使用Gulp作为构建工具，支持自定义构建：
git clone https://gitcode.com/gh_mirrors/smi/smilesDrawer
cd smilesDrawer
npm install
gulp
构建完成后，在dist目录下生成优化后的生产文件。
SMILES Drawer作为一个成熟的开源项目，持续维护和更新，为化学信息学领域提供了强大的可视化解决方案。无论是教育、科研还是工业应用，都能为用户提供专业级的分子结构绘制体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
