在EaselJS中调整矩形的大小

Question

我完全迷失在EaslJS中。当我的函数被调用时，我无法弄清楚如何调整矩形的大小。

情景是这样的：我的玩家被击中，健康状况下降，因此健康状况变得更小。

下面是如何创建healthbar：

this.statusBar = new createjs.Shape() 
this.statusBar.graphics 
    .beginFill("red") 
    .drawRect(0, 0, this.width, this.height); 
this.statusBar.x = this.x+500; 
this.statusBar.y = this.y; 
this.statusBar.width = this.width; 
this.statusBar.height = this.height; 

而这正是我试图调整其大小：

this.decreaseHealth = function(amount) { 
    percentageLeft = (player.health/player.fullPlayerHealth)*100; 
    console.log(this.fullBarWidth*(percentageLeft/100)); 
    this.statusBar.width = this.fullBarWidth*(percentageLeft/100); 
} 

我stage.update();是我的循环，所以它更新的方式你可能会期待。

Answer 1

在easelJS中，Shape对象实际上是用于执行自定义绘制的控制器。

如果您想要更改内容，您必须重绘Shape的内容。

你会画你的健康矩形的状态栏。控制器是这样的：

// get a reference to the html canvas element 
    var canvas=document.getElementById("canvas"); 

    // create a new Stage 
    var stage=new createjs.Stage(canvas); 

    // create a new Shape 
    // the shape object is actually a controller for doing custom drawings 
    var shape=new createjs.Shape(); 

    // add the shape controller to the stage 
    stage.addChild(shape); 

    // draw a rectangle using the shape controller 
    shape.graphics.clear().beginFill("#F00").drawRect(30,20,150,25); 

    // display all updated drawings 
    stage.update(); 

然后，当你想改变一个球员的健康，你会重新绘制自己的健康矩形这样的：

// redraw the health rectangle using the shape controller 
    shape.graphics.clear().beginFill("#F00").drawRect(30,20,75,25); 

    // display all updated drawings 
    stage.update(); 

Answer 2

MarkE的回答是正确的，但值得注意的是，虽然EasleJS不支持“宽度”或“高度”属性，但您可以设置scaleX/scaleY。要调整形状大小，可以将其绘制为100％，然后在0和1之间进行缩放。

干杯。