0

大家晚上好。我在具有以下方法的 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 方法，但我失败了。有人可以帮我吗？

4

1 回答 1

0

你想给你的自定义形状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的 Kinetic 对象的数组。

有关更多信息，请参见此处：https ://github.com/ericdrowell/KineticJS

更新：

也许您应该尝试使用自定义对象（天体）扩展 Kinetic.Shape。然后，您将可以访问所有 KineticJS 方法以及您的自定义方法。理想情况下，这是您想要的，因为您不想失去 KineticJS 的功能，同时使用 KineticJS 创建对象。

请参阅此链接作为参考：如何扩展 KineticJS 形状

于 2013-08-26T13:27:40.130 回答