Ketcher基本使用和用SMILES字符串生成键线式矢量图

Ketcher基本使用和用SMILES字符串生成键线式矢量图

Ketcher介绍

Ketcher 是一个基于 Web 的开源化学结构编辑器。Ketcher 专为绘制结构和反应的化学家、实验室科学家和技术人员而设计。Ketcher 使用纯 JavaScript 开发，兼具高性能、良好的可移植性和轻量级的特点。您不需要任何 Java 或 Flash 插件即可在您的浏览器中使用它。Ketcher 是完全免费和开源的，同时也可以在商业基础上使用。

• Ketcher官网

Ketcher基本使用

这小节的方法参考了这个项目vue_molecule_editor: VUE编写的化学分子编辑器、化学结构编辑器DEMO,集成了JSME，ketcher

在官网下载Ketcher的standalone版本，下载包里包含的就是一个完整的Ketcher编辑器，解压到项目中后直接用html的iframe标签就可以将Ketcher嵌入在自己的页面上了。

<iframe id="katcher" src="ketcher包里的index.html路径"/>

如果想要获得绘制的有机分子的SMILES字符串，可以参考下面的js代码：

//--------获取ketcher实例--------
let ketcherSmiles;
let ketcherFrame = document.getElementById("idKetcher");
let ketcher = null;
if ("contentDocument" in ketcherFrame) {
  ketcher = ketcherFrame.contentWindow.ketcher;
} else {
  ketcher = document.frames["idKetcher"].window.ketcher;
}
//--------获取SMILES字符串--------
ketcher.getSmiles().then(
  (res) => {
    // 得到SMILES字符串
    ketcherSmiles = res;
  })
  .catch((e) => {
    console.log(e);
  }
);

利用Ketcher在前端用SMILES生成键线式图片

项目中有一个需求，需要在后端传回SMILES字符串后，在前端绘制对应的键线式图片并展示，由于自己技术有限，没有办法保证得到SMILES字符串和Ketcher初始化的先后顺序，又不想通过添加setInterval的方式去检测Ketcher是否初始化，所以采用的是通过安装npm的ketcher模块的方式解决。

• 安装ketcher-core和

npm install --save [email protected]
npm install --save [email protected]

这里指定了下我安装的这两个包的版本，两个包的版本如果不匹配的话好像会报错？

• 导入到程序中

import { StandaloneStructService } from 'ketcher-standalone'
import { Ketcher } from 'ketcher-core'

• 创建Katcher实例

let structService = new StandaloneStructService()
let ketcher = new Ketcher({}, structService, {})

• 通过SMILES字符串生成图片

let imageURL;
ketcher.generateImage("想要生成图片的SIMLES字符串", {
  outputFormat: "svg",                        // 生成图片的类型，可以是"svg"或"png"
  backgroundColor: "255, 255, 255"            // 背景颜色
}).then(res => {
  imageURL = window.URL.createObjectURL(res); // res是blob类型，用该方法转为url后可以在用img展示
});

结尾

如文章有哪里写的不对，欢迎批评指正，我会尽快更改，感谢！