CODEWITHSUNDEEP
javascripthtmlhtml5-canvaseaseljs
CaptainCarl
CaptainCarl

Reputation: 3489

Resizing a rectangle in EaselJS

I'm completely lost in EaslJS it seems. I can't figure out how to resize a rectangle when my function is called.

The scenario is this: My player get hit, health is decreased and therefore the healthbar gets smaller.

Here's how i create the 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;

And this is where i'm trying to resize it:

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

My stage.update(); is in my loop, so it is updating the way you may expect.

Upvotes: 0

Views: 2814

Answers (2)

Lanny
Lanny

Reputation: 11294

MarkE's answer is correct, however its worth noting that although EasleJS doesn't support "width" or "height" properties, you can set the scaleX/scaleY. To resize a Shape, you could just draw it at 100%, and then scale it between 0 and 1.

Cheers.

Upvotes: 2

markE
markE

Reputation: 105035

In easelJS the Shape object is actually a controller for doing custom drawing.

You must redraw the Shape's contents if you want the contents to change.

You would draw your health rectangle in your statusBar controller like this:

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

Then when you want to change a players health, you would redraw your health rectangle like this:

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

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

Upvotes: 4

Related Questions