在EaselJS中调整矩形的大小

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

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

下面是如何创建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();是我的循环，所以它更新的方式你可能会期待。

来源

2013-03-26 CaptainCarl

在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();

来源

2013-03-26 17:11:39 markE

代码是正确的，但是你能否改变术语“容器” - 它可能与'createjs.Container'混淆，其中'Shape'不会从中继承:) – olsn 2013-03-26 21:30:54

@olsn：可能是一个好点;）编辑为称Shape对象是绘图控制器而不是容器。 – markE 2013-03-26 22:05:10

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

干杯。

来源

2013-03-26 23:59:11 Lanny

通常情况下，我尽量不使用scale作为第一选择，因为许多库都可能会出现失真，但EaselJS可以很好地缩放（即使是渐变！），我同意你也可以使用缩放:) – markE 2013-03-27 03:35:07

在EaselJS中调整矩形的大小

回答

相关问题