Image does not scale

[n3v3rf411]

Tested with OpenFL backend only. Image component having bitmap dimensions greater than parent component dimensions shows the bitmap in its original dimensions.

Expected Behavior

The image display should scale.

Current Behavior

It does not scale at all.

Possible Cause

haxe.ui.backend.ImageDisplayBase#validateData overwrites _imageWidth and _imageHeight that were set in haxe.ui.components.Image#resizeChildren. Since validateData is called before validateDisplay, which sets the bitmap scale in OpenFL, the value used in determining the scales are always equal to the original image width and height.

Steps to Reproduce (for bugs)

        var image:Image = new Image();
        image.resource = "img/main/dialogBack.png";
        image.scaleMode = ScaleMode.NONE;
        image.imageVerticalAlign = VerticalAlign.TOP;
        image.imageHorizontalAlign = HorizontalAlign.LEFT;
        image.percentWidth = 100;
        image.percentHeight = 100;

        var container:Component = new Absolute();
        container.width = 250;
        container.height = 300;

        container.addComponent(image);

        image.invalidateComponent(InvalidationFlags.DISPLAY);

        main.addComponent(container);

Your Environment

• Version used: https://github.com/haxeui/haxeui-core/commit/bf2b82005a55878a0f67181159a1555e07e3dbd9 (also occurs in master) https://github.com/haxeui/haxeui-openfl/commit/e012fd68aa8f5d48edbe7d84f069b2558e651dab (also occurs in master)

[ianharrigan]

thanks for a great reproducible issue - will look shortly!

[ianharrigan]

Can you attach the dialog back image? Or something of similar size?

Cheers, Ian

[n3v3rf411]

Here it is:

The css in the original flash source is as follows. I would like to replicate its behaviour but maybe there is no equivalent for scaleGrid* in haxeui:

.dialogBackGroundSkin{
  border-skin:Embed(source="../image/main/dialogBack.png", scaleGridTop='4', scaleGridBottom='602', scaleGridLeft='4', scaleGridRight='969');
  disabled-overlay-alpha:0;
}

[ianharrigan]

Ah, are you trying to 9-slice it? ie, the corners stay the same and the sides and middle stretch appropriately?

[n3v3rf411]

Yes yes indeed! I want to reuse this image for dialogs of any sizes.

[ianharrigan]

Ok, cool - its certainly possible in haxeui... let me knock up an example real quick.

[ianharrigan]

ok, this should work:

<style>
    .dialog-bg {
        background-image: "img/bg.png";
        background-image-slice: 5px 5px 602px 969px;
        padding: 10px;
    }
</style>

<vbox width="200" height="200" styleNames="dialog-bg">
    <button text="Button" />
    <button text="Button" />
    <button text="Button" />
    <button text="Button" />
    <button text="Button" />
    <button text="Button" width="100%" height="100%" />
</vbox>

and i get:

Hope that helps!

Ian

[n3v3rf411]

Ooo works great! Thanks!

I think we can close this now 😃