In this article, we draw a line using a web application in TypeScript.
First we download some files in the following attachment:
-
Kinect.d.ts
-
Kinectic.min.js
These file are added to the project then the following procedure is used.
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_Line" 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.
![solution-explorer.jpg]()
Coding
Line.ts
/// <reference path="Kinect.d.ts" />
class Draw_Line
{
Line()
{
var stage = new Kinetic.Stage({
container: 'content',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redLine = new Kinetic.Line({
points: [73, 70, 340, 23, 450, 60, 500, 20],
stroke: '#339966',
strokeWidth: 15,
lineCap: 'round',
lineJoin: 'round'
});
// dashed line
var greenLine = new Kinetic.Line({
points: [73, 70, 340, 23, 450, 60, 500, 20],
stroke: '#3333FF',
strokeWidth: 2,
lineJoin: 'round',
dashArray: [33, 10]
});
// complex dashed and dotted line
var blueLine = new Kinetic.Line({
points: [73, 70, 340, 23, 450, 60, 500, 20],
stroke: '#993333',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
dashArray: [29, 20, 0.001, 20]
});
greenLine.move(0, 5);
blueLine.move(0, 55);
redLine.move(0, 105);
layer.add(redLine);
layer.add(greenLine);
layer.add(blueLine);
stage.add(layer);
}
}
window.onload = () =>
{
var obj = new Draw_Line();
obj.Line();
};
Draw_Line_Demo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Draw_Line_Demo.aspx.cs" Inherits="Draw_Line.Draw_Line_Demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Line.js"></script>
<script src="Kinetic.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Line In TypeScript Using Web Application</h3>
<div id="content"></div>
</div>
</form>
</body>
</html>
Line.js
/// <reference path="Kinect.d.ts" />
var Draw_Line = (function () {
function Draw_Line() { }
Draw_Line.prototype.Line = function () {
var stage = new Kinetic.Stage({
container: 'content',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redLine = new Kinetic.Line({
points: [
73,
70,
340,
23,
450,
60,
500,
20
],
stroke: '#339966',
strokeWidth: 15,
lineCap: 'round',
lineJoin: 'round'
});
// dashed line
var greenLine = new Kinetic.Line({
points: [
73,
70,
340,
23,
450,
60,
500,
20
],
stroke: '#3333FF',
strokeWidth: 2,
lineJoin: 'round',
dashArray: [
33,
10
]
});
// complex dashed and dotted line
var blueLine = new Kinetic.Line({
points: [
73,
70,
340,
23,
450,
60,
500,
20
],
stroke: '#993333',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
dashArray: [
29,
20,
0.001,
20
]
});
greenLine.move(0, 5);
blueLine.move(0, 55);
redLine.move(0, 105);
layer.add(redLine);
layer.add(greenLine);
layer.add(blueLine);
stage.add(layer);
};
return Draw_Line;
})();
window.onload = function () {
var obj = new Draw_Line();
obj.Line();
};
//@ sourceMappingURL=Line.js.map
Output
![result.jpg]()
For more information, download the attached sample application.