JCCKit logo

2.4 Example: Zooming

The applet ZoomExample (see the Examples page) shows the snowflake curve which is built by three Koch curves. The Koch curve is a well-known fractal curve. The user can click-and-drag the mouse pointer to zoom into the curve. By double clicking the original size is restored.

For this example three different problems have to be solved:

  1. Translating device-dependent coordinates (cursor positions) into device-independent coordinates and data coordinates.
  2. Drawing an intermediate rectangle during dragging in order to show the window to zoom into.
  3. Changing the axis box.
In the following subsections the basic solution of each problem is described and shown by code snippets (click here to see the complete code).

2.4.1 Translating cursor coordinates

With the method mapCursorPosition() of the class GraphicsPlotCanvas cursor coordinates are translated into device-independent coordinates represent by an instance of GraphPoint:
private GraphPoint getPosition(MouseEvent event)
  return _plotCanvas.mapCursorPosition(event.getX(), event.getY());
Translating to data coordinates is done by the method tranform() of the Plot class. This method is used in the following code snippet of the example where the new axis box is calculated:
private void changeViewingWindow(GraphPoint point)
  DataPoint p0 = _plotCanvas.getPlot().transform(_anchor);
  DataPoint p1 = _plotCanvas.getPlot().transform(point);

2.4.2 Drawing an intermediate rectangle

When the user click-and-drag the mouse a gray rectangle is drawn into the plot. It is defined by the click-position (called anchor) and the current cursor position. In JCCKit one can add an additional GraphicalElement to a plot in two ways, as an annotation or a marker:

An annotation is added by calling the method setAnnotation() of a Plot instance. Annotations are drawn before the legend is drawn. That is, they may be covered by the legend box.

A marker is added to a GraphicsPlotCanvas object by calling the method setMarker(). Markers are drawn after the legend is drawn. Thus, they are on the top of all other graphical elements of a plot.

An intermediate rectangle reflecting user interaction is a marker and not an annotation. In the example the method drawMarker does the job:

private void drawMarker(GraphPoint point)
  double x0 = _anchor.getX();
  double y0 = _anchor.getY();
  double x1 = point.getX();
  double y1 = point.getY();
  GraphPoint center = new GraphPoint(0.5 * (x0 + x1), 0.5 * (y0 + y1));
  setMarker(new Rectangle(center, Math.abs(x1 - x0), Math.abs(y1 - y0), 

private void setMarker(GraphicalElement marker)
Note, that setting an annotation or a marker does not lead to an automatic redrawing of the plot. Thus, an invocation of the repaint() method is necessary.

2.4.3 Changing the axis box

In order to change the axis box one has to change the coordinate system of the Plot instance with the method setCoordinateSystem(). In the example the new coordinate system for changed axis box is created by the following method:
private void setCoordinateSystem(double xMin, double yMin, 
                                 double xMax, double yMax)
  Properties props = new Properties();
  props.put("xAxis/minimum", Double.toString(xMin));
  props.put("xAxis/maximum", Double.toString(xMax));
  props.put("xAxis/ticLabelFormat", "%1.3f");
  props.put("xAxis/axisLabel", "");
  props.put("yAxis/minimum", Double.toString(yMin));
  props.put("yAxis/maximum", Double.toString(yMax));
  props.put("yAxis/ticLabelFormat", "%1.3f");
  props.put("yAxis/axisLabel", "");
  props.put("yAxis/axisLength", "0.8");
  CartesianCoordinateSystem cs = new CartesianCoordinateSystem(
                new ConfigParameters(new PropertiesBasedConfigData(props)));