🐱 Live2D Widget

网页看板娘 · Live2D 交互角色挂件 · 零依赖 · 一行引入

一个可交互的 Live2D 二次元角色挂件，支持拖拽、换装、切换模型、一言、截图等功能。

✨ 特性

• 🎭 Live2D 渲染 — 流畅的动画角色，支持交互
• 🖱️ 拖拽自由 — 原生 Pointer Events，无需 jQuery UI
• 👗 换装 & 切换模型 — 一键更换服装和角色
• 💬 智能提示 — 时段问候、来源识别、节日祝福、一键一言
• 📸 截图保存 — Canvas toDataURL 一键下载
• 📦 零依赖 — 不依赖 jQuery，纯原生 JS
• ⚡ 异步加载 — Promise 驱动，不阻塞页面
• 🎨 SVG 内联图标 — 无需字体文件

🚀 快速开始

<link rel="stylesheet" href="src/live2d-widget.css">
<script src="src/live2d-widget.js"></script>
<script>
    const widget = new Live2DWidget({
        modelId: 1,
        canSwitchModel: true,
    });
    widget.init('assets/waifu-tips.json');
</script>

⚙️ 配置项

参数	类型	默认值	说明
modelId	number	1	初始模型 ID (1-24)
modelTexturesId	number	53	初始服装 ID
modelStorage	boolean	true	是否缓存模型
live2dPath	string	assets/live2d.min.js	Live2D SDK 路径
tipsPath	string	waifu-tips.json	提示语数据文件
hitokotoAPI	string	lwl12.com	一言 API 来源
waifuSize	string	280x250	挂件尺寸
waifuEdge	string	left	靠左/靠右 (left/right)
canSwitchModel	boolean	false	允许切换模型
canSwitchTextures	boolean	false	允许切换服装
canTakeScreenshot	boolean	true	允许截图
canClose	boolean	true	允许关闭
showToolMenu	boolean	true	显示工具栏
showHitokoto	boolean	true	显示一言
homePageUrl	string	-	首页链接
aboutPageUrl	string	-	关于页链接

📂 项目结构

acgurl/
├── index.html                # 演示页面
├── src/
│   ├── live2d-widget.js      # 核心逻辑 (ES6 Class, 零依赖)
│   └── live2d-widget.css     # 样式 (纯 CSS + SVG 图标)
├── assets/
│   ├── live2d.min.js         # Live2D Cubism SDK
│   └── waifu-tips.json       # 提示语配置
├── .gitignore
└── README.md

📝 提示语配置

waifu-tips.json 支持以下配置块：

• waifu.hour_tips — 按时段的问候语
• waifu.referrer_message — 按来源的欢迎语
• mouseover — 鼠标悬停指定元素时的提示
• click — 点击指定元素时的提示
• seasons — 节日/特殊日期提示（支持 {year} 模板变量）

{
    "seasons": [
        {
            "date": "10/01",
            "text": ["国庆节，新中国已经成立{year}年了呢"],
            "baseYear": 1949
        }
    ]
}

🙏 致谢

• Live2D Cubism SDK
• 原始项目 fghrsh/live2d_demo