高级用法

2020-09-30 10:35:00
kingdraw
原创
417

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();

}); 

文章分类
联系我们