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