From 5482e74d0a2fdb8ded850390e99defc4aee34c1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=99=E9=9B=95=E3=81=AE=E6=96=B9=E5=9D=97?= Date: Sun, 11 Aug 2024 16:13:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=9C=8B=E6=9D=BF=E5=A8=98?= =?UTF-8?q?=E6=B3=A8=E8=A7=86=E7=84=A6=E7=82=B9=E8=AE=A1=E7=AE=97=E6=97=B6?= =?UTF-8?q?=EF=BC=8C=E9=94=99=E8=AF=AF=E5=9C=B0=E6=B2=A1=E6=9C=89=E9=99=90?= =?UTF-8?q?=E5=88=B6=E8=8C=83=E5=9B=B4=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=94=99=E8=AF=AF=E5=9C=B0=E4=B8=BA=E6=89=80?= =?UTF-8?q?=E6=9C=89=E7=94=A8=E6=88=B7=E5=8A=A0=E8=BD=BD=E7=9C=8B=E6=9D=BF?= =?UTF-8?q?=E5=A8=98l2d=E7=9A=84js=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/App.razor | 9 +-- .../Services/Core/Live2DService.cs | 16 ++--- .../wwwroot/js/live2d-core.js | 58 ++++++++++++++----- .../Components/KanbanCard.razor | 29 ++++------ .../CnGalWebSite.Shared/wwwroot/js/bundle.js | 58 ++++++++++++++----- .../wwwroot/js/bundle.min.js | 2 +- 6 files changed, 110 insertions(+), 62 deletions(-) diff --git a/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor b/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor index ff531c337b..68d964bcc0 100644 --- a/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor +++ b/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor @@ -22,7 +22,7 @@ - + @* *@ @@ -96,13 +96,6 @@ - - - - - - @* *@ - diff --git a/CnGalWebSite/CnGalWebSite.Kanban/Services/Core/Live2DService.cs b/CnGalWebSite/CnGalWebSite.Kanban/Services/Core/Live2DService.cs index 7b233cc2b7..c9e56d4533 100644 --- a/CnGalWebSite/CnGalWebSite.Kanban/Services/Core/Live2DService.cs +++ b/CnGalWebSite/CnGalWebSite.Kanban/Services/Core/Live2DService.cs @@ -53,6 +53,15 @@ public async Task InitAsync() //创建对象引用 objRef = DotNetObjectReference.Create(this); + //初始化Live2D核心 + await InitLive2DAsync(); + } + + [JSInvokable] + public async Task Live2dInitCallback() + { + + //获取模型数据 await _clothesRepository.LoadAsync(); await _expressionRepository.LoadAsync(); @@ -66,13 +75,6 @@ public async Task InitAsync() //加载UI相关设置 await _settingService.LoadAsync(); - //初始化Live2D核心 - await InitLive2DAsync(); - } - - [JSInvokable] - public async Task Live2dInitCallback() - { //设置上次的衣服 await SetClothes(_userDataService.UserData.Clothes.ClothesName); await SetShoes(_userDataService.UserData.Clothes.ShoesName); diff --git a/CnGalWebSite/CnGalWebSite.Kanban/wwwroot/js/live2d-core.js b/CnGalWebSite/CnGalWebSite.Kanban/wwwroot/js/live2d-core.js index cb3d8fc22c..149bff1be3 100644 --- a/CnGalWebSite/CnGalWebSite.Kanban/wwwroot/js/live2d-core.js +++ b/CnGalWebSite/CnGalWebSite.Kanban/wwwroot/js/live2d-core.js @@ -5,18 +5,48 @@ var canvasId = 'live2d';//画布Id var live2d_dotNetHelper; -function initKanbanLive2D(dotNetHelper, modelDir, modelIndex, resourcesPath) { - var modelDirs = modelDir.split(','); - live2d_dotNetHelper = dotNetHelper; +// 动态加载脚本 +function loadScript(url, callback) { + let script = document.createElement('script'); + if (script.readyState) { // IE + script.onreadystatechange = function () { + if (script.readyState === 'loaded' || script.readyState === 'complete') { + script.onreadystatechange = null; + callback(); + } + } + } else { // 其他浏览器 + script.onload = function () { + callback(); + } + } + script.src = url; + document.body.appendChild(script); +} - setLive2dDefine(resourcesPath, backImageName, modelDirs, canvasId, modelIndex); - initLive2d(); - initKanbanMoveAction(dotNetHelper); - initButtonGroupMoveAction(dotNetHelper); - initDialogBoxMoveAction(dotNetHelper); - listenLive2dCanvasChange(); +function initKanbanLive2D(dotNetHelper, modelDir, modelIndex, resourcesPath) { - console.log("初始化Live2D") + // 将注释节点插入到 HTML 文档中的 body 元素中 + var comment = document.createComment("看板娘live2d依赖库"); + document.body.appendChild(comment); + // 加载js + loadScript('https://app.cngal.org/live2d/js/live2dcubismcore.min.js', function () { + loadScript('https://app.cngal.org/live2d/js/bundle.js', function () { + //loadScript('http://localhost:5000/Samples/TypeScript/Demo/dist/bundle.js', function () { + // 再初始化l2d + var modelDirs = modelDir.split(','); + live2d_dotNetHelper = dotNetHelper; + + setLive2dDefine(resourcesPath, backImageName, modelDirs, canvasId, modelIndex); + initLive2d(); + initKanbanMoveAction(dotNetHelper); + initButtonGroupMoveAction(dotNetHelper); + initDialogBoxMoveAction(dotNetHelper); + listenLive2dCanvasChange(); + + console.log("初始化Live2D") + }) + }) } // 初始化完成回调 @@ -198,7 +228,7 @@ function initButtonGroupMoveAction(dotNetHelper) { //检查对话框是否被按下 if (dialogbox_mousedown) { return; - } + } //执行逻辑 deltaLeft = touch.clientX - touch.target.offsetLeft; @@ -255,7 +285,7 @@ function initButtonGroupMoveAction(dotNetHelper) { } // 移动触发事件要放在,区域控制元素上 - window.addEventListener('mousemove', mousemove_fun ) + window.addEventListener('mousemove', mousemove_fun) window.addEventListener('touchmove', mousemove_fun, { passive: false }) const mouseup_fun = function () { @@ -295,7 +325,7 @@ function initDialogBoxMoveAction(dotNetHelper) { /* * @des deltaLeft 即移动过程中不变的值 */ - + var touch; if (event.touches) { touch = event.touches[0];//多个鼠标|手指事件取第一个 @@ -369,7 +399,7 @@ function initDialogBoxMoveAction(dotNetHelper) { } // 移动触发事件要放在,区域控制元素上 - window.addEventListener('mousemove', mousemove_fun ) + window.addEventListener('mousemove', mousemove_fun) window.addEventListener('touchmove', mousemove_fun, { passive: false }) const mouseup_fun = function () { diff --git a/CnGalWebSite/CnGalWebSite.Shared/Components/KanbanCard.razor b/CnGalWebSite/CnGalWebSite.Shared/Components/KanbanCard.razor index 8517b6a37d..c2ff13fad3 100644 --- a/CnGalWebSite/CnGalWebSite.Shared/Components/KanbanCard.razor +++ b/CnGalWebSite/CnGalWebSite.Shared/Components/KanbanCard.razor @@ -38,7 +38,7 @@ [CascadingParameter] public ErrorHandler ErrorHandler { get; set; } - protected override void OnInitialized() + protected override async Task OnInitializedAsync() { _eventService.KanbanChanged -= OnKanbanChanged; _eventService.KanbanChanged += OnKanbanChanged; @@ -47,26 +47,19 @@ NavigationManager.LocationChanged += LocationChanged; LocationChanged(null, null); - } + try + { + //获取词条信息 + var mode = await _httpService.GetAsync("api/space/GetKanbanPermissions/"); + ForceHide = !mode.Permissions; - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) + isReady = true; + StateHasChanged(); + } + catch (Exception ex) { - try - { - //获取词条信息 - var mode = await _httpService.GetAsync("api/space/GetKanbanPermissions/"); - ForceHide = !mode.Permissions; - - isReady = true; - StateHasChanged(); - } - catch (Exception ex) - { - await ErrorHandler.ProcessError(ex, "获取看板娘权限失败"); - } + await ErrorHandler.ProcessError(ex, "获取看板娘权限失败"); } } diff --git a/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.js b/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.js index 87be0b4b67..88d6f3ced5 100644 --- a/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.js +++ b/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.js @@ -1008,18 +1008,48 @@ var canvasId = 'live2d';//画布Id var live2d_dotNetHelper; -function initKanbanLive2D(dotNetHelper, modelDir, modelIndex, resourcesPath) { - var modelDirs = modelDir.split(','); - live2d_dotNetHelper = dotNetHelper; +// 动态加载脚本 +function loadScript(url, callback) { + let script = document.createElement('script'); + if (script.readyState) { // IE + script.onreadystatechange = function () { + if (script.readyState === 'loaded' || script.readyState === 'complete') { + script.onreadystatechange = null; + callback(); + } + } + } else { // 其他浏览器 + script.onload = function () { + callback(); + } + } + script.src = url; + document.body.appendChild(script); +} - setLive2dDefine(resourcesPath, backImageName, modelDirs, canvasId, modelIndex); - initLive2d(); - initKanbanMoveAction(dotNetHelper); - initButtonGroupMoveAction(dotNetHelper); - initDialogBoxMoveAction(dotNetHelper); - listenLive2dCanvasChange(); +function initKanbanLive2D(dotNetHelper, modelDir, modelIndex, resourcesPath) { - console.log("初始化Live2D") + // 将注释节点插入到 HTML 文档中的 body 元素中 + var comment = document.createComment("看板娘live2d依赖库"); + document.body.appendChild(comment); + // 加载js + loadScript('https://app.cngal.org/live2d/js/live2dcubismcore.min.js', function () { + //loadScript('https://app.cngal.org/live2d/js/bundle.js', function () { + loadScript('http://localhost:5000/Samples/TypeScript/Demo/dist/bundle.js', function () { + // 再初始化l2d + var modelDirs = modelDir.split(','); + live2d_dotNetHelper = dotNetHelper; + + setLive2dDefine(resourcesPath, backImageName, modelDirs, canvasId, modelIndex); + initLive2d(); + initKanbanMoveAction(dotNetHelper); + initButtonGroupMoveAction(dotNetHelper); + initDialogBoxMoveAction(dotNetHelper); + listenLive2dCanvasChange(); + + console.log("初始化Live2D") + }) + }) } // 初始化完成回调 @@ -1201,7 +1231,7 @@ function initButtonGroupMoveAction(dotNetHelper) { //检查对话框是否被按下 if (dialogbox_mousedown) { return; - } + } //执行逻辑 deltaLeft = touch.clientX - touch.target.offsetLeft; @@ -1258,7 +1288,7 @@ function initButtonGroupMoveAction(dotNetHelper) { } // 移动触发事件要放在,区域控制元素上 - window.addEventListener('mousemove', mousemove_fun ) + window.addEventListener('mousemove', mousemove_fun) window.addEventListener('touchmove', mousemove_fun, { passive: false }) const mouseup_fun = function () { @@ -1298,7 +1328,7 @@ function initDialogBoxMoveAction(dotNetHelper) { /* * @des deltaLeft 即移动过程中不变的值 */ - + var touch; if (event.touches) { touch = event.touches[0];//多个鼠标|手指事件取第一个 @@ -1372,7 +1402,7 @@ function initDialogBoxMoveAction(dotNetHelper) { } // 移动触发事件要放在,区域控制元素上 - window.addEventListener('mousemove', mousemove_fun ) + window.addEventListener('mousemove', mousemove_fun) window.addEventListener('touchmove', mousemove_fun, { passive: false }) const mouseup_fun = function () { diff --git a/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.min.js b/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.min.js index ba28b6ce48..df7ac8e746 100644 --- a/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.min.js +++ b/CnGalWebSite/CnGalWebSite.Shared/wwwroot/js/bundle.min.js @@ -1 +1 @@ -function slotMachineTrigger(n){let t=document.querySelector("div.slot1 > ul"),i=document.querySelector("div.slot2 > ul"),r=document.querySelector("div.slot3 > ul"),u=document.querySelector("div.slot4 > ul");if(t.querySelectorAll("li").length>1){let n=Array.prototype.slice.call(t.querySelectorAll("li")).slice(0,30),f=Array.prototype.slice.call(i.querySelectorAll("li")).slice(0,30),e=Array.prototype.slice.call(r.querySelectorAll("li")).slice(0,30),o=Array.prototype.slice.call(u.querySelectorAll("li")).slice(0,30);for(let i of n)t.removeChild(i);for(let n of f)i.removeChild(n);for(let n of e)r.removeChild(n);for(let n of o)u.removeChild(n);t.classList.remove("slotAnimation");i.classList.remove("slotAnimation");r.classList.remove("slotAnimation");u.classList.remove("slotAnimation");t.style.transform="translateY(0px)";i.style.transform="translateY(0px)";r.style.transform="translateY(0px)";u.style.transform="translateY(0px)";void document.getElementById("slot1").offsetHeight;void document.getElementById("slot2").offsetHeight;void document.getElementById("slot3").offsetHeight;void document.getElementById("slot4").offsetHeight}for(let n=0;n<29;n++){let s=Math.floor(Math.random()*10),h=Math.floor(Math.random()*10),c=Math.floor(Math.random()*10),l=Math.floor(Math.random()*10),n=document.createElement("li"),f=document.createElement("li"),e=document.createElement("li"),o=document.createElement("li");n.textContent=s;f.textContent=h;e.textContent=c;o.textContent=l;t.appendChild(n);i.appendChild(f);r.appendChild(e);u.appendChild(o)}for(n=n.toString();n.length<4;)n="0"+n;let f=document.createElement("li"),e=document.createElement("li"),o=document.createElement("li"),s=document.createElement("li");f.textContent=n[0];e.textContent=n[1];o.textContent=n[2];s.textContent=n[3];t.appendChild(f);i.appendChild(e);r.appendChild(o);u.appendChild(s);t.classList.add("slotAnimation");i.classList.add("slotAnimation");r.classList.add("slotAnimation");u.classList.add("slotAnimation");let h=function(){t.style.transform="translateY(-4890px)";i.style.transform="translateY(-4890px)";r.style.transform="translateY(-4890px)";u.style.transform="translateY(-4890px)"};setTimeout(h,1e3)}function initInfiniteScroll(n){dotNetHelper=n;onscrolling=!1;window.onscroll=async function(){if(onscrolling!=!0&&dotNetHelper!=null){onscrolling=!0;var n=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),t=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,i=window.innerHeight||Math.min(document.documentElement.clientHeight,document.body.clientHeight);i+t+400>=n&&dotNetHelper!=null&&await dotNetHelper.invokeMethodAsync("LoadMore");onscrolling=!1}}}function deinitInfiniteScroll(){dotNetHelper=null;window.onscroll=null}function getElementScrollLeft(n){return document.getElementById(n).scrollLeft}function getElementScrollWidth(n){return document.getElementById(n).scrollWidth}function getBodyClientWidth(){return document.body.clientWidth}function setElementScrollLeft(n,t){document.getElementById(n).scrollLeft=t}function getOffsetSum(n){for(var t=0,i=0;n;)t+=n.offsetTop,i+=n.offsetLeft,n=n.offsetParent;return{top:t,left:i}}function getOffsetRect(n){var r=n.getBoundingClientRect(),t=document.body,i=document.documentElement,u=window.pageYOffset||i.scrollTop||t.scrollTop,f=window.pageXOffset||i.scrollLeft||t.scrollLeft,e=i.clientTop||t.clientTop,o=i.clientLeft||t.clientLeft,s=r.top+u-e,h=r.left+f-o;return{top:Math.round(s),left:Math.round(h)}}function getOffset(n){return n.getBoundingClientRect?getOffsetRect(n):getOffsetSum(n)}function getElementLeftOfLayout(n){var t=document.getElementById(n);return getOffset(t).left}function dragMoveX(n){let t=document.querySelector(n);t.onmousedown=n=>{let i={scrollLeft:t.scrollLeft,scrollTop:t.scrollTop},r={x:n.clientX,y:n.clientY};t.onmousemove=n=>{let u={x:r.x-n.clientX,y:r.y-n.clientY};t.scrollLeft=i.scrollLeft+u.x;t.scrollTop=i.scrollTop+u.y};document.onmouseup=()=>{t.onmousemove=null,document.onmouseup=null}}}function focusOnElement(n){document.getElementById(n).focus()}function openNewPage(n){window.open(n,"_blank")}function navigateTo(n){window.open(n,"_self")}function getResponseFromRecaptcha(n){return grecaptcha.getResponse(n)}function initRecaptcha(){return grecaptcha.render("robot",{sitekey:"6LedTqcbAAAAADER0LFm7wmLcdyc7BtTuD8kFa74",theme:"light",size:"normal"})}function initDebugTool(){eruda.init();console.log("成功启动调试工具")}function initMouseJs(){var n=document.createElement("script");n.setAttribute("type","text/javascript");n.setAttribute("src","js/mouse.js");document.body.appendChild(n)}function highlightAllCode(){hljs.highlightAll()}function trackEvent(n,t,i,r,u,f){umami.track(n,{type:t,objectName:i,objectId:r,userId:u,note:f})}function initVditorContext(n,t){t.Vditor.vditor.options.upload.success=(t,i)=>{n.invokeMethodAsync("HandleUploadSuccessAsync",i)};t.Vditor.vditor.options.upload.linkToImgFormat=t=>{n.invokeMethodAsync("HandleLinkToImgFormatAsync",t)}}function initUploadButton(n,t,i){jQuery(t).change(function(){for(var r,u,t=0;t