The filling of complex shapes is wrong [html5, mac-legacy]

Help
#1

Here is the sample of the rings:

    var ring = new Sprite();
    ring.graphics.beginFill(0x24AFC4);
    ring.graphics.drawRect (0, 0, 120, 100);
    ring.graphics.drawRect (10, 10, 100, 80);
    ring.graphics.endFill();
    ring.x = 20;
    ring.y = 380;
    addChild(ring);


    var ringPath = new Sprite();
    ringPath.graphics.beginFill(0x24AFC4);
    ringPath.graphics.drawPath(
        flash.Vector.ofArray([
            GraphicsPathCommand.LINE_TO,
            GraphicsPathCommand.LINE_TO,
            GraphicsPathCommand.LINE_TO,
            GraphicsPathCommand.LINE_TO,
            GraphicsPathCommand.MOVE_TO,
            GraphicsPathCommand.LINE_TO,
            GraphicsPathCommand.LINE_TO,
            GraphicsPathCommand.LINE_TO,
            GraphicsPathCommand.LINE_TO
        ]), flash.Vector.ofArray([
            120.0, 0, 120, 100, 0, 100, 0, 0,
            10, 10,
            110, 10, 110, 90, 10, 90, 10, 10
        ]));
    ringPath.graphics.endFill();
    ringPath.x = 160;
    ringPath.y = 380;
    addChild(ringPath);

The results:

  • HTML5 - works wrong;
  • MAC - works OK;
  • MAC (legacy) - drawRect doesn’t work, drawPath works OK.

The screenshots are on the page of the issue on github - https://github.com/openfl/openfl/issues/888.
I’ve also found some solution for the HTML. You can found it there.

Maybe somebody experienced the same issue and found a better solution?

#2

Have you tried these PR ?


#3

It is reassuring that Cairo appears to be working fine in these tests (native, non-legacy). Cairo is usually similar to canvas, I wonder why one fills and one does not. I tried changing the winding rule for canvas fills, but it didn’t seem to fix the above test case. It would be great to try and identify the right fix for HTML5. I think that legacy should probably be “won’t fix”, what do you think?

#4

Do you mean that you tried changes like that https://github.com/ngrebenshikov/openfl/commit/292623bf0ec4536a937d07243f958637b42bcbd7 ? I tried it and it worked for me.

Regarding the legacy it depends on how much we need a good support of SVG of smith like this. It’s very common case there. As for me I can live with this issue in legacy mode.