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:

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_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.

Coding

Draw_Polygon.ts

class Draw_Ploygon {
Polygon() {
var stage = new Kinetic.Stage({
container: 'content'
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.Polygon({
points: [53, 192, 73, 160, 340, 23, 400, 109, 299, 139, 342, 93],
fill: 'green',
stroke: 'black',
strokeWidth: 5
});
layer.add(poly);
stage.add(layer);
}
}
window.onload = () => {
var obj = new Draw_Ploygon();
obj.Polygon();
}

Draw_Polygon_Demo.html

<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Draw_Ploygon.js"></script>
<script src="Kinetic.min.js" type="text/javascript"></script>
<style type="text/css">
#content {
height: 368px;
width:600px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Polygon In TypeScript Using Web Application</h3>
<div id="content"></div>
</div>
</form>
</body>
</html>

Draw_Polygon.js

var Draw_Ploygon = (function() {
function Draw_Ploygon() {}
Draw_Ploygon.prototype.Polygon = function() {
var stage = new Kinetic.Stage({
container: 'content'
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.Polygon({
points: [53, 192, 73, 160, 340, 23, 400, 109, 299, 139, 342, 93],
fill: 'green',
stroke: 'black',
strokeWidth: 5
});
layer.add(poly);
stage.add(layer);
};
return Draw_Ploygon;
})();
window.onload = function() {
var obj = new Draw_Ploygon();
obj.Polygon();
};

Output

For more information, download the attached sample application.

Draw Polygon In TypeScript

Reactions

Comments

Draw Polygon In TypeScript

Coding