添加看板娘菜单功能列表-切换看板娘功能

2024-11-24 21:40:32 +08:00 · 2020-09-07 13:42:39 +08:00 · 2020-09-07 13:42:39 +08:00 · 19829d9664
commit 19829d9664
parent ebd33baf33
20 changed files with 610 additions and 132 deletions
--- a/README.md
+++ b/README.md
@ -167,11 +167,16 @@ api 文档 （待完善，如有需要功能欢迎提[issue](https://github.com/
 | right | position：relative的right值 | String | '0' |
 | bottom | position：relative的bottom值 | String | '0' |
 | left | position：relative的left值 | String | '' |
-| ModelList | 模型列表，暂时只展示数组的第一个模型 | Array<String> | ['Hiyori'] |
+| ModelList | 模型列表 | Array<String> | ['Hiyori'] |
 | TouchBody | 点击身体时聊天框随机出现数组的值 | Array<String> | ['啊呀，你的手在摸哪里嘛~','哼，坏人'] |
 | TouchHead | 点击头部时聊天框随机出现数组的值,该值当模型未存入头部事件时无效 | Array<String> | ['讨厌,不要掐人家的脸嘛~','希望明天也能感受到你的触摸呢'] |
 | color | 聊天框背景颜色 | String | '#C8E6FE' |
 | PathFull | 当SSR框架时，必须传入此参数，用以额外指定绝对路径资源域名地址 | String | '' |
 | MobileShow | 是否在移动设备展示看板娘 | Boolean | false |
+| menuList | 启用的功能菜单列表，该值传空数组时不启用菜单，可用参数为：Mtab | Array<String> | ['Mtab'] |


+当menuList 传入非空数组时，其中的字段：
+| 成员 | 说明 | 类型 | 默认值 |
+| :-----: | ----- | ----- | ----- |
+| Mtab | 切换看板娘 | String | 'Mtab' |
--- a/Samples/TypeScript/Demo/dist/asset/index.css
+++ b/Samples/TypeScript/Demo/dist/asset/index.css
@ -0,0 +1,19 @@
+@font-face {
+    font-family: 'iconfont';  /* project id 1168737 */
+    src: url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.eot');
+    src: url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.woff2') format('woff2'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.woff') format('woff'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.svg#iconfont') format('svg');
+  }
+
+.iconfont{
+    font-family:"iconfont" !important;
+    font-size:16px;font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+    cursor: pointer;
+}
+
--- a/Samples/TypeScript/Demo/dist/bundle.js
+++ b/Samples/TypeScript/Demo/dist/bundle.js
--- a/Samples/TypeScript/Demo/dist/hot/hot-update.js
+++ b/Samples/TypeScript/Demo/dist/hot/hot-update.js
--- a/Samples/TypeScript/Demo/dist/hot/hot-update.json
+++ b/Samples/TypeScript/Demo/dist/hot/hot-update.json
@ -1 +1 @@
-{"h":"e7cc7f56771eba38d3dc","c":{"main":true}}
+{"h":"7b6379058224ff9c4ab0","c":{"main":true}}
--- a/Samples/TypeScript/Demo/dist/index.js
+++ b/Samples/TypeScript/Demo/dist/index.js
@ -9,14 +9,30 @@ exports["default"] = void 0;

 var _lappdelegate = require("./lappdelegate");

+var _lapplive2dmanager = require("./lapplive2dmanager");
+
 var LAppDefine = _interopRequireWildcard(require("./lappdefine"));

 var _react = _interopRequireWildcard(require("react"));

+require("./asset/index.css");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

 function ReactLive2d(props) {
@ -53,7 +69,74 @@ function ReactLive2d(props) {
    border: '1px dashed #ccc',
    padding: '5px',
    background: props.color ? props.color : '#C8E6FE'
-  }, "display", 'none');
+  }, "display", 'none'); // 面板主题样式
+
+
+  var Theme = {
+    color: props.color ? props.color : '#C8E6FE',
+    width: '30px',
+    height: '30px'
+  };
+  var timer = null;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      controllerOn = _useState2[0],
+      setControllerOn = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      controllerIn = _useState4[0],
+      setControllerIn = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      printMenu = _useState6[0],
+      setPrintMenu = _useState6[1]; // 进入显示控制台
+
+
+  function cvMouseOver() {
+    setControllerOn(true);
+  }
+
+  function cvMouseOut() {
+    timer = setTimeout(function () {
+      // 0.01秒内没有进入点击面板，说明已经鼠标离开
+      if (!controllerIn) {
+        setControllerOn(false);
+        setControllerIn(false);
+      }
+    }, 10);
+  } // 进入选择菜单
+
+
+  function ctMouseOver() {
+    setControllerIn(true);
+    clearTimeout(timer);
+  } // 离开选择菜单
+
+
+  function ctMouseOut() {
+    setControllerIn(false);
+  } //切换
+
+
+  function ctTab() {
+    _lapplive2dmanager.LAppLive2DManager.getInstance().nextScene();
+  } // 悬停菜单时的对白
+
+
+  function talkPrint(print) {
+    var printNow = document.getElementById('live2d-print');
+    printNow.innerHTML = print;
+    printNow.style.display = 'block';
+  }
+
+  function cancelPrint() {
+    var printNow = document.getElementById('live2d-print');
+    printNow.innerHTML = '';
+    printNow.style.display = 'none';
+  }

  (0, _react.useEffect)(function () {
    console.log('props', props);
@ -87,8 +170,27 @@ function ReactLive2d(props) {
    style: canvasStyle,
    width: props.width ? props.width : '300',
    height: props.height ? props.height : '500',
-    className: "live2d"
-  })));
+    className: "live2d",
+    onMouseEnter: cvMouseOver,
+    onMouseLeave: cvMouseOut
+  }), controllerOn && (!props.menuList || props.menuList.length > 0) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "live2d-controller",
+    style: {
+      position: 'absolute',
+      top: '20px',
+      left: '20px'
+    },
+    onMouseEnter: ctMouseOver,
+    onMouseLeave: ctMouseOut
+  }, (!props.menuList || props.menuList.indexOf('Mtab') > -1) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "iconfont",
+    style: Theme,
+    onClick: ctTab,
+    onMouseEnter: function onMouseEnter() {
+      return talkPrint('你想要换一个看板娘吗？');
+    },
+    onMouseLeave: cancelPrint
+  }, "\uE7CA"))));
 }

 var _default = ReactLive2d;
