Maofeng
49 lines
1.1 KiB
Plaintext
49 lines
1.1 KiB
Plaintext
---
|
|
title: 基础使用
|
|
description: 添加样式入口并创建一个可交互的图片裁剪器。
|
|
order: 10
|
|
toc:
|
|
- id: stylesheet
|
|
title: 样式入口
|
|
- id: cropper
|
|
title: 裁剪器
|
|
- id: controls
|
|
title: 外部控件
|
|
---
|
|
|
|
## 样式入口 {#stylesheet}
|
|
|
|
在应用的 Tailwind 样式入口中添加：
|
|
|
|
```css
|
|
@import "@workspace/cropper/globals.css";
|
|
```
|
|
|
|
## 裁剪器 {#cropper}
|
|
|
|
组件需要明确的宽度，`aspectRatio` 会确定高度：
|
|
|
|
```tsx
|
|
import { Cropper, type CropArea } from "@workspace/cropper"
|
|
|
|
function ProductImageCropper({ src }: { src: string }) {
|
|
const [area, setArea] = React.useState<CropArea>()
|
|
|
|
return (
|
|
<Cropper
|
|
src={src}
|
|
alt="商品图片"
|
|
aspectRatio={4 / 3}
|
|
className="w-full max-w-xl rounded-xl"
|
|
onCropAreaChange={setArea}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
用户可以拖拽图片、滚动缩放，或者在 Cropper 聚焦时使用方向键、`+`、`-`、`0` 和 `Home`。
|
|
|
|
## 外部控件 {#controls}
|
|
|
|
通过 `value` 和 `onValueChange` 控制裁剪状态，即可接入 Slider 或重置按钮。`minZoom` 最小为 `1`，保证图片始终覆盖整个视口。
|