haxeui / haxeui-openfl

The OpenFL backend of the HaxeUI framework -
http://haxeui.org
MIT License
42 stars 14 forks source link

Tint filter #64

Closed Shallowmallow closed 11 months ago

ianharrigan commented 11 months ago

Thanks! Do we have any idea how this can be achieve in html5? Is that the PITA one?

Shallowmallow commented 11 months ago

Exactly ! I think in the future we could implement this one if we are able to implement svg filters https://www.creativebloq.com/how-to/add-svg-filters-with-css

Le mar. 26 sept. 2023 à 11:05, Ian Harrigan @.***> a écrit :

Thanks! Do we have any idea how this can be achieve in html5? Is that the PITA one?

— Reply to this email directly, view it on GitHub https://github.com/haxeui/haxeui-openfl/pull/64#issuecomment-1735130254, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADBNBIXFHQHR3HKQSK4M6W3X4KLFNANCNFSM6AAAAAA5HK4MGM . You are receiving this because you authored the thread.Message ID: @.***>

ianharrigan commented 11 months ago

That link is interesting, so it seems pretty easy to create colour matrix filter via svg:

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="testFilter">
        <feColorMatrix
            in="SourceGraphic"
            type="matrix"
            values="0 0 0 0 0
                    1 1 1 1 0
                    0 0 0 0 0
                    0 0 0 1 0" />
    </filter>
</svg>
<img id="theImage" src="haxeui.png" style="filter: url(#testFilter);">

image

So i guess all we need is an ability to build and track them... probably easiest way is to create some helpers in haxeui-html5 that will store the svg filter via a hash of its values... all seems pretty easy / doable though