choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
86 lines (85 loc) • 2.68 kB
TypeScript
/**
* 裁剪组件
*/
import { Component } from 'react';
import PropTypes from 'prop-types';
export interface CropValue {
height: number;
width: number;
x: number;
y: number;
}
export declare type Size = {
width: number;
height: number;
};
export interface ImageCrop extends HTMLImageElement {
src: string;
}
export interface CropProps {
crossOrigin?: "anonymous" | "use-credentials";
src?: string;
editorWidth: number;
editorHeight: number;
minRectSize: number;
defaultRectSize: number;
rotation?: number;
onRotationChange?: (rate: number) => void;
onComplete?: (value: any) => void;
onCropChange?: (crop: any) => void;
prefixCls?: string;
}
export default class Crop extends Component<CropProps, any> {
static propTypes: {
crossOrigin: PropTypes.Requireable<string>;
src: PropTypes.Requireable<string>;
rotation: PropTypes.Requireable<number>;
onRotationChange: PropTypes.Requireable<(...args: any[]) => any>;
onComplete: PropTypes.Requireable<(...args: any[]) => any>;
onCropChange: PropTypes.Requireable<(...args: any[]) => any>;
prefixCls: PropTypes.Requireable<string>;
editorWidth: PropTypes.Requireable<number>;
editorHeight: PropTypes.Requireable<number>;
minRectSize: PropTypes.Requireable<number>;
defaultRectSize: PropTypes.Requireable<number>;
};
static defaultProps: {
editorWidth: number;
editorHeight: number;
minRectSize: number;
defaultRectSize: number;
};
constructor(props: CropProps);
componentDidUpdate(prevProps: any, prevState: any): void;
handleMoveStart: ({ clientX, clientY }: {
clientX: any;
clientY: any;
}) => void;
handleMoving: ({ clientX, clientY }: {
clientX: any;
clientY: any;
}) => void;
handleMoveEnd: () => void;
handleResizeStart: (e: any) => void;
handleResizing: ({ clientX, clientY }: {
clientX: any;
clientY: any;
}) => void;
handleResizeEnd: () => void;
/** *
* 永远计算理论上来说必须用sin这种方法来计算了
* 最大高度和最小高度
*/
/**
*
* Returns an x,y point once rotated around xMid,yMid
*/
rotateAroundMidPoint: (x: number, y: number, xMid: number, yMid: number, degrees: number) => [number, number];
/**
* Returns the new bounding area of a rotated rectangle.
*/
translateSize: (width: number, height: number, rotation: number) => Size;
initImageSize(img: any, rotate?: number): void;
loadImage(src: any): void;
render(): JSX.Element | null;
}