Java Drawing DrawTop





 H. Jyounishi, Tokyo Japan

Frame (Index), No frame                 version:0.3(latest)  

Contents on this page: Download, Motivation, Implementation, Data exchange with other applications, References, Contact

1. Version up

Latest version version 0.3 =>Revision History

2. Download

The set of jar, src, images, sample draw file

=> ,

Contents Description
Contents of
the folders

drawdata0_1 folder ErrorRecods folder


This folder stores a part of the drawing data files used in the User's guide and test.

ErrorRecords This folder normally doesn't exist. If error messages are output from the System.err , this folder will be created and the error messages will be stored in Errorfile_yyyymmdd_hhmmss.txt. Here the yyyymmdd and hhmmss represents the date and time.


The image folder for buttons and other menu components.
Place this file in the same directory where DrawTop.jar is placed.

src The source code.


This file stores the directory of the drawing data file that you have opened or saved previously. Place this file in the same directory where DrawTop.jar is placed.


Shape component library file.
Place this file in the same directory where DrawTop.jar is placed.


Runnable module. X-Y is a version number. and yyyymmdd is a release date.

• Execution

Download and decompress it, then double-click DrawTopX-Y.jar for start.
After started, click the "open" button on the Home tab and select a sample draw file in drawFileVer0.1, then you can see the sample drawings which are used in the User's guide. You can change the page by clicking , button, and of course you can manipulate shape objects on the screen.

Available OS Windows XP, Vista, Win7

• Trouble with Windows 7

Double-clicking the .jar file gives the error message: "Could not find the main class:", and unable to run any Java executable jar files.
Repair=>Executing jar file on Windows 7

3. Motivation return=>page top

The purpose of this section is to describe the specification of a compact drawing tool prototype which is a small application and written for Java programming training. The size of the code is about 35,000 lines excluding blank and comment lines. The usability of the prototype is nearly equals to those of the well-known products and it supports the basic and commonly used capabilities which can be referred in the "Table of contents" on the left frame. Despite greatly improved CPU performance, the current drawing tools have not improved dramatically from the MacDraw. So, we examined what can be achieved by using the abundant CPU power. For instance, the following functions can significantly reduce the amount of the work to draw diagrams, flow charts etc.

(1) Auto align

The auto align capability controls the operation of a moving or resizing a selected shape. If the selected shape is being moved or resized by dragging with the mouse and the selected shape happens to be aligned with a neighboring shape within a given error margin, the auto_align capability will draw a red dashed line between the two shapes. And if the mouse button is released at this moment, then the selected shape will be aligned forcibly with the neighboring shape within round-off error (Auto align, Examples-1).

(2) Connection point and connector

When you create, move or resize a shape and you move the mouse to the shape's boundary, theormark will be displayed. The mark suggests that the mouse position is very close to the shape's boundary or the characteristic points of the shape. At this time, if you start or stop dragging the mouse, you can define the start point or end point of a line(curve) on the shape's boundary within round-off error (Selecting a point on a shape). This function is very useful in order to create a connector. It is not necessary to create a connection point beforehand, and can connect anywhere on the boundary of a shape.

(3) New type of connector

• A connector in this prototype can be connected to an arbitrary point on a shape's boundary, and any number of connectors can be connected to the shape's boundary (Connector, Examples-1).

• When you move or resize a shape, the connectors connecting to the shape also move their endpoints to keep their connection. At this time, the connectors can keeps their direction by sliding the connection points over the boundary of the shape (auto tracking option, auto tracking option: keep x/y direction).

• A connector can be connected with other connector. When a shape is moved or resized, all connectors connecting to the shape directly or indirectly also move their endpoints to keep their connection(Example 1.3).

Operation video of the above (1),(2) and (3)


To get to know the contents and usability of this prototype, you only have to download the files and click the jar file to start. You can test the prototype easily using the sample drawing file which was used in the user's guide. =>Download

4. Implementation return=>page top

(1) Mouse position monitor

It is very important for a drawing tool to know whether the mouse hits a shape object or not, and if the mouse hits a shape, where in the shape object the mouse is located. To perform these operations, It is necessary to calculate in real time whether or not the mouse hits any of shape objects whenever the mouse has been moved. Here "the mouse hits" implies that the mouse is located on a shape or the mouse is located very close to a shape boundary, and "a shape object" represents a shape element, a text area or a associated shape object (i.e. a selection box, resize handles, start and end points of a curve, segment junction points of a polyline/piecewise cubic curve, tangent line of a piecewise cubic curve and so on).
=>Specifications Mouse position monitor

If a shape is closed (its shape boundary is closed), it is easy to judge where in the shape the mouse is located, i.e. outside the shape, inside the shape or on the shape boundary. This case can be judged by the contains method of java.awt.Shape.
However the contains method is not enough for various operations. So we applied rather computationally intensive processing - intersection points calculation between two curves, the nearest point calculation from the mouse position to a curve and so on - to real time operation. To apply these calculations, it is convenient to represent the boundary curve of a shape by a parametric curve as follows.
See=> Specifications Geometric library

(2) Parametric line/curve

By using parametric curve, a point on the boundary of a shape can be expressed by the link to the shape and the parameter value on its boundary curve. This expression is very convenient because even if the shape is moved, resized or modified, the point expressed by the parameter value always lies on the boundary. This feature is very useful for simplifying the coding of the connector controller. To enable this, we extended java.awt.geom libraries to be able to handle parametric curve .
See=>Specifications Parametric curve

5. Data exchange with other applications return=>page top

This application has minimal capability which is available to creating HTML and so on.

Content Data exchange


Drawings From other applications After copying the drawings of other application, the images of the drawings can be pasted to this applications.
To other applications After copying drawings of this application, the images of the drawings can be pasted to other applications.
=>Editing shapes (cut/copy and paste)
Text From other applications After copying a text of other application, the text can be pasted to this application.
To other applications After copying a text of this application, the text can be pasted to to other application.

6. References return=>page top





Java examples (example source code) Organized by topic
A lot of examples whitch are short and easy to understand.


The Java Tutorials
The Swing Tutorial

7. Contact return=>page top

Bugs in the code, mistakes in the documentation and so on.

H. Jyounishi, Tokyo Japan

Copyright (c) 2009-2013
All other trademarks are property of their respective owners.