快速集成
- 2020-09-30 10:23:00
- kingdraw 原创
- 759
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()即可获取结构式内容,如需要更多格式,请参照:高级用法