bp74 / StageXL

A fast and universal 2D rendering engine for HTML5 and Dart.
http://www.stagexl.org
Other
881 stars 82 forks source link

Scrolling content in a masked container behaving differently after 1.3 upgrade #296

Closed mayorbyrne closed 6 years ago

mayorbyrne commented 6 years ago

I am part of a project which involves scrolling lists of DisplayObjects. I have code that behaves drastically different between 1.1.0 (working) and 1.3.0 (breaking, I believe as of 1.2). Was wondering if you could give me insight into the issue, and how I might be able to resolve it.

Previously (1.1.0), I added a mask to the wrapper, and added the items to the wrapper, adjusting the Y position of the wrapper itself depending on scroll direction. Doing the same thing in 1.3.0 displays differently, and I am unable to adjust the Y positioning of the wrapper content.

It seems to be breaking on relativeToParent, as taking that line wrapperMask.relativeToParent = true; out allows me to scroll again, albeit with incorrect mask positioning.

Please let me know what I am doing wrong!

  Shape bg = new Shape()
    ..graphics.rect(0, 0, 500, 500)
    ..graphics.fillColor(Color.Green)
    ..x = 50
    ..y = 50
    ..addTo(stage);

  _wrapper = new Sprite()
    ..x = 50
    ..y = 50
    ..addTo(stage);

  Mask wrapperMask = new Mask.rectangle(50, 50, 500, 500);
  wrapperMask.relativeToParent = true;
  _wrapper.mask = wrapperMask;

  int posY = 10;
  for (int i = 0; i < 20; i++)
  {
    new TextField("HELLO WORLD $i", new TextFormat("Arial", 24, Color.Black)
      ..align = TextFormatAlign.CENTER)
      ..width = 500
      ..height = 50
      ..y = posY
      ..border = true
      ..addTo(_wrapper);

    posY += 50;
  }

Here's a screenshot of the initial load of the page, with the exact same code on each browser window.

capture

bp74 commented 6 years ago

Hi, sorry to hear that we had a breaking change. I will take a look at it later today!

bp74 commented 6 years ago

I did some testing and i think i know what is going on. But I don't understand why it worked with 1.1.0, since i can't figure out what has change since then. I have committed a change to GitHub but i need to do more testing (probably this weekend). It would be great if you could test your use case too and provide some feedback.

5449d5b9d4eb80cf1462f2ebb12e6c24e6e3ba14

bp74 commented 6 years ago

Btw. please also set the borderColor of the TextField. ..borderColor = Color.Black

645170d6337c2424585967120471eda424f92061

mayorbyrne commented 6 years ago

@bp74 thanks for looking into this! I used the latest 1.3.0+1 and it appears to have fixed the issue seen here.

bp74 commented 6 years ago

The version 1.3.0+1 which is available on Pub does not have the fix. The fix is only available if you use the master branch from GitHub. So you have probably used this one, right?

bp74 commented 6 years ago

Just saw your other issue report. So you applied the DropShadowFilter which fixes this issue. But it's not a good fix or even workaround to use filters to fix this issue. With the latest commits here on GitHub the masking issue should be fixed, even without the filter workaround.

mayorbyrne commented 6 years ago

The DropShadowFilter was a separate issue from this. All I did to remedy #296 was update the stagexl dependency to use the github branch in the pubspec.

bp74 commented 6 years ago

Okay great. I will fix the filter issue over the weekend!

mayorbyrne commented 6 years ago

@bp74 Has there been any word or progress on the filter issue?

bp74 commented 6 years ago

This issue is fixed with the master branch on GitHub, right? The other bug with the filter is not solved yet, but that #297