TypeScript

Draw Rectangle Using Web Application In TypeScript

Introduction 

 
In this article, we draw a rectangle 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#.
 
Provide the name of your application as "Draw_Rectangle" 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
 
Rectangle.ts
  1. class Draw_Rectangle {    
  2.  Rectangle() {    
  3.   var stage = new Kinetic.Stage({    
  4.    container: 'content'    
  5.   });    
  6.   var layer = new Kinetic.Layer();    
  7.   var rectangle = new Kinetic.Rect({    
  8.    width: 200,    
  9.    height: 200,    
  10.    cornerRadius: 5,    
  11.    fill: 'Blue',    
  12.    strokeWidth: 10,    
  13.    stroke: 'Black'    
  14.   });    
  15.   layer.add(rectangle);    
  16.   stage.add(layer);    
  17.  }    
  18. }    
  19. window.onload = () => {    
  20.  var obj = new Draw_Rectangle();    
  21.  obj.Rectangle();    
  22. };     
Rectangle_Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Rectangle_Demo.aspx.cs" Inherits="Draw_Rectangle.Rectangle_Demo" %>    
  2.  <    
  3.  !DOCTYPE html >    
  4.  <    
  5.  html xmlns = "http://www.w3.org/1999/xhtml" >    
  6.  <    
  7.  head id = "Head1"    
  8. runat = "server" >    
  9.  <    
  10.  title > < /title>    
  11.  <    
  12.  script src = "Rectangle.js" > < /script>    
  13.  <    
  14.  script src = "Kinetic.min.js"    
  15. type = "text/javascript" > < /script>    
  16.  <    
  17.  /head>    
  18.  <    
  19.  body >    
  20.  <    
  21.  form id = "form1"    
  22. runat = "server" >    
  23.  <    
  24.  div >    
  25.  <    
  26.  h3 > Rectangle In TypeScript Using Web Application < /h3>    
  27.  <    
  28.  div id = "content" > < /div>    
  29.  <    
  30.  /div>    
  31.  <    
  32.  /form>    
  33.  <    
  34.  /body>    
  35.  <    
  36.  /html>     
Rectangle.js
  1. var Draw_Rectangle = (function() {    
  2.  function Draw_Rectangle() {}    
  3.  Draw_Rectangle.prototype.Rectangle = function() {    
  4.   var stage = new Kinetic.Stage({    
  5.    container: 'content'    
  6.   });    
  7.   var layer = new Kinetic.Layer();    
  8.   var rectangle = new Kinetic.Rect({    
  9.    width: 200,    
  10.    height: 200,    
  11.    cornerRadius: 5,    
  12.    fill: 'Blue',    
  13.    strokeWidth: 10,    
  14.    stroke: 'Black'    
  15.   });    
  16.   layer.add(rectangle);    
  17.   stage.add(layer);    
  18.  };    
  19.  return Draw_Rectangle;    
  20. })();    
  21. window.onload = function() {    
  22.  var obj = new Draw_Rectangle();    
  23.  obj.Rectangle();    
  24. };     
Output
  
rectangle.jpg
 
For more information, download the attached sample application.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found