Post
Ask Question

Draw Polygon In TypeScript

Draw Polygon In TypeScript 

 
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_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, CSS file, and aspx page.
 
solution-explorer.jpg
 

Coding

 
Draw_Polygon.ts
  1. class Draw_Ploygon {  
  2.  Polygon() {  
  3.   var stage = new Kinetic.Stage({  
  4.    container: 'content'  
  5.   });  
  6.   var layer = new Kinetic.Layer();  
  7.   var poly = new Kinetic.Polygon({  
  8.    points: [53, 192, 73, 160, 340, 23, 400, 109, 299, 139, 342, 93],  
  9.    fill: 'green',  
  10.    stroke: 'black',  
  11.    strokeWidth: 5  
  12.   });  
  13.   layer.add(poly);  
  14.   stage.add(layer);  
  15.  }  
  16. }  
  17. window.onload = () => {  
  18.  var obj = new Draw_Ploygon();  
  19.  obj.Polygon();  
  20. }  
Draw_Polygon_Demo.html
  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head id="Head1" runat="server">  
  5.         <title></title>  
  6.         <script src="Draw_Ploygon.js"></script>  
  7.         <script src="Kinetic.min.js" type="text/javascript"></script>  
  8.         <style type="text/css"> 
  9.         #content {  
  10.             height: 368px;  
  11.             width:600px;  
  12.         }  
  13.     </style>  
  14.     </head>  
  15.     <body>  
  16.         <form id="form1" runat="server">  
  17.             <div>  
  18.                 <h3>Polygon In TypeScript Using Web Application</h3>  
  19.                 <div id="content"></div>  
  20.             </div>  
  21.         </form>  
  22.     </body>  
  23. </html>  
Draw_Polygon.js
  1. var Draw_Ploygon = (function() {  
  2.  function Draw_Ploygon() {}  
  3.  Draw_Ploygon.prototype.Polygon = function() {  
  4.   var stage = new Kinetic.Stage({  
  5.    container: 'content'  
  6.   });  
  7.   var layer = new Kinetic.Layer();  
  8.   var poly = new Kinetic.Polygon({  
  9.    points: [53, 192, 73, 160, 340, 23, 400, 109, 299, 139, 342, 93],  
  10.    fill: 'green',  
  11.    stroke: 'black',  
  12.    strokeWidth: 5  
  13.   });  
  14.   layer.add(poly);  
  15.   stage.add(layer);  
  16.  };  
  17.  return Draw_Ploygon;  
  18. })();  
  19. window.onload = function() {  
  20.  var obj = new Draw_Ploygon();  
  21.  obj.Polygon();  
  22. };  
Output   
 
polygon.jpg
 
For more information, download the attached sample application.


Similar Articles