裴大头-秦可爱

裴大头-秦可爱

vue中引入看板娘,敲可爱

发表于 2021-06-10
裴大头
阅读量 898
更新于 2021-07-02

博客中右下角的板娘!

段落引用接下来在vue以组件的形式使用(只贴出重要的代码,文章末端放上demo的地址,资源都在) npm上有许多现成的依赖,但是可定制的内容少了许多,本文使用自制组件,可在waifu.js文件和waifu-tips.json文件中自定义功能

1、编写vue组件

<template>
  <div class="index">
    <div class="waifu">
      <!-- 提示框 -->
      <div class="waifu-tips"></div>
      <!-- 看板娘画布 -->
      <canvas id="live2d" class="live2d"/>
      <!-- 工具栏 -->
      <div class="waifu-tool">
        <p class="fui-home">
          <i class="el-icon-s-home"/>
        </p>
        <p class="fui-chat">
          <i class="el-icon-upload"/>
        </p>
        <p class="fui-eye">
          <i class="el-icon-share"/>
        </p>
        <p class="fui-user">
          <i class="el-icon-warning"/>
        </p>
        <p class="fui-photo">
          <i class="el-icon-camera-solid"/>
        </p>
        <p class="fui-info-circle">
          <i class="el-icon-s-comment"/>
        </p>
        <p class="fui-cross">
          <i class="el-icon-error"/>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import '@/assets/waifu-tips'
  import '@/assets/live2d'
  import '@/assets/waifu.css'
  import { initModel } from '@/assets/waifu-tips'
  export default {
    mounted () {
      live2d_settings['modelId'] = 5;                  // 默认模型 ID
      live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID
      /* 在 initModel 前添加 */
      initModel(require("@/assets/waifu-tips.json"))
    },
  }
</script>
<style  scoped>
  .waifu-tool p i {
    cursor: pointer;
  }
</style>
html

2、使用到的资源依赖

(1)配置waifu-tips.js

// 后端接口
live2d_settings['modelAPI']             = '//live2d.fghrsh.net/api/';   // 自建 API 修改这里
live2d_settings['tipsMessage']          = 'waifu-tips.json';            // 同目录下可省略路径
live2d_settings['hitokotoAPI']          = 'lwl12.com';                  // 一言 API,可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词)

// 默认模型
live2d_settings['modelId']              = 1;            // 默认模型 ID,可在 F12 控制台找到
live2d_settings['modelTexturesId']      = 53;           // 默认材质 ID,可在 F12 控制台找到

// 工具栏设置
live2d_settings['showToolMenu']         = true;         // 显示 工具栏          ,可选 true(真), false(假)
live2d_settings['canCloseLive2d']       = true;         // 显示 关闭看板娘  按钮,可选 true(真), false(假)
live2d_settings['canSwitchModel']       = true;         // 显示 模型切换    按钮,可选 true(真), false(假)
live2d_settings['canSwitchTextures']    = true;         // 显示 材质切换    按钮,可选 true(真), false(假)
live2d_settings['canSwitchHitokoto']    = true;         // 显示 一言切换    按钮,可选 true(真), false(假)
live2d_settings['canTakeScreenshot']    = true;         // 显示 看板娘截图  按钮,可选 true(真), false(假)
live2d_settings['canTurnToHomePage']    = true;         // 显示 返回首页    按钮,可选 true(真), false(假)
live2d_settings['canTurnToAboutPage']   = true;         // 显示 跳转关于页  按钮,可选 true(真), false(假)

// 模型切换模式
live2d_settings['modelStorage']         = true;         // 记录 ID (刷新后恢复),可选 true(真), false(假)
live2d_settings['modelRandMode']        = 'switch';     // 模型切换,可选 'rand'(随机), 'switch'(顺序)
live2d_settings['modelTexturesRandMode']= 'rand';       // 材质切换,可选 'rand'(随机), 'switch'(顺序)

// 提示消息选项
live2d_settings['showHitokoto']         = true;         // 显示一言
live2d_settings['showF12Status']        = true;         // 显示加载状态
live2d_settings['showF12Message']       = false;        // 显示看板娘消息
live2d_settings['showF12OpenMsg']       = true;         // 显示控制台打开提示
live2d_settings['showCopyMessage']      = true;         // 显示 复制内容 提示
live2d_settings['showWelcomeMessage']   = true;         // 显示进入面页欢迎词

//看板娘样式设置
live2d_settings['waifuSize']            = '280x250';    // 看板娘大小,例如 '280x250', '600x535'
live2d_settings['waifuTipsSize']        = '250x70';     // 提示框大小,例如 '250x70', '570x150'
live2d_settings['waifuFontSize']        = '12px';       // 提示框字体,例如 '12px', '30px'
live2d_settings['waifuToolFont']        = '14px';       // 工具栏字体,例如 '14px', '36px'
live2d_settings['waifuToolLine']        = '20px';       // 工具栏行高,例如 '20px', '36px'
live2d_settings['waifuToolTop']         = '0px'         // 工具栏顶部边距,例如 '0px', '-60px'
live2d_settings['waifuMinWidth']        = '768px';      // 面页小于 指定宽度 隐藏看板娘,例如 'disable'(禁用), '768px'
live2d_settings['waifuEdgeSide']        = 'left:0';     // 看板娘贴边方向,例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
live2d_settings['waifuDraggable']       = 'disable';    // 拖拽样式,例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
live2d_settings['waifuDraggableRevert'] = true;         // 松开鼠标还原拖拽位置,可选 true(真), false(假)

// 其他杂项设置
live2d_settings['l2dVersion']           = '1.4.2';        // 当前版本
live2d_settings['l2dVerDate']           = '2018.11.12'; // 版本更新日期
live2d_settings['homePageUrl']          = 'auto';       // 主页地址,可选 'auto'(自动), '{URL 网址}'
live2d_settings['aboutPageUrl']         = 'https://pnkx.top/article?articleId=3464';   // 关于页地址, '{URL 网址}'
live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名,例如 'live2d.png'
js

(2)live2d依赖live2d.js (3)样式waifu.css (4)配置对话内容waifu-tips.json(常用的都在里面了)

3、在需要的页面引入即可

<template>
  <div id="app">
    <live2d/>
  </div>
</template>
<script>
  import Live2d from '@/components/Live2d/index'
  export default {
    components: {
      Live2d
    },
  }
</script>
<style lang="less">

</style>
js

看一下效果

image.png

demo放在了码云上,地址是=>https://gitee.com/phyqxx/live2d 欢迎大家留言讨论

评论
来发一针见血的评论吧!
表情
  • 小徐

    2022-03-23 14:53

    博主请问一下,这个可以自己换人物图片吗,需要替换什么吗?

    0
    回复
    • 裴大头

      男博主

      2022-03-24 14:54

      @小徐

      应该不大好换,我没去研究🤣

      0
      回复
    • 共1条回复,点击查看
  • 茂茂

    2021-06-12 07:54

    这个好!

    0
    回复
      共0条回复,点击查看
  • 裴大头

    男博主

    2021-06-11 11:01

    可以在waifu-tips.json里配置对话内容

    "mouseover": [
      { "selector": "css类名", "text": ["板娘要说的话"] },
    ]

    0
    回复
      共0条回复,点击查看
推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23359

© 2023 Pei你看雪鲁ICP备19037910号-2