javascript - KineticJS - Cannot add dynamic object -
i need create kind of container manage dynamic actions kineticjs.
i have simple object able add circle using function.
here's code:
function stage() { var self = this; self.stage = new kinetic.stage({ container: "museummapcontainer", width: 500, height: 500 }); self.layer = new kinetic.layer(); self.addcircle = function (x,y) { var circle = new kinetic.circle({ x: x, y: y, radius: 40, fill: 'red', stroke: 'black', strokewidth: 4, draggable: true }); circle.on('mouseover', function() { document.body.style.cursor = 'pointer'; }); circle.on('mouseout', function() { document.body.style.cursor = 'default'; }); self.layer.add(circle); } self.stage.add(self.layer); } stage = new stage(); stage.addcircle(250,250);
normally, if don't put code inside function, can create circle without problems. however, code doesn't work , don't know why.
here's plunker: http://plnkr.co/edit/e1fbcfmezwgnakhsarhm?p=preview
there no errors in console , nothing showing , don't know why...
make sure layer.draw after creating new circles:
<!doctype html> <html> <head> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> </head> <body> <h1>hello plunker!</h1> <div id="museummapcontainer" style="width:500px;height:500px;border:1px solid black;"></div> <script defer="defer"> function stage() { var self = this; self.stage = new kinetic.stage({ container: "museummapcontainer", width: 500, height: 500 }); self.layer = new kinetic.layer(); self.stage.add(self.layer); self.addcircle = function (x,y) { var circle = new kinetic.circle({ x: x, y: y, radius: 40, fill: 'red', stroke: 'black', strokewidth: 4, draggable: true }); circle.on('mouseover', function() { document.body.style.cursor = 'pointer'; }); circle.on('mouseout', function() { document.body.style.cursor = 'default'; }); self.layer.add(circle); self.layer.draw(); } } stage = new stage(); stage.addcircle(250,250); </script> </body> </html>
Comments
Post a Comment