Issue Description
Users are unable to reset the zoom and position of the interactive whiteboard view to fit entirely within its container after zooming in or out. The `moveCameraToContain` method is being used but does not work as expected to achieve the “Page Fit” functionality, which fits the whiteboard content fully visible inside the container.
Platform/SDK
- Agora Interactive Whiteboard SDK
- Web or Desktop (depending on implementation)
- Typical usage in JavaScript or TypeScript environments
Step by Step Solution
1. Understand the Goal:
- The objective is to reset the whiteboard camera so that the entire page content fits perfectly inside the visible container area, regardless of previous zoom or pan actions.
2. Avoid Using `moveCameraToContain`:
- This method may not achieve the desired “Page Fit” effect as it is designed for different use cases.
3. Use `moveCamera` with Scale Parameter:
- The recommended approach is to call the `moveCamera` method on the whiteboard room object.
- Set the `scale` parameter to `1` to reset zoom to the default level.
4. Example Code:
// Assuming 'room' is your whiteboard room instance
room.moveCamera({ scale: 1 });
- This command resets the zoom scale to 100%, effectively fitting the page to the container.
- You can call this method on a button click or any UI event that triggers the "Page Fit" functionality.
5. Additional Adjustments (Optional):
- If you need to center the whiteboard content after resetting scale, you can also specify position parameters:
room.moveCamera({ scale: 1, centerX: desiredX, centerY: desiredY });- Usually, just resetting the scale to 1 suffices for most “Page Fit” requirements.
Root Cause
The `moveCameraToContain` method does not inherently reset the zoom scale or reposition the camera to fit the entire page within the container; instead, it may attempt to adjust the view based on bounding boxes, which can be ineffective for resetting zoom to default. Using `moveCamera` with a fixed scale value explicitly controls the zoom level.
Prevention/Best Practice
- Use `moveCamera({ scale: 1 })` to implement “Page Fit” functionality rather than relying on less precise methods.
- Test camera movement and zoom reset behavior after implementing to ensure the whiteboard content fits as expected on different screen sizes.
- Consult the latest Agora Whiteboard SDK documentation for updates or new methods related to camera control.
Corresponding Document/Link
- Agora Interactive Whiteboard SDK - Camera Control https://docs.agora.io/en/whiteboard/reference/room#movecamera
- Agora Whiteboard API Reference
https://docs.agora.io/en/whiteboard/api/