Selector: [fZoom]
The FZoomDirective directive is used to control the zoom of the canvas. It is used in conjunction with the f-canvas component to provide zoom functionality. Zooming can be done by using the mouse wheel or by double-clicking on the canvas. The zoom level can be reset to the default
fZoom: boolean;
Enables or disables the zoom functionality.
fZoomMinimum: number;
The minimum zoom level allowed. Default is 0.1.
fZoomMaximum: number;
The maximum zoom level allowed. Default is 4.
fZoomStep: number;
The zoom step value. Default is 0.1.
fZoomDblClickStep: number;
The zoom step value when double-clicking. Default is 0.5.
setZoom(point: IPoint, step: number, direction: number, animated: boolean): void;
Sets the zoom level of the f-canvas. Point is the center of the zoom, step is the zoom step, direction is the zoom direction, and animated is whether the zoom should be animated.
getZoomValue(): number;
Returns the current f-canvas scale.
zoomIn(point?: IPoint): void;
Zooms in the f-canvas. If a point is provided, the zoom will be centered on that point.
zoomOut(point?: IPoint): void;
Zooms out the f-canvas. If a point is provided, the zoom will be centered on that point.
reset(): void;
Resets the zoom level to 1.
.f-component
A general class applied to all F components for shared styling.
.f-zoom
Specific class for styling the FZoomDirective component.
To enable zoom and pan functionality, set fZoom
directive to f-canvas component.
<f-flow>
<f-canvas |:|fZoom|:|>
<div fNode></div>
</f-canvas>
</f-flow>
To track zoom changes, use the fCanvasChange
output from fCanvas.
<f-flow>
<f-canvas |:|fZoom|:| |:|(fCanvasChange)|:|="canvasChange($event)">
<div fNode></div>
</f-canvas>
</f-flow>
You can also control the zoom level programmatically by using the methods provided by the directive.
<f-flow>
<f-canvas fZoom>
/// content
</f-canvas>
</f-flow>
The following example shows how to enable zoom and pan functionality in the canvas. Use the mouse wheel to zoom in and out, and double click to zoom in.