Pinch zoom and panning for 1Dim charts

[X-ray]

Hello,

there is a nice example available how to use gestures for a 3 Dimensional chart:

http://steema.com/wp/narcis/category/vcl/

Could please someone show/explain how to implement:

procedure TForm1.handleZoom(EventInfo: TGestureEventInfo);

and

procedure TForm1.handlePan(eventInfo: TGestureEventInfo);

for a normal, One Dimensional Line Chart for FMX on Android and iOS?

Thanks and best regards,

Thomas

[X-ray]

Hello,

I meant of course, how to implement pinch zoom and panning for 2Dim charts, like Line charts?
Note, that I previously posted under a registration of an expired account. I just logged in with my current, running subscription account to post this addendum.

Thanks and best regards,

Thomas

[Yeray]

Hello,

Find an example here:

Code: Select all

uses System.Math, FMXTee.Series;

procedure TForm1.FormCreate(Sender: TObject);
var Series1: TLineSeries;
begin
  Chart1.View3D:=False;
  Chart1.Legend.Hide;
  Chart1.Color:=clWhite;
  Chart1.Gradient.Visible:=False;
  Chart1.Walls.Back.Color:=clWhite;
  Chart1.Walls.Back.Gradient.Visible:=False;
  Chart1.Hover.Hide;

  Chart1.AllowZoom:=False;
  Chart1.AllowPanning:=pmNone;

  Series1:=TLineSeries(Chart1.AddSeries(TLineSeries));
  Series1.FillSampleValues;
end;

procedure TForm1.Chart1Gesture(Sender: TObject;
  const EventInfo: TGestureEventInfo; var Handled: Boolean);
begin
  if EventInfo.GestureID = igiZoom then
    handleZoom(EventInfo)
  else if EventInfo.GestureID = igiPan then
    handlePan(EventInfo)
  else if EventInfo.GestureID = igiDoubleTap then
    handleDoubleTap(EventInfo);

  Handled:=True;
end;

procedure TForm1.handleZoom(EventInfo: TGestureEventInfo);
var
  LObj: IControl;
  chart: TChart;
  diff: Double;
  xZoom, yZoom: Double;
begin
  LObj:=Self.ObjectAtPoint(ClientToScreen(EventInfo.Location));
  if LObj is TChart then
  begin
    if not(TInteractiveGestureFlag.gfBegin in EventInfo.Flags) then
    begin
      chart:=TChart(LObj.GetObject);
      chart.Title.Text.Text:=IntToStr(EventInfo.Distance);
      diff:=(EventInfo.Distance - FLastDIstance);
      XZoom:=chart.Axes.Bottom.CalcPosPoint(0) - chart.Axes.Bottom.CalcPosPoint(Round(Cos(EventInfo.Angle)*diff));
      YZoom:=chart.Axes.Left.CalcPosPoint(0) - chart.Axes.Left.CalcPosPoint(Round(Sin(EventInfo.Angle)*diff));
      chart.Axes.Bottom.SetMinMax(chart.Axes.Bottom.Minimum-XZoom, chart.Axes.Bottom.Maximum+XZoom);
      chart.Axes.Left.SetMinMax(chart.Axes.Left.Minimum-YZoom, chart.Axes.Left.Maximum+YZoom);
    end;
  end;
  FLastDIstance:=EventInfo.Distance;
end;

procedure TForm1.handlePan(eventInfo: TGestureEventInfo);
var
  LObj: IControl;
  chart: TChart;
  XDiff, YDiff: Double;
begin
  LObj:=Self.ObjectAtPoint(ClientToScreen(EventInfo.Location));
  if LObj is TChart then
  begin
    if not(TInteractiveGestureFlag.gfBegin in EventInfo.Flags) then
    begin
      chart:=TChart(LObj.GetObject);
      XDiff:=chart.Axes.Bottom.CalcPosPoint(Round(FLastPosition.X)) - chart.Axes.Bottom.CalcPosPoint(Round(EventInfo.Location.X));
      chart.Axes.Bottom.SetMinMax(chart.Axes.Bottom.Minimum+XDiff, chart.Axes.Bottom.Maximum+XDiff);
      YDiff:=chart.Axes.Left.CalcPosPoint(Round(FLastPosition.Y)) - chart.Axes.Left.CalcPosPoint(Round(EventInfo.Location.Y));
      chart.Axes.Left.SetMinMax(chart.Axes.Left.Minimum+YDiff, chart.Axes.Left.Maximum+YDiff);
    end;

    FLastPosition:=EventInfo.Location;
  end;
end;

procedure TForm1.handleDoubleTap(eventInfo: TGestureEventInfo);
var
  LObj: IControl;
begin
  LObj:=Self.ObjectAtPoint(ClientToScreen(EventInfo.Location));
  if LObj is TChart then
    ResetChart(TChart(LObj.GetObject));
end;

procedure TForm1.ResetChart(chart: TChart);
begin
  chart.Axes.Bottom.Automatic:=True;
  chart.Axes.Left.Automatic:=True;
end;

[X-ray]

Thank you, that works nicely!