我似乎完全迷失在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();
在我的循环中,因此它正在更新您期望的方式。
答案 0 :(得分:3)
在画架中,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();
答案 1 :(得分:2)
MarkE的答案是正确的,但值得注意的是,虽然EasleJS不支持“width”或“height”属性,但您可以设置scaleX / scaleY。要调整Shape的大小,可以将其绘制为100%,然后将其缩放到0和1之间。
干杯。