Skip to content

3
3DWeb
Commit ccc4783e authored by lixiaoyi's avatar lixiaoyi
Browse files
Options

fix 模型重叠

parent 04bf9251
Hide whitespace changes
Inline Side-by-side
Showing with 869 additions and 731 deletions
index.html
View file @ ccc4783e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css" />
</head>
<style>
#webgl-output{
position: absolute;
top: 0px;
height: 100%;
left: 0px;
/* width: 1100px; */
}
.dg{
display: none;
}
body{
position: relative;
}
.fileDragArea1{
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
color: #5BFCF4;
width: 150px;
height: 40px;
}
.cyxPopup{
z-index: 300;
position: fixed;
display: none;
width: 1280px;
height: 710px;
background: #191A1A;
border-radius: 3px;
top: calc(50% - 350px);
left: calc(50% - 640px);
}
.cyxPopup_head{
width: calc(100% - 20px);
padding-left: 20px;
line-height: 36px;
height: 36px;
background: #292A2A;
color: #c9c9c9;
}
.Popupbody{
width: 600px;
padding: 0px 0;
height: calc(100% - 86px);
float: left;
}
.Popupbodyright{
float: left;
height: calc(100% - 76px);
width: calc(100% - 610px);
background: #000;
margin-left: 10px;
position: relative;
top: 35px;
}
.toptable{
padding: 0 10px;
}
.th{
#webgl-output {
position: absolute;
top: 0px;
height: 100%;
left: 0px;
/* width: 1100px; */
}
.dg {
display: none;
}
body {
position: relative;
}
.fileDragArea1 {
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
color: #5bfcf4;
width: 150px;
height: 40px;
}
.cyxPopup {
z-index: 300;
position: fixed;
display: none;
width: 1280px;
height: 710px;
background: #191a1a;
border-radius: 3px;
top: calc(50% - 350px);
left: calc(50% - 640px);
}
.cyxPopup_head {
width: calc(100% - 20px);
padding-left: 20px;
line-height: 36px;
height: 36px;
background: #292a2a;
color: #c9c9c9;
}
.Popupbody {
width: 600px;
padding: 0px 0;
height: calc(100% - 86px);
float: left;
}
.Popupbodyright {
float: left;
height: calc(100% - 76px);
width: calc(100% - 610px);
background: #000;
margin-left: 10px;
position: relative;
top: 35px;
}
.toptable {
padding: 0 10px;
}
.th {
border: none !important;
background: #383a3a !important;
color: #D7DDE0 !important;
border-bottom:1px solid #000 !important;
color: #d7dde0 !important;
border-bottom: 1px solid #000 !important;
}
table{
table {
background: #252727 !important;
color: #949494 !important;
}
tbody{
tbody {
background: #252727 !important;
color: #949494 !important;
overflow: auto;
}
.select_tr{
.select_tr {
background: #3c3529;
color: #fff;
border-bottom: 1px solid rgb(183, 157, 113);
}
.layui-select-title>input{
.layui-select-title>input {
background-color: #343434 !important;
}
.select_tr>td>input{
.select_tr>td>input {
background-color: #000000;
}
input{
input {
width: 160px !important;
height: 25px !important;
background-color: #343434;
......@@ -104,151 +119,179 @@
border: 1px solid #343434 !important;
text-indent: 0.5em;
}
.select_tr>input{
.select_tr>input {
background-color: #000 !important;
}
.layui-unselect,.layui-select-title{
.layui-unselect,
.layui-select-title {
width: 160px !important;
}
.bottomtable{
padding: 0 10px;
}
.layui-anim{
.bottomtable {
padding: 0 10px;
}
.layui-anim {
background-color: #343434 !important;
border: 1px solid #343434 !important;
color: #fff;
}
.b {
position: absolute;
z-index: 99;
width: 90px;
height: 30px;
color: #8fe4e9;
border-radius: 5px;
background-color: #0c1c38;
background: #007eaf;
background: linear-gradient(-45deg,
#2284fb 50%,
#0a0e92 60%,
#2e59d4 70%);
background-size: 600% 100%;
-webkit-animation: shine 20s infinite;
animation: shine 20s infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
border: none;
cursor: pointer;
}
@-webkit-keyframes shine {
0% {
background-position-x: 400%;
}
.b{
position: absolute;
z-index: 99;
width: 90px;
height: 30px;
color: #8FE4E9;
border-radius: 5px;
background-color: #0C1C38;
background: #007eaf;
background: linear-gradient(-45deg, #2284fb 50%, #0a0e92 60%, #2e59d4 70%);
background-size: 600% 100%;
-webkit-animation: shine 20s infinite;
animation: shine 20s infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
border: none;
cursor: pointer;
50% {
background-position-x: 0%;
}
@-webkit-keyframes shine {
0% {
background-position-x: 400%;
}
50% {
background-position-x: 0%;
}
100% {
background-position-x: -400%;
}
100% {
background-position-x: -400%;
}
@keyframes shine {
0% {
background-position-x: 400%;
}
50% {
background-position-x: 0%;
}
100% {
background-position-x: -400%;
}
}
@keyframes shine {
0% {
background-position-x: 400%;
}
.b1{
right: 10px;
top:10px;
position: absolute !important;
50% {
background-position-x: 0%;
}
.b2{
right: 120px;
top:10px;
position: absolute !important;
100% {
background-position-x: -400%;
}
.rad1{
width: 50px !important;
height: 15px !important;
position: relative;
top: 3px;
}
.b3{
/* width: 50px !important;
}
.b1 {
right: 10px;
top: 10px;
position: absolute !important;
}
.b2 {
right: 120px;
top: 10px;
position: absolute !important;
}
.rad1 {
width: 50px !important;
height: 15px !important;
position: relative;
top: 3px;
}
.b3 {
/* width: 50px !important;
height: 15px !important; */
position: absolute !important;
top: 10px;
right: 230px;
}
#canvas{
position: absolute;
z-index:999999;
top:180px;
left: 0;
/* display: none; */
}
#cover{
position: fixed;
width: 100%;
height: 100%;
top: 0;
display: none;
background-color: rgba(0,0,0,0.3);
/* opacity: 0.3; */
z-index:99999999999999999999999999999999999999999;
}
td{
padding: 9px 15px;
}
tr{
border-bottom: 1px solid #000;
}
.select_td{
border-bottom: 1px solid rgba(255,165,0,0.1);
background: rgba(255,165,0,0.1);
}
/*滚动条整体样式*/
::-webkit-scrollbar {
/*高宽分别对应横竖滚动条的尺寸*/
width: 16px;
background-color: rgba(255, 255, 255, 0.1);
}
/*滚动条里面滑块*/
::-webkit-scrollbar-thumb {
background: #465880;
}
// 上箭头
::-webkit-scrollbar-button:vertical:single-button:start {
background-image: url("~@/static/images/AllData/up.png");
background-size: 100%;
cursor: pointer;
}
// 下箭头
::-webkit-scrollbar-button:vertical:single-button:end {
background-image: url("~@/static/images/AllData/down.png");
background-size: 100%;
cursor: pointer;
}
#radio1,#radio2,.w,.w1{
display: none;
}
dd:hover{
background:rgb(183, 157, 113) !important;
}
.layui-this{
background:rgb(183, 157, 113) !important;
}
#i1{
}
position: absolute !important;
top: 10px;
right: 230px;
}
#canvas {
position: absolute;
z-index: 999999;
top: 180px;
left: 0;
/* display: none; */
}
#cover {
position: fixed;
width: 100%;
height: 100%;
top: 0;
display: none;
background-color: rgba(0, 0, 0, 0.3);
/* opacity: 0.3; */
z-index: 99999999999999999999999999999999999999999;
}
td {
padding: 9px 15px;
}
tr {
border-bottom: 1px solid #000;
}
.select_td {
border-bottom: 1px solid rgba(255, 165, 0, 0.1);
background: rgba(255, 165, 0, 0.1);
}
/*滚动条整体样式*/
::-webkit-scrollbar {
/*高宽分别对应横竖滚动条的尺寸*/
width: 16px;
background-color: rgba(255, 255, 255, 0.1);
}
/*滚动条里面滑块*/
::-webkit-scrollbar-thumb {
background: #465880;
}
/* // 上箭头 */
::-webkit-scrollbar-button:vertical:single-button:start {
background-image: url("~@/static/images/AllData/up.png");
background-size: 100%;
cursor: pointer;
}
/* // 下箭头 */
::-webkit-scrollbar-button:vertical:single-button:end {
background-image: url("~@/static/images/AllData/down.png");
background-size: 100%;
cursor: pointer;
}
#radio1,
#radio2,
.w,
.w1 {
display: none;
}
dd:hover {
background: rgb(183, 157, 113) !important;
}
.layui-this {
background: rgb(183, 157, 113) !important;
}
</style>
<body>
<!-- <input type="" name="" id="i1" value="123213213" />
<input type="" name="" id="i2" value="123213213" /> -->
......@@ -257,195 +300,233 @@
<button class="b b1" data-ripple="ripple">变量运行</button>
<button class="b b3" data-ripple="ripple">清空模型</button>
<div class="cyxPopup">
<div class="cyxPopup_head">
模型配置
</div>
<div class="Popupcontent" style="position: relative;width: 100%;height: 670px">
<div class="cyxPopup_head">模型配置</div>
<div class="Popupcontent" style="position: relative; width: 100%; height: 670px">
<div class="Popupbodyright"></div>
<div class="Popupbody">
<div style="padding-top:5px !important;color: white;padding:0 10px">模型组:<input checked="" value='rad1' name="sex1" id='radio1' class="rad1" type="radio"/><span class="w">打簧机</span><input value="rad2" name="sex1" id='radio2' class="rad1" type="radio" checked=""/><span class="w1">绕线机</span></div>
<div class="toptable">
<table class="layui-table" style="height: 300px;margin: 0;height: 30px;margin-top:10px;">
<colgroup>
<col style="width: 100px;">
<col style="width: 130px;">
<col style="width: 150px;">
<col>
</colgroup>
<thead>
<tr>
<th class="th">模型</th>
<th class="th">动画</th>
<th class="th">变量</th>
<th class="th">值</th>
</tr>
</thead>
</table>
<div style="height: 270px;overflow: auto;">
<table>
<colgroup>
<col style="width: 110px;">
<col style="width: 150px;">
<col style="width: 170px;">
<col>
</colgroup>
<tbody class="ontablebody">
</tbody>
</table>
</div>
</div>
<div class="searchlist" style="padding: 10px;height: 25px;line-height: 25px;">
<span style="float: left;color: #fff;margin-right:10px ;">变量类型</span>
<div class="variabletype" style="width: 100px;float: left;height: 25px;margin-right: 70px;">
<div class='layui-form'>
<select name="city" lay-verify="" lay-filrer="test" id='select' value="">
<option value="不限" selected>不限</option>
<option value="二进制变量">二进制变量</option>
<option value="有符号8位整型" >有符号8位整型</option>
<option value="无符号8位整型">无符号8位整型</option>
<option value="有符号16位整型" >有符号16位整型</option>
<option value="无符号16位整型">无符号16位整型</option>
<option value="有符号32位整型" >有符号32位整型</option>
<option value="无符号32位整型">无符号32位整型</option>
<option value="有符号64位整型">有符号64位整型</option>
<option value="无符号64位整型">无符号64位整型</option>
<option value="F32位浮点数IEEE754">F32位浮点数IEEE754</option>
<option value="F64位浮点数IEEE754">F64位浮点数IEEE754</option>
<option value="日期">日期</option>
<option value="时间">时间</option>
<option value="字符串">字符串</option>
</select>
</div>
</div>
<span style="color: #fff;float: left;margin-right: 10px;">变量名称</span>
<div class="variable" style="width: 100px;float: left;">
<div class='layui-form'>
<input class="searchinput" value='' placeholder="请输入变量名" style="text-indent: 0.5em;"/>
</div>
</div>
<button class="search" style="cursor: pointer;border: 1px solid #3c3529;background-color: #3c3529;width:60px;color: rgb(183, 157, 113);float: right;height: 25px;">查询</button>
</div>
<div class="bottomtable">
<table class="layui-table" style="height: 300px;margin: 0;height: 30px;margin-top:10px;">
<colgroup>
<col style="width: 300px;">
<col style="width: 300px;">
</colgroup>
<thead>
<tr>
<th class="th">变量名称</th>
<th class="th">变量类型</th>
</tr>
</thead>
</table>
<div style="height: 190px;overflow: auto;">
<table style="">
<colgroup>
<col style="width: 340px;">
<col style="width: 310px;">
</colgroup>
<tbody class="twotablebody">
</tbody>
</table>
<div style="padding-top: 5px !important; color: white; padding: 0 10px">
模型组:<input checked="" value="rad1" name="sex1" id="radio1" class="rad1" type="radio" /><span
class="w">打簧机</span><input value="rad2" name="sex1" id="radio2" class="rad1" type="radio" checked="" /><span
class="w1">绕线机</span>
</div>
</div>
<button class="cancel" style="cursor: pointer;position: absolute;bottom: 10px;border-radius: 5px;right: 130px;width:100px;height:26px;background-color: #2c2d2d;border: 1px solid rgb(86,87,87);color:#fff">取消</button>
<button class="confim" style="cursor: pointer;position: absolute;bottom: 10px;border-radius: 5px;right: 20px;width:100px;height:26px;background-color: #3c3529;color:rgb(183,157,113);border: 1px solid rgb(183,157,113);">确定</button>
<div class="toptable">
<table class="layui-table" style="height: 300px; margin: 0; height: 30px; margin-top: 10px">
<colgroup>
<col style="width: 100px" />
<col style="width: 130px" />
<col style="width: 150px" />
<col />
</colgroup>
<thead>
<tr>
<th class="th">模型</th>
<th class="th">动画</th>
<th class="th">变量</th>
<th class="th">值</th>
</tr>
</thead>
</table>
<div style="height: 270px; overflow: auto">
<table>
<colgroup>
<col style="width: 110px" />
<col style="width: 150px" />
<col style="width: 170px" />
<col />
</colgroup>
<tbody class="ontablebody"></tbody>
</table>
</div>
</div>
<div class="searchlist" style="padding: 10px; height: 25px; line-height: 25px">
<span style="float: left; color: #fff; margin-right: 10px">变量类型</span>
<div class="variabletype" style="
width: 100px;
float: left;
height: 25px;
margin-right: 70px;
">
<div class="layui-form">
<select name="city" lay-verify="" lay-filrer="test" id="select" value="">
<option value="不限" selected>不限</option>
<option value="二进制变量">二进制变量</option>
<option value="有符号8位整型">有符号8位整型</option>
<option value="无符号8位整型">无符号8位整型</option>
<option value="有符号16位整型">有符号16位整型</option>
<option value="无符号16位整型">无符号16位整型</option>
<option value="有符号32位整型">有符号32位整型</option>
<option value="无符号32位整型">无符号32位整型</option>
<option value="有符号64位整型">有符号64位整型</option>
<option value="无符号64位整型">无符号64位整型</option>
<option value="F32位浮点数IEEE754">F32位浮点数IEEE754</option>
<option value="F64位浮点数IEEE754">F64位浮点数IEEE754</option>
<option value="日期">日期</option>
<option value="时间">时间</option>
<option value="字符串">字符串</option>
</select>
</div>
</div>
<span style="color: #fff; float: left; margin-right: 10px">变量名称</span>
<div class="variable" style="width: 100px; float: left">
<div class="layui-form">
<input class="searchinput" value="" placeholder="请输入变量名" style="text-indent: 0.5em" />
</div>
</div>
<button class="search" style="
cursor: pointer;
border: 1px solid #3c3529;
background-color: #3c3529;
width: 60px;
color: rgb(183, 157, 113);
float: right;
height: 25px;
">
查询
</button>
</div>
<div class="bottomtable">
<table class="layui-table" style="height: 300px; margin: 0; height: 30px; margin-top: 10px">
<colgroup>
<col style="width: 300px" />
<col style="width: 300px" />
</colgroup>
<thead>
<tr>
<th class="th">变量名称</th>
<th class="th">变量类型</th>
</tr>
</thead>
</table>
<div style="height: 190px; overflow: auto">
<table>
<colgroup>
<col style="width: 340px" />
<col style="width: 310px" />
</colgroup>
<tbody class="twotablebody"></tbody>
</table>
</div>
</div>
<button class="cancel" style="
cursor: pointer;
position: absolute;
bottom: 10px;
border-radius: 5px;
right: 130px;
width: 100px;
height: 26px;
background-color: #2c2d2d;
border: 1px solid rgb(86, 87, 87);
color: #fff;
">
取消
</button>
<button class="confim" style="
cursor: pointer;
position: absolute;
bottom: 10px;
border-radius: 5px;
right: 20px;
width: 100px;
height: 26px;
background-color: #3c3529;
color: rgb(183, 157, 113);
border: 1px solid rgb(183, 157, 113);
">
确定
</button>
</div>
<canvas id="canvas" width="700px" height="300px">浏览器不支持canvas</canvas>
<canvas id="canvas" width="700px" height="300px" style="display: none">浏览器不支持canvas</canvas>
</div>
</div>
<div id="fileDragArea" class="fileDragArea1" style="position: absolute;z-index: 1000;" class="upload-default">拖拽文件夹导入模型</div>
<div class="container">
<!-- <div class="header" >
<div id="fileDragArea" class="fileDragArea1" style="position: absolute; z-index: 1000" class="upload-default">
拖拽文件夹导入模型
</div>
<div class="container">
<!-- <div class="header" >
<div>header 部分</div>
</div> -->
<div class="main" >
<div class="main_header" >实时生产预警和安全预警</div>
<div id="webgl-output"></div>
<!-- 左右两侧内容 -->
<div class="main">
<div class="main_header">实时生产预警和安全预警</div>
<div id="webgl-output"></div>
<!-- 左右两侧内容 -->
<div class="view-btn view-btn_left btn-active">
<div class="icon"></div>
</div>
<div class="view view_left">
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >数值显示</span>
</div>
<div class="item_wrap item_val_wrap">
<div class="item_wrap_content">
<div>
<div class="val" id="pro_eff">0</div>
<div class="name">生产效率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="per_eff">0</div>
<div class="name">合格率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="act_eff">0</div>
<div class="name">移动率</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >电机功率值</span>
</div>
<div class="item_wrap" id="act_torque"></div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >功率趋势</span>
</div>
<div class="item_wrap" id="torque"></div>
</div>
</div>
<div class="view view_left">
<div class="item">
<div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title">数值显示</span>
</div>
<div class="item_wrap item_val_wrap">
<div class="item_wrap_content">
<div>
<div class="val" id="pro_eff">0</div>
<div class="name">生产效率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="per_eff">0</div>
<div class="name">合格率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="act_eff">0</div>
<div class="name">移动率</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title">电机功率值</span>
</div>
<div class="item_wrap" id="act_torque"></div>
</div>
<div class="item">
<div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title">功率趋势</span>
</div>
<div class="item_wrap" id="torque"></div>
</div>
</div>
<div class="view-btn view-btn_right btn-active">
<div class="icon"></div>
</div>
<div class="view view_right">
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >转矩趋势</span>
</div>
<div class="item_wrap" id="right1"></div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >电机转矩值</span>
</div>
<div class="item_wrap" id="right2"></div>
</div>
<div class="item">
<div class="item_header item_alarm" >
<div class="item_title_alarm" >报警信息</div>
<div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div>
</div>
<div class="item_wrap item_alarm_wrap" id="alarm" >
<!-- 渲染报警信息 -->
<!-- <div class="list">
<div class="view view_right">
<div class="item">
<div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title">转矩趋势</span>
</div>
<div class="item_wrap" id="right1"></div>
</div>
<div class="item">
<div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title">电机转矩值</span>
</div>
<div class="item_wrap" id="right2"></div>
</div>
<div class="item">
<div class="item_header item_alarm">
<div class="item_title_alarm">报警信息</div>
<div class="item_subTitle">
当前报警数：<span class="red" id="alarmData"></span>
</div>
</div>
<div class="item_wrap item_alarm_wrap" id="alarm">
<!-- 渲染报警信息 -->
<!-- <div class="list">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div>
<div class="list list_blue">
......@@ -455,12 +536,11 @@
<div class="list list_red">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.js"></script>
......@@ -468,46 +548,48 @@
<script src="./js/layerjs/layer.js"></script>
<script src="./layui-v2.6.8/layui/layui.js"></script>
<script src="./ripple.js"></script>
<script >
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
<script>
layui.use("form", function () {
var form = layui.form;
//监听提交
form.on("submit(formDemo)", function (data) {
layer.msg(JSON.stringify(data.field));
return false;
});
});
var onetable = [{
clipAction:'',
variable:'配置变量',
value:'',
oldvalue:'',
animation:'图片数量',
name:'图片'
}]
var twotable = []
var oldvararr = []
$(".view-btn_left").click(function(){
let viewDis = $(".view_left").css('display')
$(".view_left").css('display', viewDis === 'none' ? 'flex' : 'none')
$(".view-btn_left").toggleClass('btn-active')
})
$(".view-btn_right").click(function(){
let viewDis = $(".view_right").css('display')
$(".view_right").css('display', viewDis === 'none' ? 'flex' : 'none')
$(".view-btn_right").toggleClass('btn-active')
})
</script>
var onetable = [
{
clipAction: "",
variable: "配置变量",
value: "",
oldvalue: "",
animation: "图片数量",
name: "图片",
},
];
var twotable = [];
var oldvararr = [];
$(".view-btn_left").click(function () {
let viewDis = $(".view_left").css("display");
$(".view_left").css("display", viewDis === "none" ? "flex" : "none");
$(".view-btn_left").toggleClass("btn-active");
});
$(".view-btn_right").click(function () {
let viewDis = $(".view_right").css("display");
$(".view_right").css("display", viewDis === "none" ? "flex" : "none");
$(".view-btn_right").toggleClass("btn-active");
});
</script>
<script src="./new_file.js"></script>
<script> new Ripple({
opacity : 0.6, //水波纹透明度
speed : 1, //水波纹扩散速度
bgColor : "#fff", //水波纹颜色
cursor : true //是否显示手型指针
})</script>
<script>
new Ripple({
opacity: 0.6, //水波纹透明度
speed: 1, //水波纹扩散速度
bgColor: "#fff", //水波纹颜色
cursor: true, //是否显示手型指针
});
</script>
<script src="./js/index.js"></script>
<script type="module" src="./main.js"></script>
<script type="module" src="./main.js">
</script>
</html>
\ No newline at end of file
main.js
View file @ ccc4783e
......@@ -32,6 +32,7 @@ renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene();
window.scene = scene
scene.background = new THREE.Color(0x0C1C38);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
var select = '没有选中' //判断table有没有选中变量
......@@ -47,12 +48,13 @@ const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0);
controls.update();
controls.enablePan = true;
controls.enableDamping = true;
// controls.enableDamping = true;
const dracoLoader = new DRACOLoader();
var mixerarr = []
dracoLoader.setDecoderPath('js/libs/draco/gltf/');
var variablearr = [] //选中变量的组合
var oldvariablearr = [] //变量旧值的组合
let needUpdateModel = false; // 是否需要更新模型
// 打簧机动画下标
var numarr = {
num0: 0,
......@@ -94,10 +96,7 @@ function updateEnvironment() {
scene.environment = envMap;
});
}
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) {
document.getElementById('fileDragArea').innerText = '模型载入中。。。'
}
if ($('.b1')[0].innerText == '变量运行') {
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2') || $('.b1')[0].innerText == '变量运行') {
document.getElementById('fileDragArea').innerText = '模型载入中。。。'
}
//清空模型
......@@ -113,7 +112,7 @@ $('.b3')[0].onclick = function() {
}
// 运行按钮
$('.b1')[0].onclick = function() {
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) {
if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') {
......@@ -130,13 +129,13 @@ $('.b1')[0].onclick = function() {
group3.visible = false
group2.visible = false
$('.b1')[0].innerText = '整体运行'
}
if (localStorage.getItem('moxi2')) {
group1.visible = true
}
if (localStorage.getItem('moxi1')) {
group.visible = true
if (localStorage.getItem('moxi2')) {
group1.visible = true
}
if (localStorage.getItem('moxi1')) {
group.visible = true
}
}
if (group1.visible !== true && group.visible !== true) {
document.getElementById('fileDragArea').innerText == '拖拽文件夹导入模型'
......@@ -154,7 +153,6 @@ $('.b1')[0].onclick = function() {
group.visible = false
} else {
console.log("asdsadas")
group3.visible = false
group2.visible = false
$('.b1')[0].innerText = '整体运行'
......@@ -170,24 +168,24 @@ $('.b1')[0].onclick = function() {
}
//模型配置
$('.b2')[0].onclick = function() {
needUpdateModel = true
scene1.clear()
$('.twotablebody').empty()
$.ajax({
type: "POST",
url: baseUrl + "/Base/GetSCMSTags",
dataType: "json",
contentType: "application/json",
success: function(res) {
console.log(res.data)
threetable = res.data
threetable.forEach((item) => {
let tr = `<tr TagName='${item.TagName}'><td>${item.TagName}</td><td>${item.TagType}</td></tr>`
$('.twotablebody').append(tr)
})
console.log("select", select)
$('.twotablebody tr').click(async function() {
console.log("select", select)
if (select !== '没有选中') {
if ($('#radio2').prop('checked')) {
console.log("asdasdasdsadsadasdsadsad")
twotable[select].variable = $(this).attr('TagName')
$($('.ontablebody').find('tr')[select]).find('td')[2].innerText = $(this).attr('TagName')
} else {
......@@ -201,7 +199,7 @@ $('.b2')[0].onclick = function() {
},
})
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) {
console.log("开始时零零商量商量商量商量")
if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') {
alert('请导入模型')
$('.w1').hide()
......@@ -211,6 +209,7 @@ $('.b2')[0].onclick = function() {
return
}
$('.cyxPopup')[0].style.display = 'block'
scene1.clear()
clearInterval(mxtime1)
scene1.traverse((child) => {
if (child.material) {
......@@ -248,13 +247,15 @@ $('.b2')[0].onclick = function() {
onetable[$(this).attr('index')].value = $(this).val()
})
$('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr')
// console.log($(this).children())
let that = this
initvalue = 0
$('#canvas').show()
// $('#canvas').show()
for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
}
......@@ -282,13 +283,16 @@ $('.b2')[0].onclick = function() {
onetable[$(this).attr('index')].value = $(this).val()
})
$('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr')
// console.log($(this).children())
let that = this
initvalue = 0
$('#canvas').show()
// $('#canvas').show()
for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
}
......@@ -314,13 +318,16 @@ $('.b2')[0].onclick = function() {
twotable[$(this).attr('index')].value = $(this).val()
})
$('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr')
// console.log($(this).children())
let that = this
initvalue = 0
$('#canvas').show()
// $('#canvas').show()
for (let i1 in arr1) {
await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1)
......@@ -542,6 +549,7 @@ function animate() {
})
} else {
console.log("111")
mixerarr.forEach((item) => {
item.mixer1.update(delta)
})
......@@ -573,7 +581,6 @@ function mxtime() {
contentType: "application/json",
data: JSON.stringify(variablearr),
success: function(res) {
console.log(oldvariablearr)
if (res.data.length !== 0) {
res.data.forEach((item) => {
onetable.forEach((item1) => {
......@@ -643,6 +650,9 @@ dragDrop.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault();
//取消鼠标经过样式
if($('.b1')[0].innerText === '变量运行'){
return
}
$(this).removeClass("upload_drag_hover");
//获取文件列表对象和文件相对路径
var files = e.target.files || e.dataTransfer.files;
......@@ -713,25 +723,31 @@ function animate1() {
function promise1(a, b, c, d) {
return new Promise((resolve, reject) => {
loader.load('models/gltf/打簧机/打簧机分模型/' + a + '.glb', function(gltf) {
if (a == 'a') {
scene1.traverse((child) => {
if (child.material) {
child.material.dispose();
}
if (child.geometry) {
child.geometry.dispose();
}
child = null;
});
scene1.clear()
// cancelAnimationFrame(animate1);
if(scene1.children.length !== arr.length){
if (a == 'a') {
scene1.traverse((child) => {
if (child.material) {
child.material.dispose();
}
if (child.geometry) {
child.geometry.dispose();
}
child = null;
});
scene1.clear()
// cancelAnimationFrame(animate1);
}
const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1)
}
const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1)
// const model1 = gltf.scene
// model1.scale.set(2.6, 1.3, 2.6)
// scene1.add(model1)
if (a == onetable[c].name) {
mixer1 = new THREE.AnimationMixer(model1);
mixer1 = new THREE.AnimationMixer(scene1.children[d]);
// mixer1 = new THREE.AnimationMixer(model1);
mixer1.clipAction(gltf.animations[b]).play()
animate1()
}
......@@ -739,7 +755,7 @@ function promise1(a, b, c, d) {
}, async (xhr) => {
if ((xhr.loaded / xhr.total * 100) * (d / (arr.length - 1)) > initvalue) {
initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr.length - 1))
await init(initvalue)
await init(initvalue, scene1.children.length !== arr.length)
}
})
})
......@@ -748,23 +764,25 @@ function promise1(a, b, c, d) {
function promise3(a, b, c, d) {
return new Promise((resolve, reject) => {
loader.load('models/gltf/绕线机/绕线机分模型/' + a + '.glb', function(gltf) {
if (a == 'aa') {
scene1.traverse((child) => {
if (child.material) {
child.material.dispose();
}
if (child.geometry) {
child.geometry.dispose();
}
child = null;
});
scene1.clear()
if(scene1.children.length !== arr1.length){
if (a == 'aa') {
scene1.traverse((child) => {
if (child.material) {
child.material.dispose();
}
if (child.geometry) {
child.geometry.dispose();
}
child = null;
});
scene1.clear()
}
const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1)
}
const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1)
if (a == twotable[c].name) {
mixer1 = new THREE.AnimationMixer(model1);
mixer1 = new THREE.AnimationMixer(scene1.children[d]);
mixer1.clipAction(gltf.animations[b]).play()
animate1()
}
......@@ -772,7 +790,7 @@ function promise3(a, b, c, d) {
}, async (xhr) => {
if ((xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1)) > initvalue) {
initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1))
await init(initvalue)
await init(initvalue, scene1.children.length !== arr1.length)
}
})
})
......@@ -799,7 +817,7 @@ function allpromise(a, c) {
animations
})
group2.add(model)
if (localStorage.getItem('moxi1')) {
if (localStorage.getItem('moxi1') && localStorage.getItem('b1') == '整体运行') {
group2.visible = false
} else if ($('.b1')[0].innerText == '变量运行') {
group2.visible = true
......@@ -921,7 +939,7 @@ function promise(a, c) {
})
}
group.add(model)
if (localStorage.getItem('moxi1')) {
if (localStorage.getItem('moxi1') && localStorage.getItem('b1') === '整体运行') {
group.visible = true
} else {
group.visible = false
......@@ -1008,12 +1026,15 @@ function promise2(a, c) {
twotable[$(this).attr('index')].value = $(this).val()
})
$('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr')
let that = this
initvalue = 0
$('#canvas').show()
// $('#canvas').show()
})
group1.add(model)
if (localStorage.getItem('moxi2')) {
......@@ -1052,12 +1073,15 @@ $('input[type=radio][name=sex1]').change(function() {
onetable[$(this).attr('index')].value = $(this).val()
})
$('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr')
let that = this
initvalue = 0
$('#canvas').show()
// $('#canvas').show()
for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
}
......@@ -1078,12 +1102,15 @@ $('input[type=radio][name=sex1]').change(function() {
twotable[$(this).attr('index')].value = $(this).val()
})
$('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr')
let that = this
initvalue = 0
$('#canvas').show()
// $('#canvas').show()
for (let i1 in arr1) {
await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1)
......@@ -1103,6 +1130,7 @@ renderer1.outputEncoding = THREE.sRGBEncoding;
container1.appendChild(renderer1.domElement);
const pmremGenerator1 = new THREE.PMREMGenerator(renderer1);
const scene1 = new THREE.Scene();
window.scenen1 = scene1
scene1.background = new THREE.Color(0x0C1C38);
scene1.environment = pmremGenerator1.fromScene(new RoomEnvironment(), 0.04).texture;
const camera1 = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
......@@ -1111,7 +1139,7 @@ const controls1 = new OrbitControls(camera1, renderer1.domElement);
controls1.target.set(0, 0.5, 0);
controls1.update();
controls1.enablePan = true;
controls1.enableDamping = true;
// controls1.enableDamping = true;
$('.cancel')[0].onclick = function() {
$('.cyxPopup').hide()
mxtime()
......@@ -1163,6 +1191,7 @@ $('.search')[0].onclick = function() {
})
console.log(select)
$('.twotablebody tr').click(async function() {
if (select !== '没有选中') {
if ($('#radio2').prop('checked')) {
......@@ -1223,6 +1252,7 @@ function getold() {
}
function tb(a, b) {
console.log(a, b)
a.forEach((item) => {
if (item.name == '图片' && item.variable !== '配置变量') {
variablearr.push(item.variable)
......
new_file.js
View file @ ccc4783e
//判断是否支持canvaas
function isSupportCanvas(canvas) {
return !!(canvas.getContext && canvas.getContext("2d"));
}
//判断是否支持canvaas
function isSupportCanvas(canvas) {
return !!(canvas.getContext && canvas.getContext("2d"));
}
//requestAnimationFrame会自动使用最优的帧率进行渲染
function setupRAF() {
window.lastTime = 0;
//requestAnimationFrame会自动使用最优的帧率进行渲染
function setupRAF() {
window.lastTime = 0;
//兼容各个浏览器，Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera
var vendors = ["ms", "moz", "webkit", "o"];
for(var i=0; i<vendors.length; i++) {
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[i] + "CancelAnimationFrame"] || window[vendors[i] + "CancelRequestAnimationFrame"];
//测试浏览器支持哪一张
if(window.requestAnimationFrame) {
console.log(vendors[i] + "requestAnimationFrame");
}
if(window[vendors[i] + "CancelAnimationFrame"]) {
console.log(vendors[i] + "CancelAnimationFrame");
}
if(window[vendors[i] + "CancelRequestAnimationFrame"]) {
console.log(vendors[i] + "CancelRequestAnimationFrame");
}
}
//回退机制
if(!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16-(currentTime-window.lastTime));
var callTime = currentTime + timeToCall;
var id = window.setTimeout(function() {
callback(callTime);
}, timeToCall);
window.lastTime = callTime;
return id;
};
}
//回退机制
if(!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}
}
//兼容各个浏览器，Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera
var vendors = ["ms", "moz", "webkit", "o"];
for (var i = 0; i < vendors.length; i++) {
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
window.cancelAnimationFrame =
window[vendors[i] + "CancelAnimationFrame"] ||
window[vendors[i] + "CancelRequestAnimationFrame"];
//在[min, max]中随机取一个数
function rand(min, max) {
return Math.random() * (max - min + 1) + min;
}
//测试浏览器支持哪一张
if (window.requestAnimationFrame) {
console.log(vendors[i] + "requestAnimationFrame");
}
if (window[vendors[i] + "CancelAnimationFrame"]) {
console.log(vendors[i] + "CancelAnimationFrame");
}
if (window[vendors[i] + "CancelRequestAnimationFrame"]) {
console.log(vendors[i] + "CancelRequestAnimationFrame");
}
}
//判断两碰撞盒是否相交
function isHit(x1, y1, w1, h1, x2, y2, w2, h2) {
return !( x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < h2 || y2 + h2 < h1);
}
//回退机制
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currentTime - window.lastTime));
var callTime = currentTime + timeToCall;
var id = window.setTimeout(function () {
callback(callTime);
}, timeToCall);
window.lastTime = callTime;
return id;
};
}
//判断点是否在指定区域内
function isInRect(x, y, rx, ry, rw, rh) {
return !(x < rx || x > rx + rw || y < ry || y > ry + rh);
}
//回退机制
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}
//将数限制在某个范围之内
function limit(value, min, max) {
if(value < min) {
return min;
} else if(value > max) {
return max;
}
return value;
}
//在[min, max]中随机取一个数
function rand(min, max) {
return Math.random() * (max - min + 1) + min;
}
var CanvasController = function(canvas) {
var ctx = canvas.getContext("2d");
//进度条对象
var Loader = function(data=0,max=30) {
//进度条宽度
this.width = canvas.width - 80;
//进度条高度
this.height = 20;
//进度条X坐标
this.x = (canvas.width - this.width) / 2;
//进度条Y坐标
this.y = (canvas.height - this.height) / 2;
//进度条当前值
this.value = Number(localStorage.getItem("value"))>Number(localStorage.getItem("value1"))?Number(localStorage.getItem("value")):Number(localStorage.getItem("value1"));
//进度条最大值
this.maxValue = max;
//进度条更新速度
this.speed = 1;
//加深的颜色
this.lighterColor = "#222";
//HSL(Hue:色相，Saturation:饱和度，Lightness：饱和度)
this.hue = 0;
this.hueStart = 0;
this.hueEnd = 360;
//获取当前值对应的X坐标
this.currentPosX = function() {
return this.x + this.width * this.value / 100;
}
console.log('asdsad')
//更新进度条
this.update = function(a,b,c) {
$('#canvas').show()
$('#cover').show()
this.value += this.speed;
localStorage.setItem('value1',this.value)
if(this.value >= 100){
this.value = 100
c()
$('#canvas').hide()
$('#cover').hide()
localStorage.setItem('value',0)
localStorage.setItem('value1',0)
}else if(this.value > this.maxValue) {
this.value = this.maxValue;
localStorage.setItem('value',this.maxValue)
c()
}
}
//渲染进度条
this.render = function() {
ctx.globalCompositeOperation = "source-over";
var currentWidth = this.width * this.value / 100;
this.hue = this.hueStart + (this.hueEnd - this.hueStart) * this.value / 100;
//ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x + currentWidth, this.y);
linearGradient.addColorStop(0, "hsl(" + this.hueStart + ", 100%, 40%)");
linearGradient.addColorStop(1, "hsl(" + this.hue + ", 100%, 40%)");
ctx.fillStyle = linearGradient;
ctx.fillRect(this.x, this.y, currentWidth, this.height);
ctx.fillStyle = this.lighterColor;
ctx.globalCompositeOperation = "lighter";
ctx.fillRect(this.x, this.y, currentWidth, this.height/2);
}
}
//单个粒子对象
var Particle = function(x, y, hue, minX, maxX) {
//粒子的X坐标
this.x = x;
//粒子的Y坐标
this.y = y;
//粒子的宽度
this.width = rand(1,3);
//粒子的高度
this.height = rand(1,2);
//粒子的HSL颜色的hue分量
this.hue = limit(hue + rand(-15,15), 0, 360);
//粒子在X方向上的速度
this.velocityX = rand(-1,1);
//粒子在Y方向上的速度
this.velocityY = rand(-30,-20);
//粒子在X方向上的加速度
this.accelerationX = -.5;
//粒子在Y方向上的加速度
this.accelerationY = 4;
//单位时间
this.unitTime = .2;
//更新粒子位置
this.update = function() {
this.x += (this.velocityX * this.unitTime);
this.y += (this.velocityY * this.unitTime);
this.velocityX += (this.accelerationX * this.unitTime * rand(-1,1));
this.velocityY += (this.accelerationY * this.unitTime);
}
//渲染粒子
this.render = function() {
ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)"
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
//所有粒子效果的对象
var Particles = function(minX, maxX) {
//存放生成的所有粒子对象
this.values = [];
//粒子生成速率
this.rate = 3;
//生成粒子
this.generate = function(x, y, hue) {
for(var i=0; i<this.rate; i++) {
this.values.push(new Particle(x, y, hue, minX, maxX));
}
}
//更新进度值
this.update = function() {
for(var i = this.values.length-1; i >= 0; i--) {
this.values[i].update();
if(!isInRect(this.values[i].x, this.values[i].y, 0, 0, canvas.width, canvas.height)) {
this.values.splice(i, 1);
}
}
}
//渲染进度条
this.render = function() {
for(var i =0; i<this.values.length; i++) {
this.values[i].render();
}
}
}
//清空画布
function clearCanvas() {
//默认值，表示图形将绘制在现有画布之上
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//初始化函数
this.init = function(data=0,max,resolve) {
var loader = new Loader();
console.log(loader.x)
console.log(loader.currentPosX()-3, loader.y + loader.height/2, loader.hue)
var particles = new Particles(loader.x, loader.x + loader.width);
loader.maxValue = data
var loop = function(data,max) {
requestAnimationFrame(loop, canvas);
clearCanvas();
loader.update(data,max,resolve);
loader.render();
particles.generate(loader.currentPosX()-3, loader.y + loader.height/2, loader.hue);
particles.update();
particles.render();
}
loop();
}
}
var canvas = document.getElementById("canvas");
var canvasController = new CanvasController(canvas);
localStorage.setItem("value",0)
function init(data,max) {
return new Promise((resolve, reject) => {
canvasController.init(data,max,resolve);
})
}
//判断两碰撞盒是否相交
function isHit(x1, y1, w1, h1, x2, y2, w2, h2) {
return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < h2 || y2 + h2 < h1);
}
//判断点是否在指定区域内
function isInRect(x, y, rx, ry, rw, rh) {
return !(x < rx || x > rx + rw || y < ry || y > ry + rh);
}
//将数限制在某个范围之内
function limit(value, min, max) {
if (value < min) {
return min;
} else if (value > max) {
return max;
}
return value;
}
var CanvasController = function (canvas) {
var ctx = canvas.getContext("2d");
//进度条对象
var Loader = function (data = 0, max = 30) {
//进度条宽度
this.width = canvas.width - 80;
//进度条高度
this.height = 20;
//进度条X坐标
this.x = (canvas.width - this.width) / 2;
//进度条Y坐标
this.y = (canvas.height - this.height) / 2;
//进度条当前值
this.value =
Number(localStorage.getItem("value")) >
Number(localStorage.getItem("value1"))
? Number(localStorage.getItem("value"))
: Number(localStorage.getItem("value1"));
//进度条最大值
this.maxValue = max;
//进度条更新速度
this.speed = 1;
//加深的颜色
this.lighterColor = "#222";
//HSL(Hue:色相，Saturation:饱和度，Lightness：饱和度)
this.hue = 0;
this.hueStart = 0;
this.hueEnd = 360;
\ No newline at end of file
//获取当前值对应的X坐标
this.currentPosX = function () {
return this.x + (this.width * this.value) / 100;
};
console.log("asdsad");
//更新进度条
this.update = function (a, b, c) {
$("#canvas").show();
$("#cover").show();
this.value += this.speed;
localStorage.setItem("value1", this.value);
if (this.value >= 100) {
this.value = 100;
c();
$("#canvas").hide();
$("#cover").hide();
localStorage.setItem("value", 0);
localStorage.setItem("value1", 0);
} else if (this.value > this.maxValue) {
this.value = this.maxValue;
localStorage.setItem("value", this.maxValue);
c();
}
};
//渲染进度条
this.render = function () {
ctx.globalCompositeOperation = "source-over";
var currentWidth = (this.width * this.value) / 100;
this.hue =
this.hueStart + ((this.hueEnd - this.hueStart) * this.value) / 100;
//ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
var linearGradient = ctx.createLinearGradient(
this.x,
this.y,
this.x + currentWidth,
this.y
);
linearGradient.addColorStop(0, "hsl(" + this.hueStart + ", 100%, 40%)");
linearGradient.addColorStop(1, "hsl(" + this.hue + ", 100%, 40%)");
ctx.fillStyle = linearGradient;
ctx.fillRect(this.x, this.y, currentWidth, this.height);
ctx.fillStyle = this.lighterColor;
ctx.globalCompositeOperation = "lighter";
ctx.fillRect(this.x, this.y, currentWidth, this.height / 2);
};
};
//单个粒子对象
var Particle = function (x, y, hue, minX, maxX) {
//粒子的X坐标
this.x = x;
//粒子的Y坐标
this.y = y;
//粒子的宽度
this.width = rand(1, 3);
//粒子的高度
this.height = rand(1, 2);
//粒子的HSL颜色的hue分量
this.hue = limit(hue + rand(-15, 15), 0, 360);
//粒子在X方向上的速度
this.velocityX = rand(-1, 1);
//粒子在Y方向上的速度
this.velocityY = rand(-30, -20);
//粒子在X方向上的加速度
this.accelerationX = -0.5;
//粒子在Y方向上的加速度
this.accelerationY = 4;
//单位时间
this.unitTime = 0.2;
//更新粒子位置
this.update = function () {
this.x += this.velocityX * this.unitTime;
this.y += this.velocityY * this.unitTime;
this.velocityX += this.accelerationX * this.unitTime * rand(-1, 1);
this.velocityY += this.accelerationY * this.unitTime;
};
//渲染粒子
this.render = function () {
ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(this.x, this.y, this.width, this.height);
};
};
//所有粒子效果的对象
var Particles = function (minX, maxX) {
//存放生成的所有粒子对象
this.values = [];
//粒子生成速率
this.rate = 3;
//生成粒子
this.generate = function (x, y, hue) {
for (var i = 0; i < this.rate; i++) {
this.values.push(new Particle(x, y, hue, minX, maxX));
}
};
// 更新进度值
this.update = function () {
for (var i = this.values.length - 1; i >= 0; i--) {
this.values[i].update();
if (
!isInRect(
this.values[i].x,
this.values[i].y,
0,
0,
canvas.width,
canvas.height
)
) {
this.values.splice(i, 1);
}
}
};
//渲染进度条
this.render = function () {
for (var i = 0; i < this.values.length; i++) {
this.values[i].render();
}
};
};
//清空画布
function clearCanvas() {
//默认值，表示图形将绘制在现有画布之上
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//初始化函数
this.init = function (data = 0, needLoad, max, resolve) {
console.log("----------------------------------------",data, needLoad, max)
var loader = new Loader();
console.log(loader.x);
console.log(
loader.currentPosX() - 3,
loader.y + loader.height / 2,
loader.hue
);
var particles = new Particles(loader.x, loader.x + loader.width);
loader.maxValue = data;
var loop = function (data, max) {
requestAnimationFrame(loop, canvas);
clearCanvas();
if(needLoad){
loader.update(data, max, resolve);
loader.render();
particles.generate(
loader.currentPosX() - 3,
loader.y + loader.height / 2,
loader.hue
);
particles.update();
particles.render();
}
};
loop();
};
};
var canvas = document.getElementById("canvas");
var canvasController = new CanvasController(canvas);
localStorage.setItem("value", 0);
function init(data, needLoad, max) {
return new Promise((resolve, reject) => {
canvasController.init(data, needLoad, max, resolve);
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment