1
0
mirror of https://github.com/SunnyQjm/taro-cropper.git synced 2026-06-03 08:16:46 +08:00

add: 更新文档

This commit is contained in:
SunnyQjm
2019-08-23 14:48:01 +08:00
parent e6db80cff8
commit b644b2f655
2 changed files with 28 additions and 16 deletions
+2 -1
View File
@@ -1,7 +1,8 @@
import {ComponentClass} from "react";
export interface TaroCropperComponentProps {
cropperCanvasId?: string, // 裁剪框画布id
cropperCanvasId?: string, // 画布id
cropperCutCanvasId?: string, // 用于裁剪的canvas id
width?: number, // 组件宽度
height?: number, // 组件高度 (要求背景高度大于宽度)
cropperWidth?: number, // 裁剪框宽度
+14 -3
View File
@@ -6,7 +6,7 @@
>
> 项目地址: [https://github.com/SunnyQjm/taro-cropper](https://github.com/SunnyQjm/taro-cropper)
TaroCropper 是Taro小程序框架下使用的图片裁剪,基于canvasAPI进行实现,支持滑动和缩放,目前测试在微信小程序端可以正常使用。
TaroCropper 是Taro小程序框架下使用的图片裁剪,基于canvasAPI进行实现,支持滑动和缩放,目前测试在微信小程序端和H5端可以正常使用。
> ### 使用方式
@@ -24,6 +24,16 @@ TaroCropper 是Taro小程序框架下使用的图片裁剪,基于canvasAPI进
} from 'taro-cropper';
```
- 在项目配置文件 `config/index.js` 中添加如下配置
```javascript
h5: {
esnextModules: ['taro-cropper']
}
```
该配置的作用是,在H5端使用本库的时候,对应的单位会进行转换(`px` => `rem`
- **在代码中使用**
```typescript
@@ -42,8 +52,9 @@ TaroCropper 是Taro小程序框架下使用的图片裁剪,基于canvasAPI进
> ### 参数说明
| 参数名 | 参数类型 | 参数说明 | 默认值 |
| :-------------: | :----------------------------: | :----------------------------------------------------------: | --------------------- |
| cropperCanvasId | string | 用于绘制的Canvas的id | TaroCropperCanvasId |
| :----------------: | :----------------------------: | :----------------------------------------------------------: | --------------------- |
| cropperCanvasId | string | 用于绘制的Canvas的id | cropperCanvasId |
| cropperCutCanvasId | string | 用于裁剪的Canvas的id | cropperCutCanvasId |
| width | number | 整个控件的宽度(单位为rpx) | 750(即充满屏幕宽度) |
| height | number | 整个控件的高度(单位为rpx) | 1200 |
| cropperWidth | number | 裁剪框的宽度(单位为rpx) | 400 |