TGI App
In this section, you will learn how to write your first TGI application step by step. We will create a Web application and draw a few simple objects, such as lines, rectangles, and ellipses, using the graphics object.
Here are the steps:
- Creating a web page
- Adding the canvas javascript file to your web page
- Creation of drawing surface
- Drawing and filling shapes
Creating a Web Page
Because TGI is a javascript library, we need to use it in an environment that provides javascript runtime. The most simple and common environment is web pages to provide this. The following code is a simple example of a web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First TGI Application</title>
</head>
<body></body>
</html>
Adding Tuval Javascript Reference to Your Web Page
There are several ways to add TGI to your webpage. Here we will add the most simple way using the classic script tag over the CDN.
<script src="https://unpkg.com/tuval@latest/tuval.js"></script>
As you can see above, you can start using the TGI code by just adding this script reference to your page. The final version of our application is as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First TGI Application</title>
<script src="https://unpkg.com/tuval@latest/tuval.js"></script>
</head>
<body></body>
</html>
Creating a Drawing Surface
We need a drawing surface to make drawings using TGI's objects. A drawing surface can point to different environments within HTML5. So it can be an HTML5 2d context or 3d contex or an svg structure. We'll make drawings with 2d context in this example. First, we create a graphics object. When creating this object, we also specify the width and height of the drawing surface.
var tg = new Tuval.Graphics(200, 200);
So we had a drawing surface with 2d context. Now it's time to draw something into it. Below is the entire code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First TGI Application</title>
<script src="https://unpkg.com/tuval@latest/tuval.js"></script>
</head>
<body>
<script>
var tg = new Tuval.Graphics(200, 200);
</script>
</body>
</html>
Creation of Brush and Pen
When you have a Graphics object, the next step is to decide what to draw on the surface. You may need one or more of three objects: pen, brush, or picture. In this section we will concentrate only on pens and brushes. The pictures will be discussed in the following sections. In TGI, the Pen and Brush classes represent a pen and brush, respectively. Brush class is an abstract class. This means that you cannot use this class directly, you can access this class through its derived classes. For example, SolidBrush can be used for a flat fill, while HatchBrush can be used for pattern fill. Pens are used when you need to draw lines, rectangles and curves. The brushes are used when you need to fill these shapes. The constructor of the Pen class takes the color and width of the pen as an argument. The following code creates a red pen with a width of three pixels and a black pen with one pixel width. The Pens class also provides static members, each of which represents a pen with a specific color.
var redPen = new Tuval.Pen(Tuval.Color.Red, 3);
var blackPen = Tuval.Pens.Black;
The SolidBrush class represents a flat brush in TGI. The constructor of this class receives a color object as an argument. The following code creates a flat green brush.
var greenBrush = new Tuval.SolidBrush(Tuval.Color.Green);
Drawing Shapes
When you have surface, pens, and / or brushes, you can draw lines, shapes, curves, or images. The Graphics class provides drawing and filling methods to draw and fill graph shapes, curves, or images. For example, the fillRectangle methods creates a filled color rectangle and drawRectangle draws the boundary of the specified rectangle with the specified pen. The drawing methods take a pen as the argument and the fill methods take a brush.
In the above section we have obtained our drawing surface with new Tuval.Graphics (200, 200). Now we will create a rectangle, two pencils and a solid brush. In the following code snippet, we call drawRectangle, fillEllipse, and drawLine. The drawRectangle method draws the boundaries of a rectangle, the fillEllipse method fills an ellipse with the specified brush object, and the drawLine method draws a line using the specified pen object.
var rect = new Tuval.RectangleF(20, 20, 100, 100);
var redPen = new Tuval.Pen(Tuval.Color.Red, 3);
var blackPen = Tuval.Pens.Black;
var greenBrush = new Tuval.SolidBrush(Tuval.Color.Green);
view.drawRectangle(redPen, rect);
view.fillEllipse(greenBrush, rect);
view.drawLine(blackPen, 0, 250, this.Width, 250);
view.fillEllipse(Tuval.Brushes.Blue, 70, 220, 30, 30);
view.fillEllipse(Tuval.Brushes.SkyBlue, 100, 210, 40, 40);
view.fillEllipse(Tuval.Brushes.Green, 140, 200, 50, 50);
view.fillEllipse(Tuval.Brushes.Yellow, 190, 190, 60, 60);
view.fillEllipse(Tuval.Brushes.Violet, 250, 180, 70, 70);
view.fillEllipse(Tuval.Brushes.Red, 320, 170, 80, 80);
Finally, by including the above code, we finalize our web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First TGI Application</title>
<script src="https://unpkg.com/tuval@latest/tuval.js"></script>
</head>
<body>
<script>
var tg = new Tuval.Graphics(250, 250);
var rect = new Tuval.RectangleF(20, 20, 100, 100);
var redPen = new Tuval.Pen(Tuval.Color.Red, 3);
var blackPen = Tuval.Pens.Black;
var greenBrush = new Tuval.SolidBrush(Tuval.Color.Green);
tg.drawRectangle(redPen, rect);
tg.fillEllipse(greenBrush, rect);
tg.drawLine(blackPen, 0, 250, this.Width, 250);
tg.fillEllipse(Tuval.Brushes.Blue, 70, 220, 30, 30);
tg.fillEllipse(Tuval.Brushes.SkyBlue, 100, 210, 40, 40);
tg.fillEllipse(Tuval.Brushes.Green, 140, 200, 50, 50);
tg.fillEllipse(Tuval.Brushes.Yellow, 190, 190, 60, 60);
tg.fillEllipse(Tuval.Brushes.Violet, 250, 180, 70, 70);
tg.fillEllipse(Tuval.Brushes.Red, 320, 170, 80, 80);
</script>
</body>
</html>
{% iframe https://jsfiddle.net/tuvalframework/h4860y2o/show %}