vue中使用看板娘-全是妹妹（坏笑）

置顶 Heinrich's_Law

已于 2022-10-25 10:06:16 修改

阅读量2.7k

点赞数 1

分类专栏：看板娘 vue canvas 文章标签： vue.js javascript node.js html5 css3

于 2020-03-23 09:56:25 首次发布

本文链接：https://blog.csdn.net/weixin_41464806/article/details/105041086

版权

vue 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

看板娘

1 篇文章 0 订阅

订阅专栏

vue使用看板娘，使用Live2D引入看板娘

效果（请看左下角那个小妹妹~~~）

在这里插入图片描述

示例环境：vue-cli4

**如有资源目录不同，请按照版本对应的资源目录使用**

首先需要下载看板娘的文件资源

下载地址：
链接：https://pan.baidu.com/s/121eOpQQK94Me-j4hQalwuA
提取码：6mv3

放置目录位置如下

全局引入（public => index.html => script => src => http://src => custom_code）

在这里插入图片描述

/public/index.html => <head>  </head>

  <script src="./libs/live2dw/lib/L2Dwidget.min.js"></script>

初始化看板娘的代码

 window.L2Dwidget.init({
   "model": {
     jsonPath: "./libs/live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json",
     "scale": 1
   },
   "display": {
     "position": "left",
     "width": 150,
     "height": 300,
     "hOffset": 0,
     "vOffset": -20,
     zIndex: -1
   },
   "mobile": {
     "show": true,
     "scale": 0.5
   },
   "react": {
     opacity: 0.5,
     "opacityDefault": 0.2,
     "opacityOnHover": 0.2
   }
 });

参数说明

model 模型的配置

json 文件资源路径，可以支持网络路径，此处使用的是相对路径

scale 模型缩放系数

display 模型布局

position 位置

width 宽度

height 高度

hOffset 水平偏移量

vOffset 垂直偏移量

mobile 移动端配置

show 显示/隐藏

scale 缩放比例

react 模型矩形框样式

opacity 透明度

opacityDefault 默认透明度

opacityOnHover 鼠标悬浮透明度

之前搞了一个公众号：大壮计算机科学与技术。闲置很久了，没什么用户，就是分享下日常和技术帖子，大家捧捧场。

Heinrich's_Law

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
vue中使用看板娘-全是妹妹（坏笑）

vue使用看板娘，使用Live2D引入看板娘效果（请看左下角那个小妹妹~~~）示例环境：vue-cli4**如有资源目录不同，请按照版本对应的资源目录使用**首先需要下载看板娘的文件资源下载地址：链接：https://pan.baidu.com/s/121eOpQQK94Me-j4hQalwuA提取码：6mv3放置目录位置如下全局引入（public => index....
复制链接

扫一扫