q-view
Version:
[Preview](https://q-hub-q-view.vercel.app/)
80 lines (79 loc) • 1.89 kB
TypeScript
import { QuarkElement, Ref } from 'quarkc';
interface CROPPER_RECT {
width: number;
height: number;
scaleX: number;
scaleY: number;
skewX: number;
skewY: number;
translateX: number;
translateY: number;
}
interface RECT {
imgWidth: number;
imgHeight: number;
cropperWidth: number;
cropperHeight: number;
}
export default class ImageCropper extends QuarkElement {
MIN_WIDTH: number;
MIN_HEIGHT: number;
src: any;
rect: string;
matrix: string;
contentRef: Ref<HTMLElement>;
previewRef: Ref<HTMLImageElement>;
cropperRef: Ref<HTMLElement>;
cropperEl: HTMLElement;
isCutting: boolean;
startX: any;
startY: any;
curRect: CROPPER_RECT;
get data(): {
rect: string;
matrix: string;
src: any;
};
get cropperMatrix(): {
scaleX: number;
scaleY: number;
skewX: number;
skewY: number;
translateX: number;
translateY: number;
};
get contentStyle(): {
width: string | number;
height: string | number;
};
get computedRect(): RECT;
get cropperStyle(): {
width: number;
height: number;
transform: string;
};
get previewStyle(): {
margin: string;
transform: string;
width: string | number;
height: string | number;
};
componentDidMount(): void;
init: () => Promise<void>;
initMatrix: () => void;
listen: (e: any) => void;
setCursor: (v: string) => void;
handleCropperMouseMove: (e: any) => void;
handleCropperMouseUp: (e: any) => void;
check: (x: number, y: number, w: number, h: number) => {
x: number;
y: number;
w: number;
h: number;
};
emitConfirm: () => void;
emitCancel: () => void;
handleFull: () => void;
render(): any;
}
export {};