vue-live2d 看板

在 vue 项目中直接引用此包，即可应用。支持 vue2 和 vue3。

一、效果浏览

1. 在线浏览

配置项	含义
个人部署	https://vue-live2d.demo.evgo2017.com/
Github 部署	https://evgo2017.github.io/vue-live2d/page/index.html

2. 本地浏览

git clone https://github.com/evgo2017/vue-live2d.git
cd ./vue-live2d
npm install
npm run serve

二、项目引入

npm install vue-live2d

// 在组件中引入
import vueLive2d from 'vue-live2d' // 在组件中的使用方式，可参考项目中 `example/App.vue` 文件

二、配置参数

1. 参数说明

配置项	含义	类型	默认
apiPath	更换模型的请求地址	String	./live2d-static-api/indexes
size	模型宽度和高度	Number	255
width	模型宽度	Number	0
height	模型高度	Number	0
model	默认显示的模型，[模型号，服装号]	Array	['Potion-Maker/Pio', 'school-2017-costume-yello']
direction	模型方位（left 或者 right）	String	left（其他字符串均表示 right）
tipPosition	提示框位置（top 或者 bottom）	String	top
tips	在触发某些事件时模型说出的话	Object	格式查看 /src/src/tips.js
homePage	可打开某页面的地址	String	https://github.com/evgo2017/vue-live2d
customId	自定义 id	String	vue-live2d-main

2. 部分具体说明

apiPath

加载模型时是通过请求此 API 地址获得数据。

① live2d-static-api：我写的 live2d 静态 API，原理和部署 vue 项目相同。欢迎使用和 star。

将文件在 public 下就可以使用了。

也可部署在其它位置，如 https://xxx.com/api/live2d-static-api/indexes。

② fghrsh/live2d_api：动态 API。

width height size

这三个参数放在一起说，它们都是用来调整模型宽高的。width 只调整宽度，height 只调整高度，size 同时调整宽高为同一值。

优先级：width = height > size。可以说 width 和 height 参数会覆盖 size 参数设置的对应值。

设置 size 是为了减少重新加载模型的次数。

model

默认显示的模型，为数组，第一个值代表具体模型编码，第二个值代表该模型的皮肤号。

插件每次切换模型或者换装时候，都会在控制台 console 这此信息，可通过此方便获得自己喜欢的模型信息。

direction

模型方位，仅支持左（left）或者右（right）。

当为 left 时，工具栏会置于左侧，同时鼠标经过模型时，模型会整体向右移动。right 反之。

tipPosition

提示框位置，仅支持上（top）或者下（bottom）。

当为 top 时，提示框会显示在模型区域上方。当为 right 时，提示框会显示在模型区域下方。

tips

在页面上触发某些事件时，模型会说出的话。

注意：此参数只可初始化一次，若使用插件定义的默认值则不要绑定此参数。

customId

插件中只有显示模型的 canvas 必须有 id ，可自定义其 id 值。

此参数是我在尝试一个页面上加载多个模型时增加，可以成功，但通常最初只会显示一个模样，需要手动触发其他模型，同时原本显示的模型成为静态，触发的其他模型变为动态。

比如页面有一个 A 模型，和一个 B 模型。A 正确显示，但 B 只有工具栏等内容。此时手动点击 B 模型的切换模型或者换装，B 模型正确显示，同时 A 模型成为静态，不再随着鼠标移动而动。再次点击 A 模型重复操作同理。

这部分切换应该是与核心库有关，综合考虑不继续完善此功能。

三、核心库

核心库 live2d.min.js 的文件内容，是 Live2D 官网发布的 Live2D_SDK_WEBGL_2.1 SDK 中的live2d.min.js + Live2DFramework.js + sampleApp1 ，以及该库作者代码。库已梳理明白，但库作者未知。

在梳理核心库代码的过程中，我整理了一份从 Framework 到 App 的代码，加载来看没有什么大问题，但剩余工作量仍然较大。

从库代码层次来看：core -> framework -> app -> vue-live2d（看板娘）。vue-live2d 目前属于定制内容。

四、参考资料

[1] https://github.com/fghrsh/live2d_demo

[2] https://github.com/stevenjoezhang/live2d-widget

[3] https://github.com/fghrsh/live2d_api