Merge pull request #803 from LittleFish-233/master

修复看板娘注视焦点计算时，错误地没有限制范围的问题。修复错误地为所有用户加载看板娘l2d的js的问题
CnGal · Aug 11, 2024 · df9b125 · df9b125
2 parents 215aed5 + 5482e74
commit df9b125
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 62 deletions.
diff --git a/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor b/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor
@@ -22,7 +22,7 @@
     <!--开放搜索-->
     <link rel="search" type="application/opensearchdescription+xml" target="_blank" class="external-link" href="https://app.cngal.org/_content/CnGalWebSite.Shared/OpenSearch.xml" title="CnGal资料站" />
 
-    <!--组件库-->  
+    <!--组件库-->
     @* <link rel="stylesheet" href="_content/Masa.Blazor/css/masa-blazor.min.css" /> *@
     <link rel="stylesheet" href="https://app.cngal.org/_content/Masa.Blazor/css/masa-blazor.min.css" />
 
@@ -96,13 +96,6 @@
     <!--图表-->
     <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.1.1/echarts.min.js"></script>
 
-    <!--Live2D-->
-    <script src="https://app.cngal.org/live2d/js/live2dcubismcore.js"></script>
-    <script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></script>
-
-    <script src="https://app.cngal.org/live2d/js/bundle.js"></script>
-    @* <script src="http://localhost:5000/Samples/TypeScript/Demo/dist/bundle.js"></script> *@
-
     <!--埋点数据采集-->
     <script async src="https://umami.cngal.top/script.js" data-website-id="c190d5e2-f859-430c-8463-be388f6875b0"></script>
 

diff --git 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
@@ -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
@@ -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<KanbanPermissionsModel>("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<KanbanPermissionsModel>("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
@@ -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