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 に答える