KineticJS: Select element by type -
i iteratively drawing circles using kineticjs , html5. i'd observe mousemove on circle , id of circle that's selected. know can select elements name or id, how can select elements type (circles)? code below, responds lastly circle (because it's lastly declared "circle"), i'm not sure how alter respond circles.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery.js" type="text/javascript"></script> <link rel="stylesheet" href="style.css" type="text/css"> </head> <div id="container"></div> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script> <script> var startx = 200; var starty = 100; var radius = 10; var stage = new kinetic.stage({ container: 'container', width:400, height:500 }); for(i=0; i<10; i++){ window['circle'+i]; } var layer = new kinetic.layer(); (i=0; i<10;i++){ var circle = new kinetic.circle({ x: startx, y: starty, radius: radius, fill: '#cccccc', stroke: '#999', strokewidth: 4, name: 'step'+i }); layer.add(circle); var stepname = new kinetic.text({ x: startx + radius*2.5, y: starty-7.5, text: "circle"+i, fontsize: 15, fontfamily: 'calibri', fill: 'black' }); layer.add(stepname); stage.add(layer); starty = starty + radius*3.5; } circle.on('mousemove', function(){ var shapename = this.getname(); console.log(shapename); }) </script> </body> </html>
i solved setting name of circle elements 'circle' , did
var shapes = stage.get('.circle') for(i=0;i<shapes.length;i++){ console.log(shapes[i].getid()); } kineticjs
No comments:
Post a Comment