SovitChart示例
Sovit2D示例
Sovit3D示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
</head>
<body style="background-color: #e5e7ea;">
<div class="main-case" style="min-height: 500px;padding-top: 30px;">
<iframe id="demo_iframe" ref="demoIframe" style="border:1px #69f solid" src="" scrolling="auto" width="100%" height="768" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes">
</iframe>
</div>
</body>
</html>
<script>
let sceneMain = null;
let sovitMouseoverTimer2 = null;
let isInDiv = false;
$(document).ready(function() {
//iframe中加载模型
$("#demo_iframe").attr("src", " https://admin.sovitjs.com/publish_2d/2951566629932105737");
//写一个方法用来监听模型事件回调
window.onmessage = handleIframeMessage;
//测试用的弹出框实现
$(document).on('mouseover', ".test_click_div", function(ev) {
clearTimeout(sovitMouseoverTimer2);
isInDiv = true;
$(".test_click_div").show()
}).on("mouseout", ".test_click_div", function(e) {
$(".test_click_div").hide();
isInDiv = false;
});
$(".test_click_div").click(function(){
alert('被点击的值是：'+$(this).attr("id"));
})
});
//自定义方法用来接收模型中的事件
function handleIframeMessage(event) {
//接收到的事件中包含的数据
const data = event.data
switch(data.cmd) {
case 'EventCallback'://EventCallback是定义好的事件回调名，必须这样写
if(data.params.success) {
console.info(data)//打印出来看看
let reJson = data.params.data.props;
if(data.params.data.type == 1) {//type代表事件类型：1单击 2双击 3鼠标移入 4鼠标移出
let textValue = "";
//textAttrs代表模型中发生事件的组件的文本对象
//objectAttrs代表模型中发生事件的组件对象
if(data.params.data.textAttrs != undefined) {
textValue = data.params.data.textAttrs.text;
}
alert("点击事件回调测试："+textValue);
}if(data.params.data.type == 3) {//鼠标移入
clearTimeout(sovitMouseoverTimer2);
if($(".test_click_div").is(':hidden')) {
$(".test_click_div").show()
let textValue = "";
if(data.params.data.textAttrs != undefined) {
textValue = data.params.data.textAttrs.text;
}
$(".test_click_div").css('left', data.params.data.objectAttrs.x / 2 + 25)
$(".test_click_div").css('top', data.params.data.objectAttrs.y / 2 - 20)
$(".test_click_div").attr("id",textValue);
}
} else if(data.params.data.type == 4) {//鼠标移出
sovitMouseoverTimer2 = setTimeout(function() {
if($(".test_click_div").is(':visible') && isInDiv==false) {
$(".test_click_div").hide()
}
},500);
}
} else {
console.info("事件数据获取失败")
}
break;
}
}
function doClick(vaue) {
alert(vaue);
}
</script>
效果预览：
通过Sovit2D后台编辑器制作好的模型。这里用来测试如何利用事件回调进行组件的事件开发操作。
请在下面模型中进行事件回调测试，Ua和弹簧未储能可测试鼠标移入移出测试，Ub可测试点击事件。
要实现组件事件回调请在模型编辑器中的事件页签中给组件添加事件。
通过Sovit2D后台编辑器制作好的模型。这里用来测试如何利用事件回调进行组件的事件开发操作。
请在下面模型中进行事件回调测试，Ua和弹簧未储能可测试鼠标移入移出测试，Ub可测试点击事件。
要实现组件事件回调请在模型编辑器中的事件页签中给组件添加事件。
查看曲线
