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. });
  22. var layer = new Kinetic.Layer();
  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. });
  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. });
  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. });
  86. // add the shape to the layer
  87. layer.add(tooltip).add(labelLeft).add(simpleLabel);
  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.