Post
Ask Question

Label in HTML5

Introduction

 
This article provides a sample of drawing a Label in HTML.
 
First, we download the file in the following attachment:
  1. Kinectic_beta.js
This file is then added to the project, then use the following procedure.
 
Step 1
 
Open Visual Studio 2010 and click "File" -> "New" -> "Website...". A window is opened. In this window, give the name of your application as "Label" and then click "Ok".
 
Step 2
 
Add the "kinetic_beta.js" file. The project will have then been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the js file and HTML files.
 
 
solution.jpg
 
Coding
 
Label.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <style type="text/css">  
  5.         #container {  
  6.             height: 361px;  
  7.         }  
  8.     </style>  
  9.     <title></title>    
  10. </head>  
  11. <body>  
  12. <h3>        Label in HTML5 </h3>  
  13.   <div id="container"></div>  
  14.     <script src="Kinetic_beta.js" type="text/javascript"></script>  
  15.     <script>  
  16.       var stage = new Kinetic.Stage({  
  17.         container: 'container',  
  18.         width: 478,  
  19.         height: 800  
  20.       });  
  21.    
  22.       var layer = new Kinetic.Layer();  
  23.    
  24.       var tooltip = new Kinetic.Label({  
  25.         x: 170,  
  26.         y: 75,  
  27.         opacity: 0.75,  
  28.         listening: false,  
  29.         text: {  
  30.           text: 'Tooltip pointing down',  
  31.           fontFamily: 'Calibri',  
  32.           fontSize: 18,  
  33.           padding: 5,  
  34.           fill: 'Black'  
  35.         },  
  36.         rect: {  
  37.           fill: '#CCCCFF',  
  38.           pointerDirection: 'down',  
  39.           pointerWidth: 10,  
  40.           pointerHeight: 10,  
  41.           lineJoin: 'round',  
  42.           shadowColor: 'black',  
  43.           shadowBlur: 10,  
  44.           shadowOffset: 10,  
  45.           shadowOpacity: 0.5  
  46.         }  
  47.       });  
  48.        
  49.       var labelLeft = new Kinetic.Label({  
  50.         x: 195,  
  51.         y: 130,  
  52.         opacity: 0.75,  
  53.         listening: false,  
  54.         text: {  
  55.           text: 'Label pointing left',  
  56.           fontFamily: 'Calibri',  
  57.           fontSize: 18,  
  58.           padding: 5,  
  59.           fill: 'white'  
  60.         },  
  61.         rect: {  
  62.           fill: 'green',  
  63.           pointerDirection: 'left',  
  64.           pointerWidth: 20,  
  65.           pointerHeight: 28,  
  66.           lineJoin: 'round',  
  67.         }  
  68.       });  
  69.        
  70.       var simpleLabel = new Kinetic.Label({  
  71.         x: 350,  
  72.         y: 50,  
  73.         opacity: 0.75,  
  74.         text: {  
  75.           text: 'Simple label',  
  76.           fontFamily: 'Calibri',  
  77.           fontSize: 18,  
  78.           padding: 5,  
  79.           fill: 'black'  
  80.         },  
  81.         rect: {  
  82.           fill: '#0099CC',  
  83.         }  
  84.       });  
  85.    
  86.       // add the shape to the layer  
  87.       layer.add(tooltip).add(labelLeft).add(simpleLabel);  
  88.    
  89.       // add the layer to the stage  
  90.       stage.add(layer);  
  91.     </script>  
  92. </body>  
  93. </html> 
Output  
 
output.jpg
 
For more information, download the attached sample application.


Similar Articles