auto-zoom

这是一个屏幕自适应缩放工具。常用于大屏项目。

This is a screen adaptive zoom tool.Commonly used in large screen projects.

中文文档

Run Simple Demo

$ git clone https://github.com/SuperYesifang/auto-zoom.git
$ cd auto-zoom
$ npm run serve

Usage

new AutoZoom(options):AutoZoom

1. Use CDN

<script src="https://raw.githubusercontent.com/SuperYesifang/auto-zoom/master/dist/AutoZoom.cdn.js"></script>
<script>
new AutoZoom({
  target: "#root",
  designSize: [1920, 1080]
});
</script>

2. Use ESM

import AutoZoom from "auto-zoom";

new AutoZoom({
  target: "#root",
	designSize: [1920, 1080]
});

Options

prop	type	description
target	string | HTMLElement	auto scale zoom target Element.
reference	string | HTMLElement	auto scale reference Element. default: reference window size.
designSize	number[]	expected design size. default [1920, 1080].
transform	object | Function	other transform attributes that need to be added to the target element in addition to scale(such as 'translate'、'rotate', supports use Function control auto zoom's transform style). default: "translate(0,0)".
style	object	other CSS styles that need to be registered on the target element. default: { transformOrigin: "0 0" }
pause	boolean	scale zoom observer initial pause status. default false.

API

new AutoZoom()

new AutoZoom(options):AutoZoom

Instantiation a auto sclae zoom observer.

import AutoZoom from "auto-zoom";

let observer = new AutoZoom({
  target: "#root"
});

observer.start()

observer.start()

Start observer auto scale zoom when observer pauseed.

observer.stop()

observer.stop()

Stop observer auto scale zoom.

observer.rezoom()

observer.rezoom()

Trigger once auto scale zoom.

observer.unobserve()

observer.unobserve()

Remove auto scale zoom observer from reference.

observer.on()

observer.on(type:Event, listener:Listener):removeListener

Add a event listener to observer.

observer.off()

observer.off(type:Event, listener:Listener)

Remove event listener from observer.

@types

type referenceWidth = number; // referene element width
type referenceHeight = number; // reference element height
type designWidth = number; // design width
type designHeight = number; // design height

type AutoZoomOptions {
  target: string | HTMLElement; // auto scale zoom target Element.
  reference: string | HTMLElement; // auto scale zoom reference Element
  designSize: [number, number]; // target's expected design size.
  realZoom: [number, number]; // target's current real size.
  zoom: number; // current scale zoom.
  transform: string | (zoom:number, [referenceWidth, referenceHeight], [designWidth, designHeight]) => string; // Other transform attributes that need to be added to the target element in addition to scale(such as 'translate'、'rotate', supports use Function control auto zoom's transform style).
  style: { [key:string]: string }; // other CSS styles that need to be registered on the target element.
  pause: boolean; // observer initial or current pause status.
}

type Event = "zoom" | "start" | "stop" | "unobserve";

type Listener = (observer:AutoZoom) => {};

type removeListener = Function;

class AutoZoom {
  constructor(options:AutoZoomOptions) {}
  [K in keyof AutoZoomOptions]: AutoZoomOptions[K];
  rezoom: Function; // trigger once auto scale zoom.
  unobserve: Function; // remove auto scale zoom observer from reference.
  stop: Function; // stop auto scale zoom.
  start: Function; // start auto scale zoom when observer paused.
  on: (type:Event, listener:Listener) => removeListener // add event listener to observer.
  off: (type:Event, listener:Listener) => {} // remove event listener from observer.
}