EYHN / hexo-helper-live2d

Add the Sseexxyyy live2d to your hexo!
GNU General Public License v2.0
3.86k stars 470 forks source link

25bad6c以来发现的问题和改进 #28

Closed xiazeyu closed 6 years ago

xiazeyu commented 6 years ago

~~1,Unable to get property 'getDrawDataIndex' of undefined or null reference at Live2DFramework.js (274,1)~~ 与#26 有关Orz Fixed, WFT, Tested.

3,移动设备上的WebGL模糊 Fixed, brought bug7

6.opacity

2,Blinking issue.即有的时候canvas会闪烁黑色

7,头部位置问题

4,[Improves]移动设备加入重力感应

5,[Improves]每日一句

EYHN commented 6 years ago

请提供重现方法

xiazeyu commented 6 years ago

Unable to get property 'getDrawDataIndex' of undefined or null reference at Live2DFramework.js (274,1) 感觉和模型有关。 看起来是一个关于触摸的Test失败了

Chrome 闪烁无法重现 仅Edge出现闪烁

正在学习如何使用js控制css。 我觉得我目前使用的js方法直接调整canvas是不好的。

链接:http://pan.baidu.com/s/1jI6A9Ye 密码:wk8f

目前正在尝试的一个很迷的修改:

    <div id="hexo-helper-live2d">
      <canvas id="${config.id}" width="${config.width * 2}" height="${config.height * 2}" class="${config.className}"></canvas>
    </div>
    <style>
      #${config.id} {
        position: fixed;
        ${config.position}: ${config.horizontalOffset}px;
        z-index: 999;
        pointer-events: none;
        bottom: ${config.verticalOffset}px;
        opacity: ${config.opacity};
      }
    </style>
    <script src="/live2d/device.min.js"></script>
    <script type="text/javascript">
    (function(){
    if(device.mobile()){
      ${config.mobileShow ? `
      document.getElementById("${config.id}").width = ${config.mobileWidth * 2};
      document.getElementById("${config.id}").height = ${config.mobileHeight * 2};
      document.getElementById("${config.id}").style.width = ${config.mobileWidth};
      document.getElementById("${config.id}").style.height = ${config.mobileHeight};
      document.getElementById("${config.id}").style.opacity = ${config.mobileOpacity};
      document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
      document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');
      ` : ``}
    }else{
      document.getElementById("${config.id}").style.width = ${config.width};
      document.getElementById("${config.id}").style.height = ${config.height};
      document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
      document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');
    }
    })();
    </script>

https://www.bilibili.com/video/av16003412/

EYHN commented 6 years ago

为什么你不用 css 媒体查询呢 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

xiazeyu commented 6 years ago

媒体查询 不太知道怎么用Orz

  ${
    config.hiddenOnMobile ? `
      @media (max-width: 768px) {
        #hexo-helper-live2d {
          visibility: hidden;
        }
      }
    ` : ''
  }

我现在是通过device.min.js,根据设备类型判断移动设备。 我的理解是媒体查询可以根据具体的设备进行适配,所以说要修改的话貌似需要找到720p,1080p等设备的合适大小,而我现在的css什么的是直接用js修改的,直接加入css媒体查询,想先把这个版本实现了再看吧。

xiazeyu commented 6 years ago

7问题 将scaling调至大于1时,由于实际大小与显示大小不同,所以鼠标指针的跟随也会出现问题,右下角无法识别

xiazeyu commented 6 years ago

所有问题均已分散为小问题,此issue关闭