lucianoandClaude Fable 5
21ad969b10
App Kotlin Multiplatform (Android/iOS/Desktop) con Compose Multiplatform: controllo intonazione (YIN), pratica guidata, metronomo, ear training, sfide, scansione spartiti via AI, spartiti bundled e pentagramma con glifi tipografici, travature, battute e spaziatura proporzionale. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
35 lines
973 B
Markdown
35 lines
973 B
Markdown
---
|
|
name: measuring-dom-nodes
|
|
description: Measuring DOM element dimensions in Remotion
|
|
metadata:
|
|
tags: measure, layout, dimensions, getBoundingClientRect, scale
|
|
---
|
|
|
|
# Measuring DOM nodes in Remotion
|
|
|
|
Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
|
|
|
|
## Measuring element dimensions
|
|
|
|
```tsx
|
|
import { useCurrentScale } from "remotion";
|
|
import { useRef, useEffect, useState } from "react";
|
|
|
|
export const MyComponent = () => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const scale = useCurrentScale();
|
|
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
const rect = ref.current.getBoundingClientRect();
|
|
setDimensions({
|
|
width: rect.width / scale,
|
|
height: rect.height / scale,
|
|
});
|
|
}, [scale]);
|
|
|
|
return <div ref={ref}>Content to measure</div>;
|
|
};
|
|
```
|