--- a/Samples/TypeScript/Demo/dist/lappdefine.ts
+++ b/Samples/TypeScript/Demo/dist/lappdefine.ts
@ -30,7 +30,7 @@ export let ResourcesPath = './Resources/';
 // モデルの後ろにある背景の画像ファイル
 export const BackImageName = 'back_class_normal.png';

-// 歯車
+// 切换
 export const GearImageName = 'icon_gear.png';

 // 終了ボタン
@ -41,7 +41,6 @@ export const PowerImageName = 'CloseNormal.png';
 // ディレクトリ名とmodel3.jsonの名前を一致させておくこと
 // export const ModelDir: string[] = ['Haru', 'Hiyori', 'Mark', 'Natori', 'Rice'];
 export let ModelDir: string[] = ['Hiyori', 'Haru', 'Rice'];
-export const ModelDirSize: number = ModelDir.length;

 // 外部定義ファイル（json）と合わせる
 export const MotionGroupIdle = 'Idle'; // アイドリング
--- a/Samples/TypeScript/Demo/dist/lapplive2dmanager.ts
+++ b/Samples/TypeScript/Demo/dist/lapplive2dmanager.ts
@ -178,7 +178,7 @@ export class LAppLive2DManager {
   * サンプルアプリケーションではモデルセットの切り替えを行う。
   */
  public nextScene(): void {
-    const no: number = (this._sceneIndex + 1) % LAppDefine.ModelDirSize;
+    const no: number = (this._sceneIndex + 1) % LAppDefine.ModelDir.length;
    this.changeScene(no);
  }

@ -198,7 +198,6 @@ export class LAppLive2DManager {
    // model3.jsonのパスを決定する。
    // ディレクトリ名とmodel3.jsonの名前を一致させておくこと。

-    // SSR服务端渲染的时候，无法正确读取资源。考虑把一个基础模型录入npm包
    const model: string = LAppDefine.ModelDir[index];
    const modelPath: string = LAppDefine.ResourcesPath + model + '/';
    let modelJsonName: string = LAppDefine.ModelDir[index];
--- a/Samples/TypeScript/Demo/dist/lapptexturemanager.ts
+++ b/Samples/TypeScript/Demo/dist/lapptexturemanager.ts
@ -37,11 +37,11 @@ export class LAppTextureManager {
  }

  /**
-   * 画像読み込み
+   * 图像读取
   *
-   * @param fileName 読み込む画像ファイルパス名
-   * @param usePremultiply Premult処理を有効にするか
-   * @return 画像情報、読み込み失敗時はnullを返す
+   * @param fileName 读取的图像文件路径名称
+   * @param usePremultiply 是否启用Premiult处理
+   * @return 图像信息读取失败时返回null
   */
  public createTextureFromPngFile(
    fileName: string,
@ -58,8 +58,8 @@ export class LAppTextureManager {
        ite.ptr().fileName == fileName &&
        ite.ptr().usePremultply == usePremultiply
      ) {
-        // 2回目以降はキャッシュが使用される(待ち時間なし)
-        // WebKitでは同じImageのonloadを再度呼ぶには再インスタンスが必要
+        // 第二次以后使用缓存（无等待时间）
+        // 在WebKit中，要再次调用相同Image的onload，需要再次实例
        // 詳細：https://stackoverflow.com/a/5024181
        ite.ptr().img = new Image();
        ite.ptr().img.onload = (): void => callback(ite.ptr());
--- a/Samples/TypeScript/Demo/example/src/App.js
+++ b/Samples/TypeScript/Demo/example/src/App.js
@ -11,7 +11,7 @@ import ReactLive2d from '../../src/index.js';
                height={500}
                bottom={'10px'}
                right={'10px'}
-                ModelList={['Hiyori']}
+                ModelList={['Haru','Hiyori']}
                TouchBody={['啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊你要干嘛','哼','坏人']}
             />
        </div>
--- a/Samples/TypeScript/Demo/package-lock.json
+++ b/Samples/TypeScript/Demo/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "react-live2d",
-  "version": "1.0.11",
+  "version": "1.0.18",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -3154,6 +3154,113 @@
        "randomfill": "^1.0.3"
      }
    },
+    "css-loader": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.2.tgz",
+      "integrity": "sha512-omVGsTkZPVwVRpckeUnLshPp12KsmMSLqYxs12+RzM9jRR5Y+Idn/tBffjXRvOE+qW7if24cuceFJqYR5FmGBg==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^6.0.0",
+        "cssesc": "^3.0.0",
+        "icss-utils": "^4.1.1",
+        "loader-utils": "^2.0.0",
+        "postcss": "^7.0.32",
+        "postcss-modules-extract-imports": "^2.0.0",
+        "postcss-modules-local-by-default": "^3.0.3",
+        "postcss-modules-scope": "^2.2.0",
+        "postcss-modules-values": "^3.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "schema-utils": "^2.7.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "@types/json-schema": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+          "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
+          "dev": true
+        },
+        "ajv": {
+          "version": "6.12.4",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
+          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true
+        },
+        "camelcase": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
+          "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        }
+      }
+    },
    "css-select": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@ -3172,6 +3279,12 @@
      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
      "dev": true
    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
    "csstype": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
