mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-04-19 17:16:08 +08:00
104 lines
2.0 KiB
Markdown
104 lines
2.0 KiB
Markdown
# image 标签 API 文档
|
||
|
||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||
|
||
---
|
||
|
||
```mermaid
|
||
graph LR
|
||
ImageProps --> BaseProps
|
||
|
||
click BaseProps "./BaseProps"
|
||
```
|
||
|
||
---
|
||
|
||
## 接口定义
|
||
|
||
```typescript
|
||
interface ImageProps extends BaseProps {
|
||
/** 必填 - 图片对象（CanvasImageSource 类型） */
|
||
image: CanvasImageSource;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 核心功能
|
||
|
||
- **尺寸控制**：通过 `width/height` 或 `loc` 简写属性定义图片尺寸（默认 200x200）
|
||
- **像素风支持**：通过 `noanti=true` 禁用抗锯齿
|
||
|
||
---
|
||
|
||
## 使用示例
|
||
|
||
### 示例 1：基础图片显示
|
||
|
||
```tsx
|
||
const image = core.material.images.images['myimage.webp'];
|
||
// 显示 200x200 的默认尺寸图片
|
||
<image x={100} y={50} image={image} />;
|
||
```
|
||
|
||
**等效简写**：
|
||
|
||
```tsx
|
||
const image = core.material.images.images['myimage.webp'];
|
||
|
||
<image
|
||
loc={[100, 50]} // width/height 使用默认 200x200
|
||
image={image}
|
||
/>;
|
||
```
|
||
|
||
---
|
||
|
||
### 示例 2：自定义尺寸
|
||
|
||
```tsx
|
||
const image = core.material.images.images['myimage.webp'];
|
||
// 方式一：直接设置宽高
|
||
<image
|
||
x={300}
|
||
y={200}
|
||
width={150} // 覆盖默认宽度
|
||
height={80} // 覆盖默认高度
|
||
image={image}
|
||
/>;
|
||
|
||
// 方式二：通过 loc 简写属性
|
||
<image
|
||
loc={[500, 200, 120, 120]} // [x, y, width, height]
|
||
image={image}
|
||
/>;
|
||
```
|
||
|
||
---
|
||
|
||
### 示例 3：像素风渲染（禁用抗锯齿）
|
||
|
||
```tsx
|
||
const pixelImage = core.material.images.images['myimage.webp'];
|
||
|
||
// 硬核像素风格配置
|
||
<image
|
||
loc={[50, 50, 64, 64]}
|
||
image={pixelImage}
|
||
noanti // 关键配置：关闭抗锯齿
|
||
/>;
|
||
```
|
||
|
||
**效果说明**：
|
||
|
||
- 原始 32x32 像素图 → 放大为 64x64 像素
|
||
- 每个像素块保持锐利边缘
|
||
|
||
---
|
||
|
||
## 属性配置表
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
| ------- | ------------------- | -------- | ------------------------------------------- |
|
||
| `image` | `CanvasImageSource` | **必填** | 图片资源（ImageBitmap/HTMLImageElement 等） |
|