1 起步
1.1  开放平台简介
1.2 开始
1.2.1  申请账号
1.2.2  申请应用授权
2 开放能力
2.1  签名规则
2.2 JS化学结构式编辑器
2.2.1  代码下载
2.2.2  目录结构
2.2.3  快速集成
2.2.4  高级用法
2.3 CHEM能力
2.3.1  概述
2.3.2 KD CHEM HTTP API
2.3.2.1  接口初始化
2.3.2.2  MOL转SMILES
2.3.2.3  SMILES转MOL
2.3.3 KD CHEM JS SDK
2.3.3.1  引入JS SDK
2.3.3.2  SDK初始化
2.3.3.3  MOL与SMILES转化
2.3.4  实例代码下载

快速集成

2020-09-29 15:45:20
kingdraw
1685
最后编辑:kingdraw 于 2020-10-16 16:33:21

1. 先确保HTML页面引用了对应的JS资源:


zrender.js

jquery.js

kd-bridge.js

kd-palette.js

kd-palette-core.js


2. 实例化new KD_PALETTE对象,并以一个DOM ID作为初始化参数:


const palette = new KD_PALETTE('container');


3. 注册画板的就绪和错误事件:


palette.ready(() => {

...

});

palette.error((e)=>{

...

});


4. 初始化画板


palette.initialization(appId,timestamp,nonce,signature);


注意:这里建议初始化签名由后端生成,KingDraw开放平台已提供了几种后端签名的示例,细节请访问:签名规则




5. 设置画板大小


初始化成功会回调palette.ready,之后可以通过palette.initCanvas(width,height)来设置画板的宽高


6. 画板的显示和隐藏


通过控制DOM ID的显示和隐藏,来控制JS编辑器的显示隐藏状态,如:$('#container').show()、$('#container').hide()


7. 获取画板绘制的化学结构


当前版本结构式只支持mol格式的获取,直接调用palette.getMol()即可获取结构式内容,如需要更多格式,请参照:高级用法