https://github.com/stack-stark/ngx-live2d
基于live2d.js 构建的支持angular17版本的 live2d 库
https://github.com/stack-stark/ngx-live2d
Last synced: about 1 year ago
JSON representation
基于live2d.js 构建的支持angular17版本的 live2d 库
- Host: GitHub
- URL: https://github.com/stack-stark/ngx-live2d
- Owner: stack-stark
- Created: 2024-01-24T08:51:10.000Z (about 2 years ago)
- Default Branch: feature-basic
- Last Pushed: 2024-03-29T03:40:50.000Z (about 2 years ago)
- Last Synced: 2024-04-26T01:20:57.985Z (almost 2 years ago)
- Language: TypeScript
- Size: 157 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# about
基于 live2d.js 构建的 angular17 版本的 live2d 库
# Install
```bash
npm install --save ngx-live2d
#or
yarn add ngx-live2d
#or
pnpm add ngx-live2d
```
# Usage
```js
import { Component, signal } from "@angular/core";
import { NgxLive2dComponent, POSITION, ASSETS_TYPE, BUILTIN_MODEL } from "ngx-live2d";
@Component({
selector: "app-home",
standalone: true,
imports: [NgxLive2dComponent],
templateUrl: "./home.component.html",
styleUrl: "./home.component.less",
})
export class HomeComponent {
/**
* 模型位置 默认POSITION.BOTTOM_RIGTH 右下角
*/
position = signal(POSITION.BOTTOM_RIGTH);
/**
* 配置
* @assetsType 资源类型，ASSETS_TYPE.INTERIOR 内置 ASSETS_TYPE.EXTERNAL 外部资源
* @assets 资源名称或链接
*/
configuration = signal({
assetsType: ASSETS_TYPE.INTERIOR,
assets: BUILTIN_MODEL.EPSILON2,
});
/**
* 模型单击事件
*/
modelClickRun() {
console.log("modelClickRun");
}
}
```
```html
```
# API
| 参数 | 类型 | 默认值 | 说明 |
| ------------- | -------- | ------------ | ---------------------------------------------------------------------------------------- |
| POSITION | enum | BOTTOM_RIGTH | 模型展示位置。TOP_LEFT 左上角，BOTTOM_LEFT 左下角，TOP_RIGTH 右上角，BOTTOM_RIGTH 右下角 |
| ASSETS_TYPE | enum | INTERIOR | 资源类型。INTERIOR 内部资源，EXTERNAL 外部资源 |
| BUILTIN_MODEL | enum | EPSILON2 | 内置资源名称。有 Z16，EPSILON2，IZUMI，KOHARU，SHIZUKU，MIKU，HIJIKI，TORORO |
| OnModelClick | Function | - | 模型单击事件。 |
# BUILTIN_MODEL
| 名称 | 预览 |
| -------- | ----------------------------------------- |
| Z16 | https://ngx-live2d.async.cn?name=Z16 |
| EPSILON2 | https://ngx-live2d.async.cn?name=EPSILON2 |
| IZUMI | https://ngx-live2d.async.cn?name=IZUMI |
| KOHARU | https://ngx-live2d.async.cn?name=KOHARU |
| SHIZUKU | https://ngx-live2d.async.cn?name=SHIZUKU |
| MIKU | https://ngx-live2d.async.cn?name=MIKU |
| HIJIKI | https://ngx-live2d.async.cn?name=HIJIKI |
| TORORO | https://ngx-live2d.async.cn?name=TORORO |
# bugs
https://github.com/stack-stark/ngx-live2d/issues
# 预览
https://ngx-live2d.asnyc.cn