Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Jan 4th, 2013  |  syntax: None  |  size: 1.76 KB  |  views: 18  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. for (var i = 0; i < points.length;i++){        
  2.  
  3.             var circle = new Kinetic.Circle({
  4.                 x: points[i].x,
  5.                 y: points[i].y,
  6.                 radius: 7,
  7.                 fill: "green",
  8.                 stroke: "black",
  9.                 name:i,
  10.                 strokeWidth: 2
  11.             });
  12.  
  13.             circle.on("click", function() {
  14.                 alert(name); //here I want to get name of circle
  15.             });
  16.  
  17.             layer.add(circle);                                              
  18.         }
  19.        
  20. <!DOCTYPE HTML>
  21. <html>
  22. <head>
  23.     <style>
  24.         body
  25.         {
  26.             margin: 0px;
  27.             padding: 0px;
  28.         }
  29.     </style>
  30. </head>
  31. <body onload="displaycircle()">
  32.     <div id="container">
  33.     </div>
  34.     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
  35.     <script>
  36.         function displaycircle() {
  37.             var stage = new Kinetic.Stage({
  38.                 container: 'container',
  39.                 width: 578,
  40.                 height: 200
  41.             });
  42.             var layer = new Kinetic.Layer();
  43.             for (var i = 0; i < 10; i++) {
  44.                var circle = new Kinetic.Circle({
  45.                     x: Math.random() * stage.getWidth(),
  46.                     y: Math.random() * stage.getHeight(),
  47.                     radius: 30,
  48.                     fill: "green",
  49.                     stroke: "black",
  50.                     name: i,
  51.                     strokeWidth: 2,
  52.                     draggable: true
  53.                 });
  54.                 layer.add(circle);
  55.                 stage.add(layer);
  56.                 circle.on("click", function() {
  57.                     alert(this.attrs.name); //here you can get name of circle
  58.                 });
  59.             }
  60.         }
  61.     </script>
  62.  
  63. </body>
  64. </html>