在KineticJS和Javascript上选择多个自定义对象

Question

祝您有个愉快的夜晚。我创建一个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，但我失败了。有人能帮助我吗？

Answer 1

你想给你的自定义形状一个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); 
} 

然后，您可以通过使用[容器]不用彷徨选择所有小行星例如（”小行星。）：

var asteroids = layer.get('.asteroids')或var asteroids = stage.get('.asteroids')

返回的是，具有名称小行星动力学对象的数组。

在这里看到更多的信息：http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shapes-by-name-with-kineticjs/

UPDATE：

也许你应该尝试的Kinetic.Shape与您的自定义对象（仙人）延伸。然后，您将可以访问所有KineticJS方法以及您的自定义方法。理想情况下，这是你想要的，因为你不想失去KineticJS的功能，而使用KineticJS来创建对象。

请参阅此链接作为参考：How to extend KineticJS shape