js-web-screen-shot
Version:
web端自定义截屏插件(原生JS版)
57 lines (56 loc) • 2.38 kB
TypeScript
type EllipseBounds = {
x: number;
y: number;
width: number;
height: number;
};
interface DrawCircleDotOptions {
drawState: boolean;
dotRadius: number;
}
/**
* 规范化椭圆外接矩形，确保宽高为正且左上角坐标正确
*/
export declare const normalizeEllipseBounds: (bounds: EllipseBounds) => EllipseBounds;
/**
* 绘制圆形
* @param context 需要进行绘制的画布
* @param mouseX 当前鼠标x轴坐标
* @param mouseY 当前鼠标y轴坐标
* @param mouseStartX 鼠标按下时的x轴坐标
* @param mouseStartY 鼠标按下时的y轴坐标
* @param borderWidth 边框宽度
* @param color 边框颜色
* @param dotOptions 控制是否绘制操作节点
*/
export declare function drawCircle(context: CanvasRenderingContext2D, mouseX: number, mouseY: number, mouseStartX: number, mouseStartY: number, borderWidth: number, color: string, dotOptions?: DrawCircleDotOptions): void;
/**
* 根据外接矩形重新绘制圆形/椭圆
*/
export declare const redrawCircle: (context: CanvasRenderingContext2D, ellipse: EllipseBounds, borderWidth: number, color: string, dotOptions?: DrawCircleDotOptions) => void;
/**
* 判断鼠标是否位于圆/椭圆的边框上
* @param mouseX 鼠标x轴坐标
* @param mouseY 鼠标y轴坐标
* @param ellipse 圆的外接矩形信息
* @param borderWidth 边框宽度
* @param borderBuffer 额外容错范围，避免必须精准落在边框上才触发
*/
export declare function isMouseOnCircleBorder(mouseX: number, mouseY: number, ellipse: EllipseBounds, borderWidth: number, borderBuffer?: number): boolean;
/**
* 判断鼠标是否位于圆/椭圆的操作节点上
*/
export declare const getMousePositionOnCircleHandle: (mouseX: number, mouseY: number, ellipse: EllipseBounds, dotRadius: number) => number | null;
/**
* 根据节点索引获取圆形的缩放方向
*/
export declare const getCircleHandleCursor: (index: number) => string | null;
/**
* 根据节点缩放圆/椭圆
*/
export declare const resizeEllipse: (originalX: number, originalY: number, originalWidth: number, originalHeight: number, handleIndex: number, newMouseX: number, newMouseY: number) => EllipseBounds;
/**
* 判断鼠标是否处于圆/椭圆内部
*/
export declare const isMouseInsideEllipse: (mouseX: number, mouseY: number, ellipse: EllipseBounds) => boolean;
export {};