Post
Ask Question

Draw Line Using Web Application In TypeScript

Draw Line Using Web Application In TypeScript 

 
In this article, we draw a line using a web application in 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 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
  1. class Draw_Line {  
  2.  Line() {  
  3.   var stage = new Kinetic.Stage({  
  4.    container: 'content',  
  5.    width: 578,  
  6.    height: 200  
  7.   });  
  8.   var layer = new Kinetic.Layer();  
  9.   var redLine = new Kinetic.Line({  
  10.    points: [73, 70, 340, 23, 450, 60, 500, 20],  
  11.    stroke: '#339966',  
  12.    strokeWidth: 15,  
  13.    lineCap: 'round',  
  14.    lineJoin: 'round'  
  15.   });  
  16.   var greenLine = new Kinetic.Line({  
  17.    points: [73, 70, 340, 23, 450, 60, 500, 20],  
  18.    stroke: '#3333FF',  
  19.    strokeWidth: 2,  
  20.    lineJoin: 'round',  
  21.    dashArray: [33, 10]  
  22.   });  
  23.   var blueLine = new Kinetic.Line({  
  24.    points: [73, 70, 340, 23, 450, 60, 500, 20],  
  25.    stroke: '#993333',  
  26.    strokeWidth: 10,  
  27.    lineCap: 'round',  
  28.    lineJoin: 'round',  
  29.    dashArray: [29, 20, 0.001, 20]  
  30.   });  
  31.   greenLine.move(0, 5);  
  32.   blueLine.move(0, 55);  
  33.   redLine.move(0, 105);  
  34.   layer.add(redLine);  
  35.   layer.add(greenLine);  
  36.   layer.add(blueLine);  
  37.   stage.add(layer);  
  38.  }  
  39. }  
  40. window.onload = () => {  
  41.  var obj = new Draw_Line();  
  42.  obj.Line();  
  43. };  
Draw_Line_Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Draw_Line_Demo.aspx.cs" Inherits="Draw_Line.Draw_Line_Demo" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head id="Head1" runat="server">  
  6.         <title></title>  
  7.         <script src="Line.js"></script>  
  8.         <script src="Kinetic.min.js" type="text/javascript"></script>  
  9.     </head>  
  10.     <body>  
  11.         <form id="form1" runat="server">  
  12.             <div>  
  13.                 <h3>Line In TypeScript Using Web Application</h3>  
  14.                 <div id="content"></div>  
  15.             </div>  
  16.         </form>  
  17.     </body>  
  18. </html>  
Line.js
  1. var Draw_Line = (function() {  
  2.  function Draw_Line() {}  
  3.  Draw_Line.prototype.Line = function() {  
  4.   var stage = new Kinetic.Stage({  
  5.    container: 'content',  
  6.    width: 578,  
  7.    height: 200  
  8.   });  
  9.   var layer = new Kinetic.Layer();  
  10.   var redLine = new Kinetic.Line({  
  11.    points: [73, 70, 340, 23, 450, 60, 500, 20],  
  12.    stroke: '#339966',  
  13.    strokeWidth: 15,  
  14.    lineCap: 'round',  
  15.    lineJoin: 'round'  
  16.   });  
  17.   var greenLine = new Kinetic.Line({  
  18.    points: [73, 70, 340, 23, 450, 60, 500, 20],  
  19.    stroke: '#3333FF',  
  20.    strokeWidth: 2,  
  21.    lineJoin: 'round',  
  22.    dashArray: [33, 10]  
  23.   });  
  24.   var blueLine = new Kinetic.Line({  
  25.    points: [73, 70, 340, 23, 450, 60, 500, 20],  
  26.    stroke: '#993333',  
  27.    strokeWidth: 10,  
  28.    lineCap: 'round',  
  29.    lineJoin: 'round',  
  30.    dashArray: [29, 20, 0.001, 20]  
  31.   });  
  32.   greenLine.move(0, 5);  
  33.   blueLine.move(0, 55);  
  34.   redLine.move(0, 105);  
  35.   layer.add(redLine);  
  36.   layer.add(greenLine);  
  37.   layer.add(blueLine);  
  38.   stage.add(layer);  
  39.  };  
  40.  return Draw_Line;  
  41. })();  
  42. window.onload = function() {  
  43.  var obj = new Draw_Line();  
  44.  obj.Line();  
  45. };  
Output 
 
result.jpg
 
For more information, download the attached sample application.


Similar Articles