【业务背景】
基于SMILES表达式动态生成分子结构图
【知识点】
SMILES : 简化分子线性输入规范（英语：Simplified molecular input line entry specification，简称SMILES），是一种用ASCII字符串明确描述分子结构的规范。
RDKit.js : 基于SMILES表达式动态生成图片（SVG/Canvas）的基础库,支持节点、链高亮展示，协议开源协议（BSD-3-Clause）可商用，支持vue/react/js 。
【使用】
1.基于smiles生成’分子结构类’
let mol = RDKitModule.get_mol(smiles);
2.类方法
mol.get_svg(); // 生成svg
mol.draw_to_canvas(canvas, -1, -1);
mol.get_svg(); // 生成svg
mol.draw_to_canvas(canvas, -1, -1);
mol.get_svg(); // 生成svg
mol.draw_to_canvas(canvas, -1, -1);
3.高亮展示
a.子结构高亮：
var smarts = "Oc1[c,n]cccc1";
var qmol = RDKitModule.get_qmol(smarts)
var smarts = "Oc1[c,n]cccc1";
var qmol = RDKitModule.get_qmol(smarts)
var smarts = "Oc1[c,n]cccc1";
var qmol = RDKitModule.get_qmol(smarts)
b.节点高亮
var mdetails = {};
mdetails['atoms']=[0,1,10]; // 分子表达式中CNO等字母下标
mdetails['explicitMethyl'] = true;
mdetails['addAtomIndices'] = true;
mdetails['legend']='aspirin’; // 标题显示
var mdetails = {};
mdetails['atoms']=[0,1,10]; // 分子表达式中CNO等字母下标
mdetails['explicitMethyl'] = true;
mdetails['addAtomIndices'] = true;
mdetails['legend']='aspirin’; // 标题显示
// 分子表达式中CNO等字母下标
var mdetails = {};
mdetails['atoms']=[0,1,10];
mdetails['explicitMethyl'] = true;
mdetails['addAtomIndices'] = true;
mdetails['legend']='aspirin’; // 标题显示
4.绘制
mol.draw_to_canvas_with_highlights(canvas, mdetails);
var svg = mol.get_svg_with_highlights(mdetails);
mol.draw_to_canvas_with_highlights(canvas, mdetails);
var svg = mol.get_svg_with_highlights(mdetails);
mol.draw_to_canvas_with_highlights(canvas, mdetails);
var svg = mol.get_svg_with_highlights(mdetails);
【参考文档】
\
