BitmapData#draw Rotated Gradient Issue

#1

there seem to be an issue drawing gradients created with rotation into a BitmapData, it behaves quite differently in html5/neko vs flash (as in flash version does the expected thing).

the core of the code is:

    var bitmapData = new BitmapData(HW, H, false, 0x000000);

    var matrix = new flash.geom.Matrix();
    matrix.identity();

    matrix.createGradientBox(HW, H, Math.PI / 2, 0, 0);

    var box = new Sprite();

    box.graphics.clear();
    box.graphics.lineStyle(0, 0x000000, 0);
    box.graphics.beginGradientFill(flash.display.GradientType.LINEAR, [0xFF0000, 0x0000FF], [1.0, 1.0], [0, 0xFF], matrix);
    box.graphics.drawRect(0, 0, HW, H);
    box.graphics.endFill();

    matrix.identity();
    bitmapData.draw(box, matrix);

the result can be seen in the attached image.

draw_gradient_90_flash_vs_html5
draw_gradient_90_flash_vs_html5.png1307×489 5.43 KB

here’s a link to the full test project: http://www.pirongames.com/private/drawgradient90.zip

thanks for looking into this.

BUG: HTML5 target crashes when drawing Shape to BitmapData
#2

Does it look correct before you bitmapData.draw?

#3

Yeah, should look alright. I believe the issue comes from the fact that in flash, for matrix arg of draw, null or identity matrix are equivalent, while in openfl, they are not. It’s not a big deal, but maybe should be mentioned somewhere in the docs?

#4

So does this behave differently if you make one of the arguments null? Is there a workaround to get the result you’re expecting?

#5

sorry, my bad. have this kind of code in a bunch of projects, so mixed up the results.

so with the code above, turns out that calling matrix.identity() after using that matrix for creating the gradient is reseting the gradient. i guess in flash, beginGradientFill makes a copy of the matrix arg.

#6

Ah, gotcha. Okay, well that sounds solvable