0

我似乎完全迷失在 EaslJS 中。当我的函数被调用时，我不知道如何调整矩形的大小。

场景是这样的：我的玩家被击中，生命值降低，因此生命值条变小。

这是我创建健康栏的方式：

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();在我的循环中，所以它正在更新您可能期望的方式。

4

2 回答 2

4

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

如果要更改内容，则必须重新绘制 Shape 的内容。

您将在 statusBar 控制器中绘制健康矩形，如下所示：

    // 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();
于 2013-03-26T17:11:39.060 回答
2

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

干杯。

于 2013-03-26T23:59:11.883 回答