Post
Ask Question

Draw Regular Polygon In TypeScript

Introduction 

 
In this article, we draw a polygon in a web application using TypeScript.
 
First, we download some files in the following attachment:
  1. Kinect.d.ts
  2. Kinectic.min.js
These files 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_Regular_Polygon" 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.
 
window-explorer.jpg
 

Coding

 
Regular_Polygon.ts
  1. /// <reference path="Kinect.d.ts" />  
  2. class Regular_Ploygon  
  3. {  
  4.  R_Polygon()  
  5.  {  
  6.   var stage = new Kinetic.Stage({  
  7.    container: 'content',  
  8.    width: 350,  
  9.    height: 200  
  10.   });  
  11.   var layer = new Kinetic.Layer();  
  12.   var r_polygon = new Kinetic.RegularPolygon({  
  13.    x: stage.getWidth() / 2,  
  14.    y: stage.getHeight() / 2,  
  15.    sides: 6,  
  16.    radius: 90,  
  17.    fill: 'green',  
  18.    stroke: 'black',  
  19.    strokeWidth: 4  
  20.   });  
  21.   layer.add(r_polygon);  
  22.   stage.add(layer);  
  23.  }  
  24. }  
  25. window.onload = () =>  
  26.  {  
  27.   var obj = new Regular_Ploygon();  
  28.   obj.R_Polygon();  
  29.  }  
Regular_Polygon_Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Regular_Polygon_Demo.aspx.cs" Inherits="Draw_Regular_Polygon.Regular_Polygon_Demo" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head id="Head1" runat="server">  
  6.         <title></title>  
  7.         <script src="Regular_Polygon.js"></script>  
  8.         <script src="Kinetic.min.js" type="text/javascript"></script>  
  9.     </head>  
  10.     <body>  
  11.         <form id="form1" runat="server">  
  12.             <div>  
  13.                 <h3>Regular Polygon In TypeScript Using Web Application</h3>  
  14.                 <div id="content"></div>  
  15.             </div>  
  16.         </form>  
  17.     </body>  
  18. </html>  
Regular_Polygon.js
  1. var Regular_Ploygon = (function() {  
  2.  function Regular_Ploygon() {}  
  3.  Regular_Ploygon.prototype.R_Polygon = function() {  
  4.   var stage = new Kinetic.Stage({  
  5.    container: 'content',  
  6.    width: 350,  
  7.    height: 200  
  8.   });  
  9.   var layer = new Kinetic.Layer();  
  10.   var r_polygon = new Kinetic.RegularPolygon({  
  11.    x: stage.getWidth() / 2,  
  12.    y: stage.getHeight() / 2,  
  13.    sides: 6,  
  14.    radius: 90,  
  15.    fill: 'green',  
  16.    stroke: 'black',  
  17.    strokeWidth: 4  
  18.   });  
  19.   layer.add(r_polygon);  
  20.   stage.add(layer);  
  21.  };  
  22.  return Regular_Ploygon;  
  23. })();  
  24. window.onload = function() {  
  25.  var obj = new Regular_Ploygon();  
  26.  obj.R_Polygon();  
  27. };  
Output   
 
image.jpg
 
For more information, download the attached sample application.


Similar Articles