Jump to content

Strange Behavior of a rectangle


guruyaya
 Share

Recommended Posts

Hi friends.

I found some strange behavior while working on an app. This issue is demonstrated best on this codepen

As you can see, the update function is designed to update the width property, but as you also see - it also changes with position of the element - dragging it left. I can't figure out why.

Any advice you can offer on this?

Thanks in advance

Yair

Link to comment
Share on other sites

When you set the width of a rectangle like that it actually sets its scale to fit instead of reapplying the width. What you should do instead is clear and redraw the rectangle:

 

  create: function() {
    this.timeBarLength = 300;
    this.timeBar = this.add.graphics(0,0);
  },
  update: function(){
      if (this.timeBarLength) this.timeBarLength -= 1;
      this.timeBar
      .clear()
      .lineStyle(5, 0x0000FF, 90)
      .beginFill(0x00FF00)
      .drawRect(30, 60, this.timeBarLength, 30)
      .endFill()
  }

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...