[英]Select multiple custom objects on KineticJS and Javascript
大家晚上好。 我在KineticJS上创建一个具有以下方法的对象:
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);
}
然后,我创建一个循环来创建此对象:
for (var i = 0; i < 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);
}
我正在尝试所有方法来选择所有20个小行星,因此我可以运行addForce,calcNewState和resetForce方法,但我失败了。 有人可以帮我吗?
您想给自定义形状起一个这样的name
:
this.celestialBody = new Kinetic.Circle({
name: cb.name, // <-- This works like a CSS Class and can be selected with "."
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
});
在这种情况下,我会给您的自定义形状一个有意义的名称,将形状分组在一起,例如“小行星”,然后将其添加到循环中:
for (var i = 0; i < 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);
}
然后,您可以使用[container] .get('。asteroids')选择所有小行星,例如:
var asteroids = layer.get('.asteroids')
或var asteroids = stage.get('.asteroids')
返回的是名称为asteroids的动力学对象数组。
请参阅此处以获取更多信息: https : //github.com/ericdrowell/KineticJS
更新:
也许您应该尝试使用自定义对象(天体)扩展Kinetic.Shape。 然后,您将可以访问所有KineticJS方法以及自定义方法。 理想情况下,这就是您想要的,因为您不想在使用KineticJS创建对象时失去KineticJS的功能。
请参阅此链接作为参考: 如何扩展KineticJS形状
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.