Rubber Banding : AWT Drawing – Part 5

1. What is Rubber Banding in Drawing?

Rubber Banding is a technique to track the drawing while user is dragging the mouse. Say, for example, you have a rubber band cut from its circular shape as a line. Hold one end of a rubber band between left thumb and left index finger and hold other end between thumb and index finger of right hand. Now, keeping your left-hand stand still, move the other end of the rubber band on your right hand. You can see a line stretching. While drawing this aid the user to see how their drawing primitive (Say Line, Rectangle, circle) looks while they still drag the mouse.

In this example, we will use this rubber banding technique to draw line and rectangle. The user should first place a check mark on the rubber band checkbox and then pick either line or rectangle as drawing mode. Now, we will proceed with the example.

2. Use Mouse Drag to Track Drawing

In the mouseDragged handler, we set the color of the Graphics object to light Gray. Then, we set the second AWT Point instance with the value which is coming as part of the MouseEvent argument. Then, we call paint method to connect the First Point which was stored during the mouse press and the second point which we retrieved here.

3. Rubber Banding Issue

Now, when we draw the line with Rubber-banding turned on, we get multiple lines. Here, the lines are connecting the fixed start point with the variable number of endpoints which is encountered as part of the current mouse position. The below picture shows how it looks like:

Rubber Banding Issue - AWT Line Drawing
Rubber Banding Issue – AWT Line Drawing

If we try the rubber stretch for the rectangle, the same issue will exist. To avoid this, we should erase the previous line. If it is a rectangle, we must erase the previous rectangle.

4. Resolve Rubber Banding Issue – setXORMode

4.1 The setXORMode API

Java Graphics API function setXORMode will help in resolving the issue for us. Once we set this mode, the drawing will invert the pixels between the background and foreground color. For Example, let us say the background is in white and foreground drawing is in Gray color. When we draw a line between P1 and P2 for the first time, the line will be drawn in gray color. It is because the pixels in the straight path between P1 & P2 are in white. Now, if we draw the line again between P1 and P2, the pixels in the path are in Gray color. The AWT setXORMode will invert the pixels, or we can say it draws the line in white color there by erasing the Gray color line which already exists on the path P1-P2.

4.2 Rubber Banding of Line

Now our Line drawing for Rubber-Banding goes like this:

In the above code, first we set the XOR Mode via setXORMode function call. Then we draw two lines. First line connects Fixed P1 with the P2 of the previous drag event. So it erases the gray line drawn as part of previous drag event. The call to paint method draws the next line between P1 and P2. Here, P1 is fixed and P2 is from the current drag location. Because of XOR mode, the second line will show in gray color as it has the underlying pixels in white color. Note: Once user releases the mouse button, we will draw the line in black color.

4.3 Rubber Banding of Rectangle

The technique is same for the rectangle drawing as well. In the below picture, P1, P2 denotes the finalized position for the drawing the Rectangle. The point P2a and P2b are reported by AWT Event system while dragging the mouse. The user can see how the rectangle looks when they drag the mouse. This is the usage of performing rubber banding while drawing shapes like Line, rectangle, Circle, etc.

Rubber Banding - XOR Mode
Rubber Banding – XOR Mode

Code for the rectangle rubber banding is below:

5. AWT Drawing Part 5: Rubber-Banding – Youtube Video

6. Complete Coding from All 5 Parts

FrameWin.java

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.