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 ketcher-core@2.7.2
npm install --save ketcher-standalone@2.6.2

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

导入到程序中

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展示
});

结尾

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

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

AI绘图实战（十）：制作线稿矢量图之包头巾的女人，画矢量图/生成矢量图/导出矢量图/直出svg/vector studio插件使用 | Stable Diffusion成为设计师生产力工具
S:AI能取代设计师么? I :至少在设计行业,目前AI扮演的主要角色还是超级工具,要顶替?除非甲方对设计效果无所畏惧~~ 预先学习: 安装及其问题解决参考:<Windows安装Stable D ...
分子的建图（smiles字符串、networkx图、dgl图）
目录头文件 smiles字符串转化为networkx中的图 networkx图的绘制加节点属性加边属性 networkx访问边的属性 networkx图转化为dgl图直接根据分子图构建dgl ...
java读取字符串,生成txt文件
/*** 读取字符串,生成txt 文件已解决未设置编码时,在项目中直接打开文件,中文乱码问题* WriteText.writeToText(musicInfo,fileName)直接调用* * @a ...
【Groovy】json 序列化 ( JsonBuilder 生成器 | 生成带根节点名称的 json 字符串 | 生成不带根节点名称的 json 字符串 )
文章目录一.json 生成器二.代码示例一.json 生成器首先 , 创建 json 生成器 . // json 生成器 def jsonBuilder = new JsonBuilder() ...
将Python字符串生成PDF
笔者在今天的工作中,遇到了一个需求,那就是如何将Python字符串生成PDF.比如,需要把Python字符串'这是测试文件'生成为PDF, 该PDF中含有文字'这是测试文件'. 经过一番检索,笔者决定 ...
Freemarker基于模板字符串生成静态化html文件
基于字符串生成静态化文件,就不会通过模板文件.ftl了,也就是项目中压根就不存在模板文件,就是通过用户输入或在配置文件中定义一些模板字符串,基于这些字符串来生成静态化文件. 将字符串转换成模板:
微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
生成html_听说你不会用Python将字符串生成PDF？来，我教你！
这是恋习Python推荐的第118篇好文来源:Python爬虫与算法作者:jclian 笔者在今天的工作中,遇到了一个需求,那就是如何将Python字符串生成PDF.比如,需要把Python字 ...
php 根据数量创建数组,php实现根据字符串生成对应数组的方法
本文实例讲述了php实现根据字符串生成对应数组的方法,是比较实用的技巧.分享给大家供大家参考.具体方法如下: 先看看如下示例: $config = array( 'project|page|index ...

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

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

Ketcher介绍

Ketcher基本使用

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

结尾

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

最新文章

热门文章