xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make maximum scale configurable (#1006)

Browse Source
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent fe2b228c36
commit 81ed51c1e0
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
guide.md
View File

@@ -351,16 +351,17 @@ new rrwebPlayer({
##### Options ##### Options
| key | default | description | | key | default | description |
| -------------- | ------------ | ------------------------------------------------------ | | -------------- | ------------ | -------------------------------------------------------------------- |
| events | [] | the events for replaying | | events | [] | the events for replaying |
| width | 1024 | the width of the replayer | | width | 1024 | the width of the replayer |
| height | 576 | the height of the replayer | | height | 576 | the height of the replayer |
| autoPlay | true | whether to autoplay | | maxScale | 1 | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited |
| speedOption | [1, 2, 4, 8] | speed options in UI | | autoPlay | true | whether to autoplay |
| showController | true | whether to show the controller UI | | speedOption | [1, 2, 4, 8] | speed options in UI |
| tags | {} | customize the custom events style with a key-value map | | showController | true | whether to show the controller UI |
| ... | - | all the rrweb Replayer options will be bypassed | | tags | {} | customize the custom events style with a key-value map |
| ... | - | all the rrweb Replayer options will be bypassed |
#### Events #### Events

5
packages/rrweb-player/src/Player.svelte
View File

@@ -14,6 +14,7 @@
export let width = 1024; export let width = 1024;
export let height = 576; export let height = 576;
export let maxScale = 1;
export let events: eventWithTime[] = []; export let events: eventWithTime[] = [];
export let skipInactive = true; export let skipInactive = true;
export let autoPlay = true; export let autoPlay = true;
@@ -55,8 +56,10 @@
) => { ) => {
const widthScale = width / frameDimension.width; const widthScale = width / frameDimension.width;
const heightScale = height / frameDimension.height; const heightScale = height / frameDimension.height;
const scale = [widthScale, heightScale];
if (maxScale) scale.push(maxScale);
el.style.transform = el.style.transform =
`scale(${Math.min(widthScale, heightScale, 1)})` + `scale(${Math.min(...scale)})` +
'translate(-50%, -50%)'; 'translate(-50%, -50%)';
}; };