This example shows how Zoom and Pan can be implemented on the TSVG2Image control.
In SVG zooming and panning is controlled by the viewPort, viewBox and preserveAspectRatio attributes on the outer SVG element.
The outer SVG element is the first SVG element in the xml file. In most cases, there is only one SVG element within an SVG xml file.
View port
The viewPort is the window in which the SVG image is displayed. The viewPort is defined by the dimensions of the outer SVG element, so the width and height attribute or, if width and height are expressed as percentages, the client rectangle of the SVG’s container.
For our purposes we will override the width and height attributes of the outer SVG element and set them to 100%, so width = 100% and height=100%. With these settings the viewPort will be equal to the ClientRect of the TSVG2Image control.
View box
The viewBox attribute selects the part of the SVG image that is displayed. This is an optional attribute, not all SVG images have a viewBox defined.
For zooming and panning we need a viewBox, so if the SVG image has no viewBox defined, we will create one and initially set it to the same size as the viewPort.
Preserve aspect ratio
The preserveAspectRatio defines how the viewBox is aligned within the viewPort. We want to preserve the aspect ratio of the SVG image and we want the center it. For this we need the setting xMidYMid.
Basics of zooming and panning in SVG
For zooming and panning an SVG image we only need to modify the viewBox attribute.
For panning we simply change the top left point of the viewBox rectangle.
For zooming we change with equal proportion the width and height of the viewBox rectangle. The smaller the viewBox, the more we are zooming in.
Structure of the example application
- A form with on it one TSVG2Image set to align “alClient” to the form
- Property “DoubleBuffered” on the form is set to “True”, to ensure smooth zooming and panning
- Property “AutoViewbox” on the TSVG2Image is set to “True”, so the width and height of the outer SVG will be automatically set to 100%
- Property “AspectRatioAlign” will be set to “arXMidYMid” to preserve the aspect ratio of the SVG image and center it within the viewPort.
- Property “AspectRatioMeetOrSlice” can either be “Meet” or “Slice”
- Event “OnAfterParse” on TSVGImage will be used to read the “viewBox” attribute from the outer SVG element and store it in form variable “FViewBox”. If it does not exist, we will initialize FViewBox with the size of the viewPort.
- Event “OnDblClick” on TSVGImage will allow loading of a new SVG image
- Events “OnMouseDown”, “OnMouseMove” and “OnMouseUp” on TSVGImage will be used to pan the SVG image. Panning will be proportional to the zoom level.
- Event “OnMouseWheel” on the form will be used to increase or decrease the zoom on the SVG image. The focus of the zoom will be the position of the mouse pointer on the SVG image.
So after creating the application project and setting the properties on the form and the TSVG2Image we need to implement the event handlers.
OnAfterParse
After parsing the SVG xml file an in-memory node tree data structure will be available for us to read and modify SVG elements attributes.
We can access the element nodes through the TSVG2Image “SVGRoot” property.
The “SVG” property of SVGRoot will point to the outer SVG element of the SVG image.
In the code below, we assign the viewBox attribute value to the form variable FViewBox. If no viewBox is defined on the outer SVG we initialize FViewBox with the size of the viewPort.
procedure TForm1.SVG2Image1AfterParse(Sender: TObject);
var
SVG: ISVG;
CR: TRect;
begin
if not assigned(SVG2Image1.SVGRoot) then
Exit;
SVG := SVG2Image1.SVGRoot.SVG;
if not assigned(SVG) then
Exit;
if SVG.ViewBox.IsUndefined then
begin
// No viewBox so we will create one with the same size as the viewPort.
// The viewPort is defined by the dimensions of the outer SVG element.
CR := SVG2Image1.ClientRect;
FViewBox := SVG2Image1.SVGRoot.CalcIntrinsicSize(SVGRect(0, 0, CR.Width, CR.Height));
end else
FViewBox := SVG.ViewBox;
end;Utility functions
The basis for all calculations in the application is the conversion from Mouse point to ViewBox point. The formula for this depends on the preserveAspectRatio settings. If you choose an other setting than xMidYMid the calculations will be different.
CalcZoomFactor
First we create a function to calculate the current zoom factor.
Depending on the preserveAspectRatio setting “Meet” or “Slice” and the aspect ratios of the viewBox or the viewPort, the zoom factor is calculated from the width or height ratio between the viewBox and the viewPort.
function TForm1.CalcZoomFactor: TSVGFloat;
var
ViewPort: TRect;
ViewPortRatioXY,
ViewBoxRatioXY: TSVGFloat;
begin
// This calculates the zoom factor between between the viewPort and the viewBox
ViewPort := SVG2Image1.ClientRect;
// We have to take into consideration the aspect ratio settings
ViewPortRatioXY := ViewPort.Width / ViewPort.Height;
ViewBoxRatioXY := FViewBox.Width / FViewBox.Height;
if SVG2Image1.AspectRatioMeetOrSlice = arSlice then
begin
if ViewPortRatioXY > ViewBoxRatioXY then
Result := FViewBox.Width / ViewPort.Width
else
Result := FViewBox.Height / ViewPort.Height;
end else begin
if ViewPortRatioXY > ViewBoxRatioXY then
Result := FViewBox.Height / ViewPort.Height
else
Result := FViewBox.Width / ViewPort.Width;
end;
end;CalcViewBoxPt
Next we can create a function to calculate a viewBox point from a mouse point. This calculation is based on the xMidYMid setting.
So basically we calculate the distance of the mousepoint to the middle of the viewPort. Multiply this by the zoom factor to convert it to viewBox coordinates and then subtract it from the middle of the viewBox and finally add the top left point of the viewBox.
function TForm1.CalcViewBoxPt(const aMousePt: TPoint): TSVGPoint;
var
ViewPort: TRect;
Zoom: TSVGFloat;
begin
ViewPort := SVG2Image1.ClientRect;
Zoom := CalcZoomFactor;
// Convert mousepoint to viewboxpoint
Result.X := FViewBox.Left + FViewBox.Width/2 - (ViewPort.Width/2 - aMousePt.X) * Zoom;
Result.Y := FViewBox.Top + FViewBox.Height/2 - (ViewPort.Height/2 - aMousePt.Y) * Zoom;
end;SVGRepaint
With the SVGRepaint procedure we set the modified form variable FViewBox on the outer SVG element and force a repaint of the TSVG2Image.
procedure TForm1.SVGRepaint;
var
SVG: ISVG;
begin
// Get the outer SVG element
if not assigned(SVG2Image1.SVGRoot) then
Exit;
SVG := SVG2Image1.SVGRoot.SVG;
if not assigned(SVG) then
Exit;
// Set the viewBox attribute on the outer SVG element
SVG.ViewBox := FViewBox;
SVG2Image1.Repaint;
end;Now we are ready to implement the event handlers.
OnMouseDown
On the OnMouseDown event we start panning if the left mouse button is pressed and it is not a double click.
procedure TForm1.SVG2Image1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
if (mbLeft = Button) and not(ssDouble in Shift) then
begin
// Save the mousedown point on mousedown
FMouseDown := True;
FMousePt := Point(X, Y);
end;
end;OnMouseMove
If we move the mouse we want to display the viewBox coordinates corresponding with the mouse pointer on the form caption.
If we are panning (FMouseDown = True) we calculate the new viewBox position from the delta mouse position.
procedure TForm1.SVG2Image1MouseMove(Sender: TObject; Shift: TShiftState; X,
Y: Integer);
var
Delta: TPoint;
ViewPort: TRect;
Zoom: TSVGFLoat;
ViewBoxPt: TSVGPoint;
begin
// Convert the mouse coords to viewBox coords and display in caption
// Move the viewBox if the mouse btn is pressed
ViewBoxPt := CalcViewBoxPt(Point(X, Y));
Caption := Format('ViewBox Pt: %3.1f %3.1f', [ViewBoxPt.X, ViewBoxPt.Y]);
if FMouseDown then
begin
// Compensate the mousemovent with the zoom factor so the image moves at
// the same rate as the mouse
ViewPort := SVG2Image1.ClientRect;
Zoom := CalcZoomFactor;
Delta := Point(FMousePt.X - X, FMousePt.Y - Y);
// Calculate the new viewport position.
FViewBox.Left := FViewBox.Left + Delta.X * Zoom;
FViewBox.Right := FViewBox.Right + Delta.X * Zoom;
FViewBox.Top := FViewBox.Top + Delta.Y * Zoom;
FViewBox.Bottom := FViewBox.Bottom + Delta.Y * Zoom;
// Save the new mousedown position
FMousePt := Point(X, Y);
// Set the new viewBox and repaint the SVG image.
SVGRepaint;
end;
end;OnMouseUp
On the mouseup event we reset the form variables that control panning.
procedure TForm1.SVG2Image1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
FMousePt := Point(0, 0);
FMouseDown := False;
endOnMouseWheel
On every change of the mousewheel we increase or decrease the zoom level with a constant factor F.
// Zoom with arbitrary factor
Sign := WheelDelta / abs(WheelDelta);
F := -Sign * 0.05;So for zooming in and out we simply increase the width and height of the viewBox with this factor.
FViewBox.Width = FViewBox.Width * (1 + F)
FViewBox.Height = FViewBox.Height * (1 + F)The challenge now is to focus the zoom onto the current mousepointer. This means that we want the viewBox point under the mousepointer to remain the same after changing the zoom level. For this we need to move the viewBox a bit after zooming. This is what we now have to calculate.
The viewBox points can be calculated from the mousepoint, in case of xMidYMid we have the following formula’s:
X = ViewBox.Left + ViewBox.Width/2 + (MouseX - ViewPort.Width/2) * Zoom
Y = ViewBox.Top + ViewBox.Height/2 + (MouseY - ViewPort.Height/2) * ZoomAfter changing the zoom with a factor F, the formula’s can be written as follows:
X = NewViewBox.Left + ViewBox.Width/2 * (1 + F) + (MouseX - ViewPort.Width/2) * Zoom * (1 + F)
Y = NewViewBox.Top + ViewBox.Height/2 * (1 + F) + (MouseY - ViewPort.Height/2) * Zoom * (1 + F)Because X and Y must remain the same before and after changing the zoom level, we can now calculate the values of NewViewBox.Left and NewViewBox.Top.
NewViewBox.Left = ViewBox.Left - ViewBox.Width/2 * F - (MouseX - ViewPort.Width/2) * Zoom * F
NewViewBox.Top = ViewBox.Top - ViewBox.Height/2 * F - (MouseY - ViewPort.Height/2) * Zoom * FSo the complete MouseWheel event handler looks like this:
procedure TForm1.FormMouseWheel(Sender: TObject; Shift: TShiftState;
WheelDelta: Integer; MousePos: TPoint; var Handled: Boolean);
var
P: TPoint;
F: TSVGFloat;
Sign: TSVGFloat;
ViewPort: TRect;
ViewBoxOriginal: TSVGRect;
Zoom: TSVGFloat;
begin
// Zoom the SVG in or out on every change of the mousewheel
if WheelDelta = 0 then
Exit;
// Zoom with arbitrary factor
Sign := WheelDelta / abs(WheelDelta);
F := -Sign * 0.05;
ViewBoxOriginal := FViewBox;
ViewPort := SVG2Image1.ClientRect;
Zoom := CalcZoomFactor;
P := SVG2Image1.ScreenToClient(MousePos);
FViewBox.Left := ViewBoxOriginal.Left - ViewBoxOriginal.Width/2 * F
- (P.X - ViewPort.Width/2) * Zoom * F;
FViewBox.Top := ViewBoxOriginal.Top - ViewBoxOriginal.Height/2 * F
- (P.Y - ViewPort.Height/2) * Zoom * F;
FViewBox.Right := FViewBox.Left + ViewBoxOriginal.Width * (1 + F);
FViewBox.Bottom := FViewBox.Top + ViewBoxOriginal.Height * (1 + F);
SVGRepaint;
end;
OnDblClick
Finally we create an even handler for loading an SVG file into the TSVG2Image control.
procedure TForm1.SVG2Image1DblClick(Sender: TObject);
begin
// Load a new SVG image by dubbel clicking the TSVG2Image
if OpenDialog1.Execute then
begin
// Clear any SVG present in the SVG stringlist property, because it has
// priority over the SVG filename property
SVG2Image1.SVG.Clear;
FViewBox := TSVGRect.CreateUndefined;
SVG2Image1.Filename := OpenDialog1.FileName;
end;
end;The complete source code of this example project can be found here.
