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
2999
最后编辑:kingdraw 于 2020-10-16 16:33:21

1.兼容性


支持 IE8+,及所有现代浏览器


2.使用


2.1添加容器


在页面中添加编辑器的div容器,容器添加属性 `id=‘container’ ` 、 `class=‘kdjs-cont’` 。

添加Html代码

<div id="container" class="kdjs-cont"></div>

添加引用脚本

<script src="lib/Script/jquery-1.9.1.js"></script>

<script src="lib/Script/zrender.js"></script>

<script src="lib/Script/kd-bridge.js"></script>

<script src="lib/Script/kd-js.js"></script>

初始化

使用 `var kd = new kdjs(id,imgFile);` 创建对象。

参数

说明   

类型

默认值

id 

 div容器 `id` 属性值

 string

 imgFile

 图片目录,非必填

 string 

 img/

使用 `initCanvas(width,height)` 方法初始化画板。可以通过修改 `<div class="kdBox f-cb">` 的样式来修改编辑器的宽高 ,例如:`$(".kdjs-kdBox").width(800);`

参数

说明   

类型

默认值

width

 画板宽度,值 `0` 时默认宽度为 `100%`

number

 height

 画板高度

  number

代码如下:

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);

});

2.2扩展方法


2.2.1设置语言


使用 `setLang(lang)` 方法设置更改编辑器语言,目前只支持简体中文和英文

参数

说明   

类型

默认值

lang

语言,可选值为 `zh` `en`

string

 `zh`

代码如下:

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);

    //设置语言(zh|en),默认为中文

    kd.setLang('en');

});

2.2.2绘制MOL到画板


使用 `setMol(mol)` 方法绘制结构式到画板。

参数

说明   

类型

默认值

mol

Mol格式文本

string

 -

代码如下:

 $(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);


    //Mol格式文本

    var context = $("#molContext").val();

    //绘制MOL到画板

    kd.setMol(context);

});


MOL格式文本示例如下:


    KingDraw.mol

      KingDraw2.12D

    

      0  0  0     0  0              0 V3000

    M  V30 BEGIN CTAB

    M  V30 COUNTS 2 1 0 0 0

    M  V30 BEGIN ATOM

    M  V30 1 C -7.130521 3.942292 0 0 HCOUNT=3

    M  V30 2 C -6.455021 4.332292 0 0 HCOUNT=3

    M  V30 END ATOM

    M  V30 BEGIN BOND

    M  V30 1 1 1 2

    M  V30 END BOND

    M  V30 END CTAB

    M  END


2.2.3获取MOL


使用 `getMol()` 方法获取画板中结构式的MOL文本。


代码如下:

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);


    //获取MOL

     var molText = kd.getMol();

}); 


2.2.4设置打开结构中文本转MOL的回调方法


编辑器的 `打开结构` 功能可将MOL文本绘制到画板中,编辑器目前只支持MOL文本,不支持其他格式,可以使用 `setContentToMol(fun)` 方法设置文本转MOL的回调方法。

参数

说明   

类型

默认值

fun

将其他格式文本转MOL的回调方法,回调方法参数 `cont` 为 `打开结构` 中文本框中的内容

 function

 -

代码如下:

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);


    //设置打开结构中文本转MOL的回调方法

    kd.setContentToMol(function(cont){

        //转MOL

       cont = contentToMol(cont);

       return cont;

    });


    //文本转MOL方法

    function contentToMol(cont){

        ...

    }

}); 

注:MOL和SMILES格式转换请参照 CHEM HTTP API接口文档


2.2.4清空画板


使用 `clearCanvas()` 方法清空画板。


代码如下:

$(function () {

    var kd = new kdjs('container');

    //初始化Canvas

    kd.initCanvas(0,600);

    //清空画板

    kd.clearCanvas();

});