Home Examples Download User Guide Introduction Usage as a Library 2.1 Example: Animated Chart 2.2 Example: Lorenz Attractor 2.3 Example: Brusselator 2.4 Example: Zooming 2.5 Example: Off-Screen Image Creation Configuration Concept JCCKit's PlotApplet Extending JCCKit API documentation SourceForge project page | # 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: Translating device-dependent coordinates (cursor positions) into device-independent coordinates and data coordinates. Drawing an intermediate rectangle during dragging in order to show the window to zoom into. 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),
                              MARKER_ATTRIBUTES));
    }

    private void setMarker(GraphicalElement marker)
    {
      _plotCanvas.setMarker(marker);
      _plotCanvas.getGraphicsCanvas().repaint();
    }
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)));
      _plotCanvas.getPlot().setCoordinateSystem(cs);
    }
Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries. (C) 2003-2004 Franz-Josef Elmer. All rights reserved. Last modified: 7/3/2004