Draw Circle Using Web Application In TypeScript

In this article I will explain how to draw a circle in a web application using TypeScript.

In this article, we draw a circle in a web application using TypeScript.

First we download some files in the following attachment:

  1. Kinect.d.ts

  2. Kinectic.min.js

These file are added to the project then use the following procedure:

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give the name of your application as "Draw_Circle" and then click "Ok".

Step 2

After this session the project has been created; A new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css file and aspx page.


 solution-explorer.jpg


Coding

app.ts

/// <reference path="Kinect.d.ts" />

class Draw_Circle

{

    Circle()

    {

        var stage = new Kinetic.Stage({container: 'content',width: 250,height: 200});

        var layer = new Kinetic.Layer();

        var circle = new Kinetic.Circle({

            x: stage.getWidth() / 2,

            y: stage.getHeight() / 2,

            radius: 70,

            fill: 'blue',

            stroke: 'black',

            strokeWidth: 4,

        });

        layer.add(circle);

        stage.add(layer);

    }

}

window.onload = () =>

{

    var obj = new Draw_Circle();

    obj.Circle();

};

 

Image_Animation_Demo.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Draw_Circle_Demo.aspx.cs" Inherits="Draw_Circle.Draw_Circle_Demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <script src="app.js"></script>

    <script src="Kinetic.min.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <h3>Circle In TypeScript Using Web Application</h3>

        <div id="content"></div>

    </div>

    </form>

</body>

</html>

 

app.js

 

/// <reference path="Kinect.d.ts" />

var Draw_Circle = (function () {

    function Draw_Circle() { }

    Draw_Circle.prototype.Circle = function () {

        var stage = new Kinetic.Stage({

            container: 'content',

            width: 250,

            height: 200

        });

        var layer = new Kinetic.Layer();

        var circle = new Kinetic.Circle({

            x: stage.getWidth() / 2,

            y: stage.getHeight() / 2,

            radius: 70,

            fill: 'blue',

            stroke: 'black',

            strokeWidth: 4

        });

        layer.add(circle);

        stage.add(layer);

    };

    return Draw_Circle;

})();

window.onload = function () {

    var obj = new Draw_Circle();

    obj.Circle();

};

//@ sourceMappingURL=app.js.map

 

Output 


Image.jpg