js editor
Web development
File: ...\Samples\Solution\Forms\Graphics\Anim.scx
This sample illustrates drawing lines on a form. More specifically, it demonstrates saving coordinates of sets of lines drawn on a form and redrawing them, along with additional lines at intermediate positions, giving the illusion of motion.
Adding Lines to the Table
Each time a user draws a line on the form, its coordinates are stored in a table with the following structure:
| Name | Type | Description |
|---|---|---|
|
Frameno |
I |
Incremented each time the user chooses New Frame. |
|
Objno |
I |
Incremented each time a line is added to a frame. |
|
X1 |
I |
The starting X coordinate for a line. |
|
X2 |
I |
The ending X coordinate for a line. |
|
Y1 |
I |
The starting Y coordinate for a line |
|
Y2 |
I |
The ending Y coordinate for a line. |
Playing the Frames
The following code plays the frames, uses the table again in another work area, selects the second work area, and goes to the next frame:
| В |  Copy Code |
|---|---|
USE (lcTable) AGAIN IN 0 ALIAS shadow SELECT shadow LOCATE FOR frameno # &lcTable..frameno | |
The variable nBetween determines how many intermediate lines are drawn on the form between a line in one frame and the corresponding line in the next frame.
| В | Copy Code |
|---|---|
FOR nb = 1 TO nBetween | |
Inside the FOR loop, the code scans for all of the lines associated with a frame and calculates coordinates for the intermediate lines, for example:
| В | Copy Code |
|---|---|
nx1 = frames.x1 + nb * (shadow.x1 - frames.x1) / nBetween ny1 = frames.y1 + nb * (shadow.y1 - frames.y1) / nBetween | |
The code then prints each intermediate line, and after a WAIT of .05 seconds clears the form and continues the loop.
| В | Copy Code |
|---|---|
THISFORMSET.frmAnimation.line(nx1,ny1,nx2,ny2) | |