marvin Js 的使用介绍
1、解析官方给出的demo文件，demo提示没有加载授权文件
<link type="text/css" rel="stylesheet" href="gui/css/editor.min.css" media="screen" />
<script src="gui/lib/promise-1.0.0.min.js"></script>
<script src="js/webservices.js"></script>
<script src="gui/gui.nocache.js"></script>
<script>
window.addEventListener("message", function(event) {
try {
var externalCall = JSON.parse(event.data);
marvin.onReady(function() {
marvin.sketcherInstance[externalCall.method].apply(marvin.sketcherInstance, externalCall.args);
});
} catch (e) {
console.log(e);
}
}, false);
// 在这个方法里加载授权文件
function sketchOnLoad() {
//当前浏览器是否支持marvin Js
if(marvin.Sketch.isSupported()) {
//创建marvin Js
marvin.sketcherInstance = new marvin.Sketch("sketch");
marvin.sketcherInstance.setServices(getDefaultServices());
} else {
alert("Cannot initiate sketcher. Current browser may not support HTML canvas or may run in Compatibility Mode.");
}
}
</script>
2、授权
function sketchOnLoad() {
if(marvin.Sketch.isSupported()) {
//授权
marvin.sketcherInstance = new marvin.Sketch("sketch");
var licenseURL = "plug-in/chem/marvinjs-15.6.29-all/licenses/license_MJS.cxl";
marvin.Sketch.license(licenseURL);
/* marvin.sketcherInstance = new marvin.Sketch("sketch");
marvin.sketcherInstance.setServices(getDefaultServices()); */
} else {
alert("Cannot initiate sketcher. Current browser may not support HTML canvas or may run in Compatibility Mode.");
}
}
3、将demo.jsp封装到iframe中，调用marvinJs核心方法；
将demo.jsp封装到iframe
<div class="resizable"> <!-- class="sketcher-frame" -->
<iframe src="chemContrller.do?chemdemo" id="sketch" height="500px
</div>
初始化生成 marvinSketcherInstance，由此方法将图片生成mol
var structureType = "mol"; //结构类型 mol 或者 mrv
var marvinSketcherInstance;
$(document).ready(
function handleDocumentReady (e) {
var p = MarvinJSUtil.getEditor("#sketch");
p.then(function (sketcherInstance) {
//marvinjs-15.6.29-all js 核心，需要授权后使用
marvinSketcherInstance = sketcherInstance;
},function (error) {
});
initForm();
lableChoose()
}
);
4、将结构式生成mol字符串数组
function initForm(){
$("#submitButTemp").click(function(){
var mol = null;
//mol mrv
//这里是核心方法
marvinSketcherInstance.exportStructure(structureType).then(function(source) {
//mol 为结构式转化的字符串数组
mol = source;
if(marvinSketcherInstance.isEmpty() || !mol || null == mol || ""==mol){
alert("请先画出结构！");
return false;
}
//此处 选择 查询方式
var type = $("input[name='typeRadio'][checked='checked']").val();
if(1!=type && 2!=type && 3!=type){
alert("类型值错误!");
return false;
}
//设相似度为0.5
var similarityThreshold =0.5;
type = Number(type);
similarityThreshold = Number(similarityThreshold).toFixed(2);
var isOk = false;
$.ajax({
url : "chemContrller.do?marvinJchemKey",
type : "post",
async : false,
data : {
"type":type,
"mol":mol,
"similarityThreshold":similarityThreshold
},
success:function(results){
var _html = "";
$.each(results.idList,function(i,items){
_html=_html+","+items;
})
$("#idStore").append(_html);
//window.parent.location.href ="drugChemistryContrller.do?list"
},
error : function(){
toastrError("操作失败,请检查网络或服务器无法连接!");
}
});
}, function(error) {
alert("Molecule export failed:"+error);
});
});
}