domScale

调整元素的缩放比例

基础用法

loading

参数类型

//#region src/domScale/types.d.ts
/** DomScale的配置项 */
interface DomScaleOptions {
  /** 调整元素 */
  target?: HTMLElement;
  /** 调整方向, 不设置时默认为all */
  direction?: DomScaleDirection;
  /** 手动调整控制 */
  manual?: {
    /** 调整模式，默认为relative，relative: 相对当前角度调整，absolute: 调整到对应的角度 */
    mode?: 'relative' | 'absolute';
    /** 缩放比例 */
    scale?: DomScaleValue;
  };
  /** 使用scale/transform进行缩放，默认使用scale */
  scaleType?: DomScaleType;
  /** 自定义渲染 */
  customRender?: DomScaleCustomRender;
  /** 自定义样式，用于兼容一些无法通过当前节点获取的样式 */
  customStyle?: DomScaleCustomStyle;
  /** 关闭对target元素的更新，关闭后需通过callback方法手动给元素添加样式 */
  disableUpdate?: boolean;
  /** 调整回调 */
  callback?: (content: DomScaleContent, style: DomScaleStyle) => void;
}
/** 缩放比例值（可用空格或数组区分横轴跟纵轴） */
type DomScaleValue = number | string | number[] | string[];
/** DomScale的调整方向 */
type DomScaleDirection = 'x' | 'y' | 'all';
/** 元素缩放时的样式类型 */
type DomScaleType = 'scale' | 'transform';
/** DomScale的自定义渲染样式 */
interface DomScaleCustomRender {
  /** 缩放值 */
  scale?: (scaleX: number, scaleY: number) => string;
}
/** DomScale的内容 */
interface DomScaleContent {
  scaleX?: number;
  scaleY?: number;
}
/** DomScale的样式 */
interface DomScaleStyle {
  scale?: string;
  transform?: string;
}
/** DomScale的自定义样式，用于兼容一些无法通过当前节点获取的样式 */
interface DomScaleCustomStyle {
  /** 缩放值 */
  scale?: DomScaleValue;
  /** 最小缩放值 */
  minScale?: DomScaleValue;
  /** 最大缩放值 */
  maxScale?: DomScaleValue;
}
//#endregion
export { DomScaleContent, DomScaleCustomRender, DomScaleCustomStyle, DomScaleDirection, DomScaleOptions, DomScaleStyle, DomScaleType, DomScaleValue };

源码

源代码