快速集成

2020-09-30 10:23:00
kingdraw
原创
617

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()即可获取结构式内容,如需要更多格式,请参照:高级用法

文章分类
联系我们