[P0lip]

#javascript #js #css

https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix

Nowiutkie API

[PsichiX]

@P0lip: a do czego to jest? transformacje elementów DOM? jest jakiś przykład użycia?

[P0lip]

@PsichiX: Tylko na FF obecnie działa.

Przykładowo

var matrix = new DOMMatrix();

matrix.translateSelf(1,50).scale3dSelf(4);

Dostajesz matrycę 4x4 do operacji 2d i 3d. A matryca się przydać może w CSS (przykładowo)

Tu jest dość dobrze opisana specyfikacja http://dev.w3.org/fxtf/geometry/Overview.html#dom-dommatrix

[PsichiX]

@P0lip: specyfikację to ja widziałem - ja się pytam, do jakiego to konkretnie zastosowania? chciałbym zobaczyć przykład użycia tego w akcji, jak taka macierz transformuje coś konkretnego, bo zbudować macierz to ja już potrafię, a i szybko działa na gl-matrix i TypedArrays

[P0lip]

@PsichiX: Z tego co tu widzę to po wywołaniu toString() dostajesz coś takiego (w 35, bo w 33 jest bug i dostajesz ["object DOMMatrix"]) "matrix(2, 0, 0, 2, -20, -20)" więc raczej tylko do CSS (transformacji 2d i 3d)

transform:matrix(2, 0, 0, 2, -20, -20), tak samo jest właściwość is2d więc tak myślę

[P0lip]

@PsichiX: Akczolwiek także możesz dostać w postaci Float64Array lub Float32Array

[P0lip]

@PsichiX:

var matrix = new DOMMatrix();

matrix.translateSelf(1,50).scale3dSelf(4).invertSelf();

matrix.toFloat32Array();

[P0lip]

@PsichiX: Ja na razie tylko wykorzystałem do transformacji CSS i śmiga. Tobie pewnie przyda się w formie TypedArrayu - Floata32 albo 64

[PsichiX]

@P0lip: inaczej - pokaż mi co ja mogę transformować przez tę macierz, bo w specu nie zauważyłem magicznej metody "transformElement" ( ͡º ͜ʖ͡º)

[P0lip]

@PsichiX: No bo przy tym dostajesz tylko macierz, a żeby transformować musisz użyć innych metod :P. W CSS to ja to robię tak

Element.style.setProperty("transform", matrix.toString()); // lub transform3d

[PsichiX]

@P0lip: aah. no to powiem to, co chciałem powiedzieć ja i znajomi z pracy - to api jest useless :| a na pewno dla gamedevu - kto normalny robi real-time animacje w css? :<

[P0lip]

@PsichiX: Tja, trochę tak. Jedyne co to matryca jest, którą możesz albo finalnie otrzymać w postaci Stringa gotowego do wrzucenia do CSS albo Float32Array lub Floata64

var matrix = new DOMMatrix();

matrix.scale3dSelf(2);

document.body.style.setProperty("transform", matrix.toString());

Takie coś, na przykład. Dopiero to jest draft, może się coś zmieni.

[PsichiX]

@P0lip: oby, bo api (nawet olać to śmieszne nazewnictwo) aktualnie ssie pałkę. pytanie, czy inne przeglądarki przejmą to (oby nie, bo spowoduje to kolejny nowy trend ujowego zastosowania pierdół w JSie przez nowych).

[P0lip]

@PsichiX: Podobne API do animacji stworzyli, zupełnie bezużyteczne.

Swoją drogą, w Twoim przypadku navigator.hardwareConcurrency może być przydatne

[PsichiX]

@P0lip:

Swoją drogą, w Twoim przypadku navigator.hardwareConcurrency może być przydatne

tak, to akurat bardzo sobie cenię przy projekcie z WebWorkerami <3

[P0lip]

@PsichiX: No właśnie to miałem na myśli. Jedyne co to FF nie zamierza tego obsługiwać :DDD

[PsichiX]

@P0lip: na FF to akurat mogę dać jakieś minimum 4 wątków tak dla pewności jakiejkolwiek poprawy wydajności.

[P0lip]

@PsichiX: Na FF ewentualnie możesz z navigator.oscpu skorzystać

[PsichiX]

@P0lip: ooo, o tym to nie wiedziałem +1

[P0lip]

@PsichiX: Z tym, że to tylko zwraca platformę, ale i tak lepsze to niż nic

https://developer.mozilla.org/en-US/docs/Web/API/Navigator.oscpu

No i polyfill jest, ale wykrycie trwa trochę - jakieś 5-6 sekund, więc nie jest to idealne

[PsichiX]

@P0lip: meh - nie zwraca ilości rdzeni, ani nic o cpu D: