Viewport Demo Description

This page demonstrates viewport and zoom controls in CanvasX. You can use viewport widgets to manage the visible area, zoom in/out, and navigate large boards efficiently.

Viewport Widget Documentation

Overview

CanvasX provides viewport and zoom management features, allowing users to focus on specific areas, fit content to view, and navigate large diagrams or boards.

Key Properties

• zoom: number — The current zoom level of the canvas.
• viewportTransform: array — The transformation matrix for the viewport.

Usage Example

canvas.setZoom(1.5);
canvas.zoomToPoint({ x: 200, y: 200 }, 2);
canvas.zoomToViewAllObjects();

Tips & Best Practices

• Use zoom controls to focus on details or get an overview of the board.
• Combine viewport management with navigation widgets for large diagrams.
• Reset zoom to fit all objects for presentations or exports.