@ -5594,6 +5707,15 @@
        "safer-buffer": ">= 2.1.2 < 3"
      }
    },
+    "icss-utils": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
+      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
    "ieee754": {
      "version": "1.1.13",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@ -5646,6 +5768,12 @@
      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
      "dev": true
    },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
    "infer-owner": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@ -7090,6 +7218,92 @@
      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
      "dev": true
    },
+    "postcss": {
+      "version": "7.0.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
+      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
+      "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^4.1.1",
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
+      "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^6.0.0"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
+      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^4.0.0",
+        "postcss": "^7.0.6"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
    "prelude-ls": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@ -8523,6 +8737,91 @@
      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
      "dev": true
    },
+    "style-loader": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.2.1.tgz",
+      "integrity": "sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.6"
+      },
+      "dependencies": {
+        "@types/json-schema": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+          "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
+          "dev": true
+        },
+        "ajv": {
+          "version": "6.12.4",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
+          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -8867,6 +9166,12 @@
        "set-value": "^2.0.1"
      }
    },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
    "unique-filename": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
--- a/Samples/TypeScript/Demo/package.json
+++ b/Samples/TypeScript/Demo/package.json
@ -13,7 +13,7 @@
  },
  "main": "dist/bundle.js",
  "name": "react-live2d",
