Understanding Tuval Graphics

With the simplest definition of Tuval Tuval Graphic Interface (TGI), is a javascript library that wraps different drawing surfaces such as Canvas 2D Context, WebGL, or SVG for making basic drawing functions simpler and more structured. Besides, it provides some helper objects (PointF, RectangleF, Color, Vector) to provide ease and flexibility in your applications. The following code most simply draws a line to the screen.

Example

const tg = new Tuval.Graphics(200,200);
tg.drawLine(Tuval.Pens.Green, 20, 20, 200, 200);

As you can see, it's so easy to draw something on the screen. With just two lines of code, we could draw something on the screen. The above code first creates a drawing surface of 200 x 200 pixels. Then draws a line to this surface from (20, 20) point to (200, 200) point with a predefined green pen. The line thickness is 1 pixel, which is the default value. {% iframe https://jsfiddle.net/tuvalframework/quezn719/show %}

In this section we introduce to Tuval Graphics. Firstly, before you start writing a graphical application, we will talk about the theoretical aspects of Tuval Graphics.

• What is Tuval Graphics ?
• How to define ?
• How to use in your application ?
• What is new in Tuval Graphics ?
• TGI ve klasik yöntemler arasındaki farklılıklar nelerdir?
• TGI içerisinde hangi nesneler bulunmaktadır?

If you want to write efficient and optimized graphics applications, it is important to understand the TGI class library. In this section, we will talk about how TGI can be used in javascript applications.

What is Tuval Graphic Interface?

Tuval Graphics Interface (TGI) is a software library that focuses on vectoral drawings in the Tuval Framework. All graphics applications require a drawing surface, whether for web environment or desktop environments. TGI allows you to draw on different surfaces with the same standard api by eliminating the differences of the surfaces you are going to draw. The following image refers to this.

How to Define TGI?

• Tuval.Graphics, web uygulamanız ile vectorel çizimlerin yapılacağı ortam arasına oturan bir bileşendir. TGI is a component that sits between your web application and the environment in which the vector drawings will be made. The commands that you export from TGI are converted into a form that the relevant environment understands.
• TGI is the name given to the whole of javascript objects produced by typescript. In this document, we will use the shorter TGI expression rather than the Tuval Graphics Interface statement.

This document will usually be used with TGI typescript and javascript examples.