vuepress看板娘小埋

Sun Apr 26 2020

# 看板娘

纸片人是第一生产力！二刺猿的博客怎么能没有看板娘呢？

An image

2020.4.25

试了三四个别人实现的，都有些问题。当前使用的是live2d-vue，发现了以下问题

小埋模型(由此repo(fguby/live2d)获取)下鼠标事件有一些问题，应该和动画加载引擎有关，暂时把所有动画都归做idle动画随机自动播放了（看在小埋这么可爱的份上就暂时忍受一下她的精神分裂自言自语吧）
4.25日发现只要放动画就可能导致网页崩溃卡死，忍痛去掉所有动画配置，现在变成了只会东张西望的小埋了（哭腔）。
在非主页刷新后会消失，不知道如何修改
令人窒息的事情发生了...dev的时候可以正常构建，build的时候报错navigator not defined，然后构建失败。经过了解似乎在其他vue project里也出现过？猜测是组件注册的生命周期相关问题，即编译时live2d.min.js import时页面dom还没生成？不太了解vue编译过程，折腾一番后放弃

2020.4.26

兜兜转转又回到了(fguby/live2d)。一开始不想用这个包的实现是因为此repo是纯js,vue中是不能通过<script>引入外置js的，正常操作的话要直接在vue中引入需要对每个函数、类、变量都添加export头，一共8000多行的js代码根本不可行。

现在走投无路了，就研究起了妖路子，想在页面加载完后通过dom操作直接创建一个<script>，试了试居然可行。此外，此repo的实现需要在body.onload后（也就是vue的mounted中）手动调用InitLive2D()，由于script是dom操作加入的，直接在vue中调用该函数编译会报错没有定义InitLive2D()。就在这时我灵机一动，如果动态绑定一个callback func然后再写一个wrapper函数包裹InitLive2D()编译时会不会因为传给callback的是函数指针而不检查函数体的内容呢？试了一下竟然可以...emmmmm...这算是一个编译漏洞？于是，最后的vue实现如下(把配置直接复制到了live2d.min.js开头了)：

<template>
    <div class="l2d-block">
        <audio id="my_audio"></audio>
        <canvas id="mycanvas" ref="mycanvas" width="300" height="500"></canvas>
    </div>
</template>

<script>
export default {
  mounted(){
    var element = document.createElement("script");
    element.src = "/live2d.min.js";
    document.body.appendChild(element);
    setTimeout(() => {
      this.init();
    }, 500);
  },
  updated(){
    
  },
  methods:{
    init(){
      InitLive2D();
    }
  }
}
</script>

此外，使用过程踩了两个坑
- 必须有<audio>才能正常播放motion，不管IS_PLAY_AUDIO为何值都要。
- 使用json配置中的xy模型偏移来使模型位移。一开始我不知道，读了读源代码发现鼠标事件和canvas绑定，移出canvas范围后就没响应了，于是我自己写了个辅助函数把mouseEvent绑到document上然后把canvas外的坐标映射到canvas边缘...写完以后调试motion的时候认真读了读文档才意识到这不是正确的操作方式...
写这篇博客的过程中发现读取的motion不会缓存而是一直重复读，并且可能存在一些读取的bug?于是页面运行时间稍旧就会out of memory崩溃（但debug时发现有时候cache只有几十k的时候也崩溃了，所以应该不是不缓存的问题而是读取过程有问题）。于是在配置里又把所有motion都填空了...emmm......（小埋：我真的太难了）
发现非首页刷新消失的问题发现是配置文件中server本应返回json却返回了html加入了html注释标签导致model.json文件读取失败....把model.json直接贴进源代码里后又报错dump exception、stack undefined、load image failed，猜测是因为在非主页下path\to\file访问资源是基于当前页面路径而非根路径所以找不到。猛然意识到前面的motion加载导致的崩溃也是一样的原因，在modelPath中使用\path\to\folder\解决。至此，小埋终于完整了！
最终版的源代码参考文尾本博客的源代码中/public/live2d.min.js