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.