-  "version": "1.0.18",
+  "version": "1.0.19",
  "description": "live2D 看板娘",
  "author": {
    "name": "DS",
@ -39,6 +39,7 @@
    "@typescript-eslint/eslint-plugin": "^2.18.0",
    "@typescript-eslint/parser": "^2.18.0",
    "babel-loader": "^8.1.0",
+    "css-loader": "^4.2.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-prettier": "^3.1.2",
@ -48,6 +49,7 @@
    "react-dom": "^16.13.1",
    "rimraf": "^3.0.1",
    "serve": "^11.3.0",
+    "style-loader": "^1.2.1",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "url-loader": "^4.1.0",
--- a/Samples/TypeScript/Demo/src/asset/index.css
+++ b/Samples/TypeScript/Demo/src/asset/index.css
@ -0,0 +1,19 @@
+@font-face {
+    font-family: 'iconfont';  /* project id 1168737 */
+    src: url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.eot');
+    src: url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.woff2') format('woff2'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.woff') format('woff'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_1168737_j6ahlsx1dk.svg#iconfont') format('svg');
+  }
+
+.iconfont{
+    font-family:"iconfont" !important;
+    font-size:16px;font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+    cursor: pointer;
+}
+
--- a/Samples/TypeScript/Demo/src/index.js
+++ b/Samples/TypeScript/Demo/src/index.js
@ -1,8 +1,11 @@
 import { LAppDelegate } from './lappdelegate';
+import { LAppLive2DManager } from './lapplive2dmanager';
 import * as LAppDefine from './lappdefine';
 import React, { useState, useEffect } from 'react';
+import './asset/index.css'

 function ReactLive2d(props) {
+
    // 好看颜色列表
    // green: '#B4DEAE',
    // DeepBlue: '#5B8DBE',
@ -40,6 +43,65 @@ function ReactLive2d(props) {
        display: 'none',
    }

+    // 面板主题样式
+    let Theme = {
+        color: props.color ? props.color : '#C8E6FE',
+        width: '30px',
+        height: '30px',
+    }
+
+    let timer = null;
+
+    const [controllerOn, setControllerOn] = useState(false)
+
+    const [controllerIn, setControllerIn] = useState(false)
+
+    const [printMenu, setPrintMenu] = useState(false)
+
+    // 进入显示控制台
+    function cvMouseOver() {
+        setControllerOn(true)
+    }
+
+    function cvMouseOut() {
+        timer = setTimeout(() => {
+            // 0.01秒内没有进入点击面板，说明已经鼠标离开
+            if (!controllerIn) {
+                setControllerOn(false)
+                setControllerIn(false)
+            }
+        }, 10);
+    }
+
+    // 进入选择菜单
+    function ctMouseOver() {
+        setControllerIn(true)
+        clearTimeout(timer)
+    }
+
+    // 离开选择菜单
+    function ctMouseOut() {
+        setControllerIn(false)
+    }
+
+    //切换
+    function ctTab() {
+        LAppLive2DManager.getInstance().nextScene();
+    }
+
+    // 悬停菜单时的对白
+    function talkPrint(print) {
+        let printNow = document.getElementById('live2d-print');
+        printNow.innerHTML = print;
+        printNow.style.display = 'block';
+    }
+
+    function cancelPrint() {
+        let printNow = document.getElementById('live2d-print');
+        printNow.innerHTML = '';
+        printNow.style.display = 'none';
+    }
+
    useEffect(() => {
        console.log('props', props)

@ -78,7 +140,33 @@ function ReactLive2d(props) {
                    width={props.width ? props.width : '300'}
                    height={props.height ? props.height : '500'}
                    className="live2d"
-                ></canvas>
+                    onMouseEnter={cvMouseOver}
+                    onMouseLeave={cvMouseOut}
+                >
+
+                </canvas>
+                {controllerOn && (!props.menuList || props.menuList.length>0) &&
+                    <div
+                        className="live2d-controller"
+                        style={{
+                            position: 'absolute',
+                            top: '20px',
+                            left: '20px',
+                        }}
+                        onMouseEnter={ctMouseOver}
+                        onMouseLeave={ctMouseOut}
+                    >
+                        {(!props.menuList || props.menuList.indexOf('Mtab')>-1) &&
+                            <div
+                                className="iconfont"
+                                style={Theme}
+                                onClick={ctTab}
+                                onMouseEnter={()=>talkPrint('你想要换一个看板娘吗？')}
+                                onMouseLeave={cancelPrint}
+                            >&#xe7ca;</div>
+                        }
+                    </div>
+                }
            </div>
        </div>
    )
--- a/Samples/TypeScript/Demo/src/lappdefine.ts
+++ b/Samples/TypeScript/Demo/src/lappdefine.ts
@ -30,7 +30,7 @@ export let ResourcesPath = './Resources/';
 // モデルの後ろにある背景の画像ファイル
 export const BackImageName = 'back_class_normal.png';

-// 歯車
+// 切换
 export const GearImageName = 'icon_gear.png';

 // 終了ボタン
@ -41,7 +41,6 @@ export const PowerImageName = 'CloseNormal.png';
 // ディレクトリ名とmodel3.jsonの名前を一致させておくこと
 // export const ModelDir: string[] = ['Haru', 'Hiyori', 'Mark', 'Natori', 'Rice'];
 export let ModelDir: string[] = ['Hiyori', 'Haru', 'Rice'];
-export const ModelDirSize: number = ModelDir.length;

 // 外部定義ファイル（json）と合わせる
 export const MotionGroupIdle = 'Idle'; // アイドリング
--- a/Samples/TypeScript/Demo/src/lapplive2dmanager.ts
+++ b/Samples/TypeScript/Demo/src/lapplive2dmanager.ts
@ -178,7 +178,7 @@ export class LAppLive2DManager {
   * サンプルアプリケーションではモデルセットの切り替えを行う。
   */
  public nextScene(): void {
-    const no: number = (this._sceneIndex + 1) % LAppDefine.ModelDirSize;
+    const no: number = (this._sceneIndex + 1) % LAppDefine.ModelDir.length;
    this.changeScene(no);
  }

@ -198,7 +198,6 @@ export class LAppLive2DManager {
    // model3.jsonのパスを決定する。
    // ディレクトリ名とmodel3.jsonの名前を一致させておくこと。

-    // SSR服务端渲染的时候，无法正确读取资源。考虑把一个基础模型录入npm包
    const model: string = LAppDefine.ModelDir[index];
    const modelPath: string = LAppDefine.ResourcesPath + model + '/';
    let modelJsonName: string = LAppDefine.ModelDir[index];
--- a/Samples/TypeScript/Demo/src/lapptexturemanager.ts
+++ b/Samples/TypeScript/Demo/src/lapptexturemanager.ts
@ -37,11 +37,11 @@ export class LAppTextureManager {
  }

  /**
-   * 画像読み込み
+   * 图像读取
   *
-   * @param fileName 読み込む画像ファイルパス名
-   * @param usePremultiply Premult処理を有効にするか
-   * @return 画像情報、読み込み失敗時はnullを返す
+   * @param fileName 读取的图像文件路径名称
+   * @param usePremultiply 是否启用Premiult处理
+   * @return 图像信息读取失败时返回null
   */
  public createTextureFromPngFile(
    fileName: string,
@ -58,8 +58,8 @@ export class LAppTextureManager {
        ite.ptr().fileName == fileName &&
        ite.ptr().usePremultply == usePremultiply
      ) {
-        // 2回目以降はキャッシュが使用される(待ち時間なし)
-        // WebKitでは同じImageのonloadを再度呼ぶには再インスタンスが必要
+        // 第二次以后使用缓存（无等待时间）
+        // 在WebKit中，要再次调用相同Image的onload，需要再次实例
        // 詳細：https://stackoverflow.com/a/5024181
        ite.ptr().img = new Image();
        ite.ptr().img.onload = (): void => callback(ite.ptr());
--- a/Samples/TypeScript/Demo/tsconfig.json
+++ b/Samples/TypeScript/Demo/tsconfig.json
@ -3,7 +3,7 @@
    "target": "es5",
    "moduleResolution": "node",
    "esModuleInterop": true,
-    "experimentalDecorators": true,
+    "experimentalDecorators": false,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "removeComments": true,
--- a/Samples/TypeScript/Demo/webpack.config.js
+++ b/Samples/TypeScript/Demo/webpack.config.js
@ -58,11 +58,16 @@ module.exports = {
        }
      },
      {
-        test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test:/\.(png|jpe?g|gif|svg|ttf|eot|woff|woff2)(\?.*)?$/,
        exclude: /node_modules/,
        use: {
            loader: "url-loader"
        }
+      },
+      {
+        test:/\.css$/,
+        exclude: /node_modules/,
+        use: ['style-loader', 'css-loader']
      }
    ]
  },
--- a/img/example.png
+++ b/img/example.png