In this article, we draw a polygon in a web application using TypeScript.
First we download some files in the following attachment:
-
Kinect.d.ts
-
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
/// <reference path="Kinect.d.ts" />
class Regular_Ploygon
{
R_Polygon()
{
var stage = new Kinetic.Stage({
container: 'content',
width: 350,
height: 200
});
var layer = new Kinetic.Layer();
var r_polygon = new Kinetic.RegularPolygon({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
sides: 6,
radius: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(r_polygon);
stage.add(layer);
}
}
window.onload = () =>
{
var obj = new Regular_Ploygon();
obj.R_Polygon();
}
Regular_Polygon_Demo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Regular_Polygon_Demo.aspx.cs" Inherits="Draw_Regular_Polygon.Regular_Polygon_Demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Regular_Polygon.js"></script>
<script src="Kinetic.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Regular Polygon In TypeScript Using Web Application</h3>
<div id="content"></div>
</div>
</form>
</body>
</html>
Regular_Polygon.js
/// <reference path="Kinect.d.ts" />
var Regular_Ploygon = (function () {
function Regular_Ploygon() { }
Regular_Ploygon.prototype.R_Polygon = function () {
var stage = new Kinetic.Stage({
container: 'content',
width: 350,
height: 200
});
var layer = new Kinetic.Layer();
var r_polygon = new Kinetic.RegularPolygon({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
sides: 6,
radius: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(r_polygon);
stage.add(layer);
};
return Regular_Ploygon;
})();
window.onload = function () {
var obj = new Regular_Ploygon();
obj.R_Polygon();
};
//@ sourceMappingURL=Regular_Polygon.js.map
Output
![image.jpg]()
For more information, download the attached sample application.