How to apply filter for text in Button?

Questions
1

Hi,
I want to apply filter DropShadow for the text in the button . Using the method filter for that , applied dropshadow for the button, not for the text
For example, if I have a button with name testButton this:

        var testButton= new Button();
        testButton.width = 120;
        testButton.height = 50;
        testButton.text = "Test button";
        var dropShadowFilter = new DropShadow();
        dropShadowFilter.distance = 20;
        dropShadowFilter.angle = 45;
        dropShadowFilter.color  = 0x04f004;
        dropShadowFilter.alpha = 0.5;
        dropShadowFilter.blurX = 6;
        dropShadowFilter.blurY = 1;
        dropShadowFilter.strength = 300;
        dropShadowFilter.quality = 35;
        dropShadowFilter.inner = false;
        testButton.customStyle.filter.push(dropShadowFilter);

will applied filter on the button, not for the text “Test button”

Second question is it possible to add button directly to the screen without using VBox / HBox …
Because this Screen.instance.addComponent(testButton); won’t show background image , if the background image is load after that adding ( using VBox works)
At example:

      button = new Button();
      button.text = "Test button";
      Assets.loadBitmapData("img/base.png").onComplete(imageLoaded);
       
       // vbox.addComponent(button);
       Screen.instance.addComponent(button);

    private function imageLoaded( bitmapData:BitmapData ):Void
    {
      testButton.customStyle = {
        backgroundColor: -1,
        borderTopSize: 0,
        borderLeftSize: 0,
        borderBottomSize: 0,
        borderRightSize: 0,
        backgroundImageSliceTop: 58,
        backgroundImageSliceLeft: 75,
        backgroundImageSliceBottom: 110,
        backgroundImageSliceRight: 400,
        backgroundImage: bitmapData,
        color: 0xffffff,
        cursor: "pointer"
      }
    {
   }
2

I want to apply filter DropShadow for the text in the button

In your example code the filter is applied to the button, not the buttons label. To get the buttons label (in code) you could do something like: testButton.findComponent(Label).customStyle... however, you will almost certainly have to do that after the button text has been set (as this creates the label on demand), and even then it might happen a frame later (not sure atm), so you might need to wrap all that up in a Toolkit.callLater(...), alternatively css can do this with:

.button .label {
    ...
}

Note: im not sure how good a filter will look on the text, i think its gonna depend on the backend and how its implemented, for example, on haxeui-html it looks crappy, because the impl uses box-shadow (ive made a note to change this maybe to something better)

Your second issue seems valid, the code looks fine - it shouldnt matter when or where you set the background image for a component, it should work any time - it check it out.

Cheers,
Ian

3

Thank you!
It works when I use Toolkit.callLater(...) ( it doesn’t matter when I set the button text)

Without that it gave
Uncaught TypeError: Cannot read properties of null (reading 'get_customStyle')

For target , I use OpenFL , but I did not compare result between haxeui-openfl and pure openfl dropshadow. Hope so the result is the same.

4

Yeah, that error makes sense - the issue is that the label hasnt been created when the button is created. I guess if you dont call .text then it will fail all the time. But yeah, the .text call will update the text, this will call and invalidation sequence next frame which will then create the label.

This is why css is the better choice :wink: :stuck_out_tongue:

Cheers,
Ian