Select multiple custom objects on KineticJS and Javascript -
good evening everyone. create object on kineticjs has methods:
function addcelestial(cb){ this.celestialbody = new kinetic.circle({ id: cb.id, x:cb.x, y:cb.y, fill:cb.color, radius:cb.radius, shadowcolor: cb.glow, shadowblur: cb.glowblur, shadowoffset: 0, shadowopacity: cb.glowopacity }); this.xpos = function(value){ if (typeof value === "undefined") { return this.celestialbody.getx(); } else { this.celestialbody.setx(value); } }; this.ypos = function(value){ if (typeof value === "undefined") { return this.celestialbody.gety(); } else { this.celestialbody.sety(value); } }; this.xvel = function(value){ if (typeof value === "undefined") { return this.xvel_v; } else { this.xvel_v = value; } }; this.yvel = function(value){ if (typeof value === "undefined") { return this.yvel_v; } else { this.yvel_v = value; } }; this.xacc = function(value){ if (typeof value === "undefined") { return this.xacc_v; } else { this.xacc_v = value; } }; this.yacc = function(value){ if (typeof value === "undefined") { return this.yacc_v; } else { this.yacc_v = value; } }; this.mass = function(value){ if (typeof value === "undefined") { return this.mass_v; } else { this.mass_v = value; } }; this.radius = function(value){ if (typeof value === "undefined") { return this.celestialbody.getradius(); } else { this.celestialbody.setradius(value); } }; this.resetforce = function(){ this.xacc(0); this.yacc(0); }; this.calcnewstate = function(){ this.xvel(this.xvel() + this.xacc() * timestep); this.yvel(this.yvel() + this.yacc() * timestep); this.xpos(this.xpos() + timestep + this.xvel()); this.ypos(this.ypos() + timestep + this.yvel()); }; this.addforce = function(otherbody){ var radius = math.pow(math.pow(otherbody.ypos()-this.ypos(),2)+math.pow(otherbody.xpos()-this.xpos(),2),0.5); var gacc = otherbody.mass()/(math.pow(radius,2)); var angle = math.atan2((otherbody.ypos()-this.ypos()),(otherbody.xpos()-this.xpos())); this.xacc(this.xacc()+gacc*math.cos(angle)); this.yacc(this.yacc()+gacc*math.sin(angle)); }; this.logstatus = function(name){ console.log(name+' xpos:'+this.xpos()+' ypos'+this.ypos()+' xacc:'+this.xacc()+' yacc:'+this.yacc()+' xvel:'+this.xvel()+' yvel:'+this.yvel()); }; this.getchildren = function(){ return this; }; cb.layer.add(this.celestialbody);
}
then, create loop create objects:
for (var = 0; < 20;i++){ var asteroidid = 'asteroid' + i; var asteroid = new addcelestial({color: 'rgb(255,255,255)',layer:layer0, id: asteroidid}); asteroid.radius(1); asteroid.xpos((math.random()*300)+200); asteroid.ypos((math.random()*5)+document.height/2); asteroid.xvel(0); asteroid.yvel(-5); asteroid.mass(1000); asteroid.xacc(0); asteroid.yacc(0); }
i'm trying select 20 asteroids can run methods addforce, calcnewstate , resetforce fail miserably. can please help-me this?
you want give custom shapes name
this:
this.celestialbody = new kinetic.circle({ name: cb.name, // <-- works css class , can selected "." id: cb.id, x:cb.x, y:cb.y, fill:cb.color, radius:cb.radius, shadowcolor: cb.glow, shadowblur: cb.glowblur, shadowoffset: 0, shadowopacity: cb.glowopacity });
in case give custom shapes meaningful name groups shapes together, "asteroids" , add inside loop:
for (var = 0; < 20;i++){ var asteroidid = 'asteroid' + i; var name = 'asteroids'; var asteroid = new addcelestial({name: name, color: 'rgb(255,255,255)',layer:layer0, id: asteroidid}); asteroid.radius(1); asteroid.xpos((math.random()*300)+200); asteroid.ypos((math.random()*5)+document.height/2); asteroid.xvel(0); asteroid.yvel(-5); asteroid.mass(1000); asteroid.xacc(0); asteroid.yacc(0); }
you can select asteroids using [container].get('.asteroids') example:
var asteroids = layer.get('.asteroids')
or var asteroids = stage.get('.asteroids')
returned array of kinetic objects have name asteroids.
see here more information: http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shapes-by-name-with-kineticjs/
update:
perhaps should try extend kinetic.shape custom object (celestials). have access of kineticjs methods along custom methods. ideally want don't want lose out on functionality of kineticjs, while using kineticjs create objects.
see link reference: how extend kineticjs shape
Comments
Post a Comment